Azure Static Web Appsのdevcontainerの作り方

最近 VSCode Remote Container (devcontainer) にハマりにハマっています。
普段使用している開発環境を devcontainer にできないか色々試しています。

code.visualstudio.com

Azure Static Web Apps の devcontainer の作り方を整理したので残しておきます。
なお、今回の Azure Static Web Apps の構成は下記の通りです。

• フロントエンド : HTML, CSS, JavaScript
• バックエンド : C# (.NET 6)
• CLI : Azure Static Web Apps CLI (Node.js)

github.com

こういった構成でも .devcontainer をイチから作る必要はなく、下記の手順で VSCode を使って準備をします。

1. アプリケーションを VSCode で開く
2. コマンドパレットを開く
3. Remote-Containers: Add Development Container Configuration Files...
4. Show All Definitions...
5. Azure Static Web Apps
6. Reopen in Container

この手順を行うことで devcontainer に必要なファイルが作成され、コンテナー環境を開くことができます。

• .devcontainer/devcontainer.json
• .devcontainer/Dockerfile
• .devcontainer/library-scripts/node-debian.sh

このときの devcontainer 構成については GitHub で詳細を確認することができます。

github.com

また、Azure Static Web Apps の開発では CLI を使う場合がほとんどですが、devcontainer でも問題なく使用できます。

vscode ➜ /workspaces/azure-static-webapps-samples (devcontainer ✗) $ swa -v
1.0.2

---

（追記 2022/09/18）

上記手順で作成される .devcontainer/library-scripts/node-debian.sh が、どこで管理されているんだろうかと調べたら、devcontainerを構成しているリポジトリに含まれていました。

vscode-dev-containers/node-debian.sh at main · microsoft/vscode-dev-containers · GitHub