はじめに
ローカル環境(自分のPC)を汚さずに開発したい...
そんな時、Visual Studio Code の拡張機能「 Remote - Containers 」がおすすめです。
Dockerコンテナ環境内のフォルダーからVisual Studio Codeを起動し、プログラムの実行、デバッグ、コード補完、ターミナルからのコマンド実行など、通常と同じ操作ができます。
ローカル環境の代わりにDockerコンテナ環境を利用するため、同一プロジェクトを複数人で作業する際に、完全に同じ開発環境を簡単に構築できます。
今回は初めて「 Remote - Containers 」を利用する方向けの記事となります。
簡単ですので、まだ体験したことが無い方は、ぜひ一度使ってみてはいかがでしょうか。
前提条件
- Visual Studio Code がインストール済み
- Docker Desktop がインストール済み
- Docker Desktop を起動をしておく
「Remote - Containers」をインストール
Visual Studio Code の拡張機能の画面を開き、 Remote - Containers をインストールします。
Dockerコンテナを作成
Visual Studio Code の画面左下の緑色のボタン(リモートウインドボタン)をクリックし、「Remote - Containers」用のコマンドを表示します。
「Open Folder in Container...」を選択し、保存先のフォルダーを選択します。
利用するDockerコンテナの種類を選択します。OS(Alpine、Debian, Ubuntuなど)、開発言語(Node.js, Rust, Go, C#, Javaなど)、データベース(PostgreSQL, MongoDB)など様々な種類が登録されています。
今回は例として Ubuntu を選択します。
利用するUbuntuのバージョンを選択します。今回は例として hirsute を選択します。
Dockerコンテナにインストールするツールを選択します。今回は例として下記を選択し、OKボタンをクリックします。
- Node.js (via nvm) and yarn
- AWS CLI
- Terraform, tfint, and TFGrunt
インストールするツールのバージョンを選択します。今回は例として下記のバージョンを選択します。
- Node.js: lts
- Terraform: latest
利用するDockerイメージがダウンロードされ、Dockerコンテナが起動されます。(少し時間がかかります。)
Dockerコンテナ環境内のフォルダーで Visual Studio Code が開かれます。
Dockerコンテナ環境内のVisual Studio Code に、便利な拡張機能(ESLint, AWS Toolkit, HashiCorp Terraformなど)が自動的にインストールされます。
プログラムを実行
例として、ルートフォルダーに下記の様な main.js を作成します。エディタ上でコード補完が動作することを確認します。
let message = "ハローワールド";
console.log(message);
ターミナルから下記のコマンドを実行します。
$ node main.js
プログラムをデバッグ
例として、 main.js を開いた状態で「実行 > デバックの開始」クリックをします。環境の種類を聞かれた場合は「Node.js」を選択します。
デバッグコンソールに結果が表示されます。
下記の様に、コード上にブレークポイントを設定し、デバッグができます。
各種ルーツを実行
今回は例として、AWS操作ツール( AWS CLI, Terraform )を実行してみます。
AWSを利用していない場合はスキップして頂いて構いません。
秘密の環境変数を設定
AWSアクセスキーや各種パスワードなどの秘密の環境変数は、
下記のファイル( /.devcontainer/devcontainer.env )を作成して追記します。
AWSアクセスキーをお持ちでない方は、AWSのIAM画面からアクセスキーを作成します。
AWS_ACCESS_KEY_ID=(AWSアクセスキーIDを設定)
AWS_SECRET_ACCESS_KEY=(AWSシークレットアクセスキーを設定)
AWS_REGION=ap-northeast-1
既存の /.devcontainer/devcontainer.json の中に、下記を追記して環境変数ファイルを読み込むようにします。
"runArgs": ["--init", "--env-file",".devcontainer/devcontainer.env"]
追記した環境変数をDockerコンテナに読み込ませるため、「Remote - Containers」用のコマンド(画面左下の緑色ボタン)の「Rebuild Container」を実行します。
git の除外ファイルを設定
ルートフォルダーに下記の .gitignore を作成し、秘密の環境変数ファイル( devcontainer.env )が git にコミットされないようにします。大変重要です。
.env
.terraform
*.tfstate
*.tfstate.*
AWS CLI を実行
今回は例として、EC2のリージョン一覧を表示します。
ターミナルから下記のコマンドを実行し AWS の EC2 のリージョン一覧が表示されれば実行成功です。
$ aws ec2 describe-regions
Terraform を実行
今回は例として、EC2の作成と削除を行います。
ルートフォルダーに下記の様な main.tf を作成します。
# プロバイダ
provider "aws" {
region = "ap-northeast-1"
}
# EC2
resource "aws_instance" "test-server" {
ami = "ami-04204a8960917fd92" # Amazon Linux 2 AMI (HVM) - Kernel 5.10, SSD Volume Type
instance_type = "t2.micro"
tags = {
Name = "test-server"
}
}
ターミナルから下記のコマンドを実行します。AWS上にEC2を作成、削除ができれば実行成功です。
$ terraform init (Terraformの初期化を行う。初回に1回だけ実行)
$ terraform plan (AWSの変更内容を確認します。まだAWSには反映されません)
$ terraform apply (AWS上にEC2を作成します。
「Enter a value:」と表示されるので「yes」を入力します)
$ terraform destroy (作成したEC2を削除します。
「Enter a value:」と表示されるので「yes」を入力します。
詳細な利用方法は Terraform の公式ドキュメントをご覧ください。
終了する場合
Visual Studio Code を閉じると、自動的にDockerコンテナも停止されます。
再開する場合
再び利用する場合は、保存先のフォルダーをVisual Studio Codeから開くと、画面右下に下記のメッセージが表示され、「Reopen in Container」ボタンをクリックします。
または、「Remote - Containers」用のコマンド(画面左下の緑色ボタン)から「Reopen in Container」や「Open Folder in Container...」を選択します。
Dockerコンテナを削除
もう利用しない場合は、Dockerコンテナの削除を行います。
いったん、Dockerコンテナ環境の Visual Studio Code からローカル環境の Visual Studio Code に切り替えます。
「Remote - Containers」用のコマンド(画面左下の緑色ボタン)から「Reopen Folder Locally」をクリックします。
下記の画面の様に、画面左の「リモート エクスプローラ」をクリックします。
「Dev Containers」配下の削除したいDockerコンテナのサブメニューを開き「Remove Container」をクリックすると、Dockerコンテナを削除できます。
まとめ
この様に簡単にDockerコンテナ上で Visual Studio Code を動かすことが出来ました。
今回は Ubuntuイメージ に後から Node.js や各種ルーツを入れる方法でしたが、Node.jsやJava専用のDockerイメージも用意されているため、手軽に開発を始めることができます。
Visual Studio Code 用のDockerイメージの詳細は下記をご覧ください。様々な開発言語ごとのプロジェクトファイルのサンプルが記載されています。これを応用して、自分のプロジェクトに取り入れてみてはいかがでしょうか。
参考資料
/.devcontainer/devcontainer.json の設定値の詳細は下記をご覧ください。