[Mac] VSCode で Docker による開発環境を利用する方法

Docker
スポンサーリンク

みなさんは 開発環境をどのように準備・構築しているでしょうか?

筆者は普段 Mac を使用して、様々なランタイムやパッケージなどをインストールして開発をしています。このようにして開発環境を構築していると、徐々に環境が汚れて問題が出てくるようになります。結果、クリーンインストールをして再構築をするということを繰り返していました。

VSCode で Remote-Containers というエクステンションを使用すると、Dockerコンテナを用いた開発環境を便利に構築、運用できるということなので、実際の環境構築方法を覚書として残しておきます。

スポンサーリンク

環境

macOS Catalina::バージョン10.15.6
VSCode:バージョン1.4.7.3
Remote – Containers:0.128.0
Docker Desktop19.03.12

スポンサーリンク

VSCode と Docker Desktop のインストール

VSCodehttps://code.visualstudio.com/download よりダウンロードしてインストールをします。

Mac 版 VSCode のダウンロード

Mac 版 VSCode のダウンロード

また、Docker Desktop は https://www.docker.com/products/docker-desktop よりダウンロードをしてインストールします。

スポンサーリンク

Remote – Containers のインストール

次に、VSCode を起動したら以下の順番で Remote -Containers をインストールします。

  1. 「拡張機能」を選択
  2. 「Remote – Containers」を検索
  3. 検索結果の一覧から「Remote – Containers」を選択
  4. [インストール] をクリック
Remote - Containers のインストール

Remote – Containers のインストール

Remote – Containers がインストールされると、VSCode の左下に新しいステータスバー項目が表示されます。

追加されたステータスバー項目

追加されたステータスバー項目

スポンサーリンク

Docker Desktop を起動する

まずは、「アプリケーション」からDocker Desktop を起動しましょう。

 

Docker

Docker

Docker Desktop を起動して、「Docker Desktop is running」になることを確認します。

Docker Desktop の running 確認

Docker Desktop の running 確認

スポンサーリンク

Node 開発環境をサクッと構築してみる

いよいよ、Docker を使用した開発環境を作成していきます。

開発環境専用ディレクトリを作成する

はじめに 開発環境の Docker コンテナイメージを準備しましょう。Docker イメージはどこに配置しても構わないのですが、決まった場所を作っておくと何かと便利です。

筆者は、Documets の下に Docker というディレクトリを準備しました。

サンプルの開発環境を git clone する

ここでは、Microsoft が提供しているサンプルを git clone して、Node 開発環境を構築します。

Mac のターミナルを開いて、先ほど作成した コンテナイメージ用のディレクトリに移動した後、以下のコマンドを実行します。

git clone https://github.com/microsoft/vscode-remote-try-node
git clone

git clone

VSCode 左下の緑のアイコンをクリックして Remote Container のメニューを表示します。

Remote Container メニューの表示

Remote Container メニューの表示

以下のように Remote Container のメニューが表示されますので、一覧から「Remote-Containers: Open Folder in Container…」をクリックします。

Open Folder in Container の選択

Open Folder in Container の選択

ディレクトリを選択する画面が表示されますので、git clone したディレクトリを選択します。

ディレクトリの選択

ディレクトリの選択

しばらくすると、ビルドが始まります。

ビルドの開始

ビルドの開始

ビルドが完了したら、VSCode のメニューから[ターミナル]-[新しいターミナル] を選択します。

「新しいターミナル」の選択

「新しいターミナル」の選択

新しいターミナルを開くと以下のようになります。これが Docker で構築した Node 開発環境になります。

新しいターミナル

新しいターミナル

続いて、Node のバージョンを確認してみましょう。

ターミナルに次のコマンドを入力します。

node --version; npm --version

以下のようにバージョン番号を確認することができます。

Node のバージョン確認

Node のバージョン確認

スポンサーリンク

アプリケーションの実行

今度はアプリケーションの実行をしてみましょう。

ターミナル上で [F5]キーを押します。「Running on http://0.0.0.0:3000」のように表示されればアプリケーションは動いています。

ターミナル上で [command] キーを押しながら「http://0.0.0.0:3000」をクリックします。

アプリケーションの実行

アプリケーションの実行

以下のようなメッセージが表示された場合は、[開く] をクリックします。

Web サイトを開く

Web サイトを開く

以下のようにブラウザが起動して、「Hello remote world!!」と表示されます。

ブラウザの起動

ブラウザの起動

スポンサーリンク

コンテナ接続の終了

コンテナの接続を終了するには、メニューの [ファイル]-[リモート接続を閉じる]を選択します。

リモート接続の終了

リモート接続の終了

スポンサーリンク

再接続する

ここでは、接続を閉じたコンテナに再接続する方法を確認しておきましょう。

VSCode 左下の緑のアイコンをクリックして Remote Container のメニューを表示します。

Remote Container メニューの表示

Remote Container メニューの表示

以下のように Remote Container のメニューが表示されますので、一覧から「Remote-Containers: Open Folder in Container…」をクリックします。

Open Folder in Container の選択

Open Folder in Container の選択

ディレクトリを選択する画面が表示されますので、git clone したディレクトリを選択します。

ディレクトリの選択

ディレクトリの選択

スポンサーリンク

ソースコードの修正と実行

ソースコードの修正

ここでは、Docker コンテナ内のソースコードの変更を行ってみます。

まずは、VSCode のエクスプローラーで「server.js」をクリックして開きます。

続いて「 Hello remote world!」を出力している箇所を修正して、「Hello Docker!」と出力されるようにします。

ソースコードの修正

ソースコードの修正

修正後のコードは以下の通りです。

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

'use strict';

const express = require('express');

// Constants
const PORT = 3000;
const HOST = '0.0.0.0';

// App
const app = express();
app.get('/', (req, res) => {
	res.send('Hello Docker!\n');  //★★★修正箇所★★★
});

app.listen(PORT, HOST);
console.log(`Running on http://${HOST}:${PORT}`);

実行

それでは、先ほどと同じようにターミナルで [F5] キーを押して実行をします。

以下のように、「Hello Docker!」と表示されます。

ソースコード変更後の実行

ソースコード変更後の実行

スポンサーリンク

インストールされた Docekr のイメージを確認する

ここでは、インストールされた Docker のイメージを確認してみます。

ターミナルを開いて、以下のコマンドを入力します。

docker images

これでインストールされている Docker イメージの一覧を表示することができます。

実行例を以下に示します。

docker イメージの確認

docker イメージの確認

スポンサーリンク

インストールした Docker イメージを削除する

次に、インストールした Docker イメージを削除してみましょう。

コンテナを停止する

まずは、以下のコマンドでコンテナを停止します。

「docker stop $(docker ps -q)」は、全てのコンテナを停止します。

docker stop [コンテナ名もしくはコンテナID]
または
docker stop $(docker ps -q)

コンテナを削除する

コンテナを削除するには以下のコマンドを実行します。

「docker rm $(docker ps -q -a)」は、全てのコンテナを削除します。

docker rm [コンテナ名もしくはコンテナID]
または
docker rm $(docker ps -q -a)

イメージを削除する

イメージを削除するには以下のコマンドを実行します。

「docker rm $(docker ps -q -a)」は、全てのコンテナを削除します。

docker rmi [イメージ名もしくはイメージID]
または
docker rmi $(docker images -q)
スポンサーリンク

その他の Microsoft 提供 サンプル

今回は、Microsoft が提供する Node の Docker イメージを利用しました。

このほかにも以下が提供されていますので、興味があれば使用してみてください。

そのほかにも様々な環境イメージが提供されています。詳しくは以下を参照ください。

microsoft/vscode-dev-containers
A repository of development container definitions for the VS Code Remote - Containers extension and GitHub Codespaces - microsoft/vscode-dev-containers
Please follow and like us:

コメント

タイトルとURLをコピーしました