みなさんは 開発環境をどのように準備・構築しているでしょうか？
筆者は普段 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 のインストール
VSCode は https://code.visualstudio.com/download よりダウンロードしてインストールをします。
Mac 版 VSCode のダウンロード
また、Docker Desktop は https://www.docker.com/products/docker-desktop よりダウンロードをしてインストールします。
Remote – Containers のインストール
次に、VSCode を起動したら以下の順番で Remote -Containers をインストールします。
- 「拡張機能」を選択
- 「Remote – Containers」を検索
- 検索結果の一覧から「Remote – Containers」を選択
- [インストール] をクリック
Remote – Containers のインストール
Remote – Containers がインストールされると、VSCode の左下に新しいステータスバー項目が表示されます。
追加されたステータスバー項目
Docker Desktop を起動する
まずは、「アプリケーション」からDocker Desktop を起動しましょう。
Docker
Docker Desktop を起動して、「Docker Desktop is 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
VSCode 左下の緑のアイコンをクリックして Remote Container のメニューを表示します。
Remote Container メニューの表示
以下のように Remote Container のメニューが表示されますので、一覧から「Remote-Containers: Open Folder in Container…」をクリックします。
Open Folder in Container の選択
ディレクトリを選択する画面が表示されますので、git clone したディレクトリを選択します。
ディレクトリの選択
しばらくすると、ビルドが始まります。
ビルドの開始
ビルドが完了したら、VSCode のメニューから[ターミナル]-[新しいターミナル] を選択します。
「新しいターミナル」の選択
新しいターミナルを開くと以下のようになります。これが Docker で構築した Node 開発環境になります。
新しいターミナル
続いて、Node のバージョンを確認してみましょう。
ターミナルに次のコマンドを入力します。
node --version; npm --version
以下のようにバージョン番号を確認することができます。
Node のバージョン確認
アプリケーションの実行
今度はアプリケーションの実行をしてみましょう。
ターミナル上で [F5]キーを押します。「Running on http://0.0.0.0:3000」のように表示されればアプリケーションは動いています。
ターミナル上で [command] キーを押しながら「http://0.0.0.0:3000」をクリックします。
アプリケーションの実行
以下のようなメッセージが表示された場合は、[開く] をクリックします。
Web サイトを開く
以下のようにブラウザが起動して、「Hello remote world!!」と表示されます。
ブラウザの起動
コンテナ接続の終了
コンテナの接続を終了するには、メニューの [ファイル]-[リモート接続を閉じる]を選択します。
リモート接続の終了
再接続する
ここでは、接続を閉じたコンテナに再接続する方法を確認しておきましょう。
VSCode 左下の緑のアイコンをクリックして Remote Container のメニューを表示します。
Remote Container メニューの表示
以下のように Remote Container のメニューが表示されますので、一覧から「Remote-Containers: 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 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-remote-try-python
- microsoft/vscode-remote-try-node
- microsoft/vscode-remote-try-go
- microsoft/vscode-remote-try-java
- microsoft/vscode-remote-try-cpp
- microsoft/vscode-remote-try-dotnetcore
- microsoft/vscode-remote-try-rust
- microsoft/vscode-remote-try-php
そのほかにも様々な環境イメージが提供されています。詳しくは以下を参照ください。
コメント