https://engineers.fenrir-inc.com/entry/2025/08/25/152701

こんにちは。インフラ担当の森井康平です。 VSCode DevContainersを使用してCloudFormation用のローカル環境を整えてみたところ、割と使いやすかったので共有したいと思います。

VSCode DevContainersとは

VSCode DevContainersは、コンテナの中でVSCode Serverを実行できる機能です。
プロジェクトに必要なすべてのツールやライブラリなどを含んだ開発環境をコンテナとして定義し、このコンテナに接続してコード編集やデバッグなどの開発作業を行うことができます。

Developing inside a Container から引用

DevContainersの設定はDockerfileやdevcontainer.jsonなどのテキストファイルに書きます。そのため、必要な依存関係を含んだコンテナをGitを通して簡単に共有することができます。

CloudFormationのローカル環境としてDevContainersを使用するメリット

CloudFormationはJSONまたはYAMLでテンプレートを記述するため、シンプルなテキストエディタさえあればテンプレートを書くことは可能です。しかし、テンプレートを書くのに便利な拡張機能やツールを活用するとより便利にすることができます。その際、チームメンバーがそれぞれで設定をすると時間がかかってしまいますし、設定の差異が発生してしまう可能性が高まります。そのため、DevContainersを利用し、コンテナとして設定内容を共有できるようにしておくと便利です。

それでは、DevContainersの設定方法を紹介します。

初期設定方法

前提とする環境

下記のソフトウェアは事前にインストールしてください。コンテナ管理ツールはDockerでもそのまま動くと思います。動作確認した端末はMacです。

Visual Studio Code
Podman
AWS CLI

最終的には以下のようなディレクトリ構造を作成していきます。後続の手順に沿ってディレクトリやファイルを作成してください。

$ tree .
.
├── .devcontainer
│   ├── Containerfile
│   └── devcontainer.json
└── .gitignore

手順

まずは専用のディレクトリを作成し、移動します。

$ mkdir devcontainer-sample && cd devcontainer-sample

$ git init

.devcontainer/Containerfile

コンテナイメージの定義ファイルです。下記の内容でファイルを作成してください。

FROM mcr.microsoft.com/devcontainers/base:noble

USER vscode
WORKDIR /workspaces/devcontainer-sample

ARG USERNAME=vscode
ARG WORKDIR=/workspaces/devcontainer-sample

# .bash_historyの永続化
# See: https://code.visualstudio.com/remote/advancedcontainers/persist-bash-history
RUN SNIPPET="export PROMPT_COMMAND='history -a' && export HISTFILE=$WORKDIR/.bash_history" \
    && touch .bash_history \
    && echo "$SNIPPET" >> "/home/$USERNAME/.bashrc"

# Rain v1.20.2をインストール
RUN curl -L https://github.com/aws-cloudformation/rain/releases/download/v1.20.2/rain-v1.20.2_linux-arm64.zip -o /tmp/rain.zip && unzip /tmp/rain.zip -d /tmp && sudo mv /tmp/rain-v1.20.2_linux-arm64/rain /usr/local/bin/rain

# cfn-nagをインストール
RUN sudo apt update
RUN sudo apt install -y ruby-full ruby-rubygems
RUN sudo gem install cfn-nag

# cfn-lintをインストール
RUN sudo apt install -y python3-full pipx
RUN pipx install cfn-lint

.devcontainer/devcontainer.json

DevContainersの設定ファイルです。下記の内容でファイルを作成してください。

{
    "name": "Ubuntu",
    "build": {
        "dockerfile": "Containerfile"
    },
    "features": {
        "ghcr.io/devcontainers/features/aws-cli:1": {}
    },
    "containerUser": "vscode",
    // AWS CLIの設定ファイルをマウント
    "mounts": [
        "source=${localEnv:HOME}${localEnv:USERPROFILE}/.aws/,target=/home/vscode/.aws/,type=bind,consistency=cached"
    ],
    "customizations": {
        "vscode": {
            // インストールする拡張機能のリスト
            "extensions": [
                "kddejong.vscode-cfn-lint",
                "eastman.vscode-cfn-nag",
                "khmoryz.vscode-rain"
            ]
        }
    }
}

.gitignore

コマンド履歴の永続化用ファイルをGitから無視します。下記の内容でファイルを作成してください。

.bash_history

Podmanの設定

※ Dockerをお使いの場合は、この手順をおこなう必要はありません。

Alternate ways to install Docker を参考にDockerのパスをPodmanに変更してください。その際、Docker Composeのパスもpodman composeにしておいた方が良いかもしれません。

これでDevContainerの設定は完了です。ここでGitコミットしてプッシュしておきましょう。

使い方

別の人が初期設定した場合は、まずソースーコードをプルしてください。

Dev Containers - Visual Studio Marketplaceをインストールし、コマンドパレットからDev Containers: Open Folder in Containerを選択して作業中のディレクトリを開いてください。コンテナイメージのビルドが始まり、完了するとコンテナ環境が立ち上がります。

ダウンロードしたCLIツールが利用可能な状態になっていることを確認しましょう。

vscode ➜ /workspaces/devcontainer-sample (main) $ aws --version
aws-cli/2.27.26 Python/3.13.3 Linux/6.8.11-300.fc40.aarch64 exe/aarch64.ubuntu.24
vscode ➜ /workspaces/devcontainer-sample (main) $ rain --version
Rain v1.20.2 linux/arm64

問題のあるテンプレートを追加して、確認してみます。

Description: S3 Sample
Resources:
  SampleBucket:
    Type: AWS::S3::Bucket
    Properties:
      BucketName: InvalidBucketName

cfn-nagとcfn-lintが問題を報告してくれています。

期待通りに動作していることが確認できたので、あとは同様にCloudFormationテンプレートのファイルを追加して、AWSリソースの構築を進めていくことができます。

コンテナにインストールしたツールの紹介

今回、私がおすすめのツールをDevContainersに詰め込みました。インストールした各ツールについて紹介しようと思います。

AWS CLI

言わずと知れたAWS CLIです。ローカル環境にインストール済みの方が多いかも知れません。

docs.aws.amazon.com

rain

AWS公式のCloudFormation操作用のCLIです。

aws-cloudformation.github.io

rain deploy コマンドを使用すると、マネジメントコンソールにアクセスせずにデプロイが実行できます。イベントログを見やすく表示してくれたりとかなり操作感が良いのでおすすめです。

あわせて、vscode-rainもインストールしています。 marketplace.visualstudio.com

これはrainをVSCode上でもっと扱いやすくするために私が開発した拡張機能です。 VSCodeのコマンドパレットからCloudFormationテンプレートをデプロイできるようになるので、コマンド入力を楽にできます。

cfn-lint

cfn-lintはCloudFormationのテンプレートを作るのには必須のツールです。リソースプロパティについて静的なチェックをしてくれるので、実際にデプロイしなくても間違いに気が付くことができます。

marketplace.visualstudio.com

cfn-nag

cfn-nagはセキュアでないCloudFormationテンプレートの記述を検出してくれるツールです。

marketplace.visualstudio.com

まとめ

今回は基本的なツールを導入するのみに留めましたが、コミットフックを使ってフォーマットの検証をするなどの発展的な使い方も可能です。 DevContainersの設定は最初は手間ですが、一度設定すると便利です。ぜひ、みなさんの開発スタイルに合わせて育てていってください。