Devcontainerで始めるAmplify環境構築

はじめに

最近、Amplify Gen2を利用する機会が増えてきました。本記事では、Next.jsにおけるAmplify Gen2の初期環境構築を、Devcontainerを活用して行う方法を備忘録も兼ねて纏めます。

使用するDevcontainer

今回はDevcontainerのみを用いて環境構築します。
Dockerfileやdockercompose.yamlは利用しません。

.devcontainer/devcontainer.json

{
  "name": "amplify-project",
  "image": "mcr.microsoft.com/vscode/devcontainers/typescript-node:18",
  "remoteUser": "node",
  "mounts": [
    {
      "source": "${localWorkspaceFolder}/../.aws",
      "target": "/home/node/.aws",
      "type": "bind"
    },
    {
      "source": "${localWorkspaceFolderBasename}-node_module",
      "target": "${containerWorkspaceFolder}/node_modules",
      "type": "volume"
    }
  ],
  "features": {
    "ghcr.io/devcontainers/features/aws-cli:1": {},
    "ghcr.io/devcontainers/features/git:1": {}
  },
  "customizations": {
    "vscode": {
      "extensions": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode"]
    }
  },
  "appPort": ["3000:3000"],
  "postCreateCommand": "sudo chown node node_modules",
  "forwardPorts": [3000],
  "initializeCommand": "mkdir -p ${localWorkspaceFolder}/../.aws"
}

マウント設定

Devcontainerでコンテナのマウント設定を行います。

• .awsについては、プロジェクトでawsクリデンシャルの情報を以下の場所に配置したかったため、プロジェクトのルートディレクトリと同じ階層にバインドマウントしています
• node_modulesのボリュームマウントはディスクI/Oパフォーマンスの向上のために行います（参考）

"mounts": [
  {
    "source": "${localWorkspaceFolder}/../.aws",
    "target": "/home/node/.aws",
    "type": "bind"
  },
  {
    "source": "${localWorkspaceFolderBasename}-node_module",
    "target": "${containerWorkspaceFolder}/node_modules",
    "type": "volume"
  }
]

Amplify環境構築

Amplifyの初期環境構築は、公式の用意しているテンプレートをそのまま利用するのがおそらく一番手っ取り早いです。
ダウンロードしたテンプレートのプロジェクトに先ほどのdevcontainer.jsonを貼り付けます。

ディレクトリ構成

awsの設定ディレクトリも含めた今回のディレクトリ構成は以下のようになってます。

.
├── .aws
└── amplify-project
    ├── .devcontainer
    │   └── devcontainer.json
    ├── amplify
    ├── app
    ├── node_modules
    │ ...
    └── tsconfig.json

環境設定と起動手順

AWS プロファイルの設定

以下のコマンドでアクセスキーもしくはssoログインの設定を行います

# アクセスキー
aws configure --profile example-name
# ssoログイン
aws configure sso

以下の設定をdevcontainerに加えることで利用するprofileの初期値を設定できます

"containerEnv": {
    "AWS_DEFAULT_PROFILE": "example-name"
}

バックエンド（Amplify Sandbox）の起動

Amplifyのサンドボックスは以下のコマンドで立ち上げます（参考）
profileを利用する場合は--profileを利用します

npx ampx sandbox  --profile example-name

フロントエンド（Next.js）の起動

sandboxが立ち上がるとamplify_outputs.jsonが生成され、Next.jsを立ち上げることができます。

npm run dev

http://localhost:3000 を開いて以下のような画面が見えたら初期環境の構築は成功です！

まとめ

DevContainerとAmplifyテンプレートを活用することで、わずか5分程度で開発環境を構築できます。VSCode拡張機能は、プロジェクトに合わせて適宜カスタマイズしてください。