2024.06.03

VSCodeのDevContainersでLocalStackを使う環境構築をサクッとやってみる

shio

こんにちは、しおです。
今回はDevContainersを使ってローカル開発環境をサクッと作ってみようと思います。
作成するローカル環境ではアプリケーションを動かすコンテナとLocalStackのコンテナを立ててみます。

Contents

DevContainersとは
下準備
実際にやってみる
おわりに

DevContainersとは

まずはDevContainersについての説明です。
DevContainersはVSCodeの拡張機能で、Dockerコンテナ上でVSCodeを利用して開発できるようになるものです。
下記も参考のこと
https://code.visualstudio.com/docs/devcontainers/containers

コンテナを利用するので開発に利用するプログラミング言語をローカル端末に整える必要がなく、
開発で利用するVSCodeの拡張機能もコンテナにインストールするように設定できるので、 VSCodeの拡張機能や設定ごと共有がしやすくなります。
ローカル端末にはVSCodeとDevContainersの拡張機能、それとDockerだけを利用できるようにするだけで開発環境の構築が終わるので、環境構築の手間がすごくラクになります。

下準備

実際に触ってみる前の下準備としては下記だけです！

Dockerを使えるようにする
VSCodeにDevContainersをインストールする

Docker以外のコンテナエンジンについてもドキュメントがあるので、そちらも参考にしてください。
https://code.visualstudio.com/remote/advancedcontainers/docker-options

実際にやってみる

まずは簡単な使い方から

まずは簡単な使い方からです。
基本的に .devcontainerというディレクトリに設定ファイル devcontainer.json を追加して利用します。

最初の例としてGoのコンテナをDevContainerとして利用して、拡張機能も含めて立てる流れをやってみます。
ディレクトリと設定ファイルを作成します。

mkdir .devcontainer
touch devcontainer.json

devcontainer.jsonは下記のようにします。

{
  "name": "Dev Container Sample",
  "image": "golang:1.22",
  "customizations": {
    "vscode": {
      "extensions": ["golang.go"],
      "settings": { "go.toolsManagement.autoUpdate": true }
    }
  }
}

nameはVSCodeに表示される名前です。

imageでは利用したいコンテナイメージを記載します（今回はGoのイメージです）。
詳細は後述しますが、imageではなくbuildのプロパティを設定してDockerfileを利用したり、docker-compose.ymlを利用する設定も可能です。

customizations内にはVSCode用の設定を記載しています。

extensionsにはインストールしたい拡張機能のidentifierを、settingsにはVSCodeの設定を記載しています。
必要に応じて追記していきます。

devcontainer.jsonについて補足

その他の設定可能な項目の詳細については下記に詳細があります。
https://containers.dev/implementors/json_reference/

コンテナのライフサイクルに合わせて実行したいスクリプトなども設定できるので、例えばnpm installを開発コンテナ作成後に実行する、といったことをDockerfileなしで設定することができます。
後ほどやってみます。

最低限ここまででDevContainerを立てることができます。

VSCodeのコマンドパレットからDev Containers: Reopen in Containerを叩くと開発コンテナのビルドが始まります。

ビルドが終わったら開発コンテナに接続されます。拡張機能も設定したものがインストールされているはずです。
以降は開発コンテナ上で開発をするだけです。

また、Dev Contaienrs: Reopen Folder Locallyを叩くとコンテナから抜けて、ローカルホストに戻ることができます。

LocalStackを使ってAWSリソースも含めてローカル環境構築する

簡単な設定を確認できたら、今度は開発コンテナとは別にLocalStackのコンテナも一緒に立てて、AWSリソースもローカルで利用できるようにしてみようと思います。

先ほどのdevcontainer.jsonをそのまま上書きで変更していきます。

開発コンテナとLocalStackのコンテナ2つを立てるので、今回はdockerComposeFileを設定してdocker composeを使った設定に変えていきます。

{
  "name": "Dev Container Sample",
  "dockerComposeFile": "./docker-compose.yml",
  "service": "app",
  "workspaceFolder": "/workspace",
  "forwardPorts": [8080],
  "postCreateCommand": "go mod download && go mod tidy && go install github.com/cosmtrek/air@latest",
  "features": {
    "ghcr.io/devcontainers/features/git:1": {},
    "ghcr.io/devcontainers/features/aws-cli:1": {}
  },
  "customizations": {
    "vscode": {
      "extensions": ["golang.go"],
      "settings": { "go.toolsManagement.autoUpdate": true }
    }
  }
}

dockerComposeFileで利用するdocker-compose.ymlを指定して、serviceでどのサービスを開発コンテナとして利用するか設定します(今回はappとしてます)。

postCreateCommandが前述したスクリプトの実行オプションです。コンテナビルド後に走らせたいコマンドを設定しています。
今回はgo mod関連のコマンドと airというホットリロード用のツールをインストールしています。

またコンテナ上でgitとaws-cliも利用できるようにしたいので、featuresに設定を追加しています。
featuresは開発コンテナに機能を追加できるもので、Dockerfileを書かずにコンテナにツールを追加することができます。
利用できるfeaturesは下記にまとまっています。欲しいものがあればまずは下記から探してみると良いです。
https://containers.dev/features

その他、必要な設定を適宜追加しています。
それぞれの項目の詳細は下記を参考にしてください。
https://containers.dev/implementors/json_reference/

devcontainer.jsonの変更が終わったので、docker-compose.ymlを作成します。

docker-compose.ymlも特別なことは必要なく、通常通り書いていくだけです。
開発コンテナ用のappサービスとLocalStackのコンテナを定義します。
LocalStackはとりあえずDynamoDBを使えるようにしています。

version: '3.8'
services:
  app:
    image: golang:1.22
    volumes:
      - ../:/workspace
    working_dir: /workspace
    environment:
      - AWS_ENDPOINT_URL=http://localstack:4566
      - AWS_DEFAULT_REGION=ap-northeast-1
      - AWS_ACCESS_KEY_ID=dummy
      - AWS_SECRET_ACCESS_KEY=dummy
    tty: true
    stdin_open: true
  localstack:
    image: localstack/localstack:latest
    ports:
      - 4566:4566
    environment:
      - SERVICES=dynamodb
      - PERSISTENCE=1
    volumes:
      - ../localstack:/var/lib/localstack

ここまでで設定ファイルの準備はOKです。

devcontainer.jsonを更新した場合は、開発コンテナをリビルドする必要があるので、
VSCodeのコマンドパレットからRebuild and Reopen in Containerを叩きます。

リビルドが完了したら改めて開発コンテナ上で作業ができるようになります。

開発コンテナ上からLocalStackにアクセスできるので、aws-cliやソースコードで確認してみてください。
とりあえずaws-cliでDynamoDBのテーブルを作成してみます。

# テーブルの作成
# aws-cliのページャーとして利用されるlessを入れていないので、--no-cli-pagerオプションを使用しています
aws dynamodb create-table \
  --table-name SampleTable \
  --attribute-definitions AttributeName=Id,AttributeType=S \
  --key-schema AttributeName=Id,KeyType=HASH \
  --no-cli-pager

# テーブルが作成されているか確認
aws dynamodb list-tables --no-cli-pager
{
    "TableNames": [
        "SampleTable"
    ]
}

無事にLocalStackを利用した環境構築ができました。

開発コンテナからgitを使うときの注意

さて、開発コンテナの準備はできたのであとは開発していくだけなのですが、コンテナ上でgitを利用する際に１つ注意があります。

リポジトリへのアクセスのために認証情報をコンテナと共有しておく必要があります。

MacOSでsshを利用して認証している場合は、sshエージェントに鍵を登録します。

ssh-add --apple-use-keychain ~/.ssh/id_rsa # 鍵は利用している鍵を指定する

sshエージェントの設定はDevContainersの拡張機能が自動で転送してくれるので、コンテナ上でsshでgitの認証を通すことができます。

コマンドを毎回叩くのが大変なので、シェルのprofileかrcファイルに追加しておくと良いかもしれません。

gitの認証については下記のドキュメントも参考です。
https://code.visualstudio.com/remote/advancedcontainers/sharing-git-credentials

おわりに

後は.devcontainer配下の設定ファイルをgit管理に追加してリポジトリにプッシュすれば、他の人がその設定ファイルから同じようにDevContainerを立ち上げて環境構築が可能になります。
開発言語自体をローカルに入れる必要もないですし、利用する拡張機能やその設定まで含めて一発で作成できます。

いかがでしょう、VSCodeとDockerさえ利用できれば環境構築の手間が随分と楽になるかと思います。私自身もすごく便利に感じているので、これからも有効活用していこうと思います。

#プログラミング

AUTHOR