Astro用のDevContainerを構築する

Astro

Astro builds fast content sites, powerful web applications, dynamic server APIs, and everything in-between.

astro.build

静的サイトジェネレーターであるAstroをVSCodeのDevContainerを構築しようというお話。

私は記事の執筆をLinux(WSL2上)とmacOSで行っていますが、
御存知の通りmacOSはarmなので私の使っているudonという拡張機能がそのままでは動作しません。

とってもダルいですから、構築しました。

Dockerfile

テンプレートを持ってきました。テンプレートは↓

bun-devcontainers/src/basic-bun at main · marcosgomesneto/bun-devcontainers

Bun Runtime Template for DevContainers & Docker. Bun Dev Container with PostgreSQL, MariaDB or Clean Project! - marcosgomesneto/bun-devcontainers

github.com

FROM oven/bun:debian

# Config Bun
ENV PATH="~/.bun/bin:${PATH}"
RUN ln -s /usr/local/bin/bun /usr/local/bin/node

# Update packages
RUN if [ "debian" == "alpine" ] ; then apk update ; else apt-get update ; fi

# Install Git
RUN if [ "debian" == "alpine" ] ; then apk add git ; else apt-get install -y git ; fi

テンプレートのままです。作業するユーザーは変えても良かったかも知れないけど。面倒なので。

devcontainer.json

これもデフォルトのままという感じです。一部の設定を変更してはいますが。

{
  "name": "Bun",
  "dockerFile": "Dockerfile",
  "customizations": {
    "vscode": {
      "extensions": [
        "oven.bun-vscode",
        "astro-build.astro-vscode",
        "nodamushi.udon",
        "unifiedjs.vscode-mdx",
        "bradlc.vscode-tailwindcss"
      ],
      "settings": {
        "udon.rule": [
          [
            "*.md",
            "![](${relImage:${fileDirname}})"
          ],
          [
            "*.mdx",
            "![](${relImage:${fileDirname}})"
          ],
          [
            "*.textile",
            "!${relImage:${fileDirname}}!"
          ],
          [
            "*.adoc",
            "image::${relImage:${fileDirname}}[]"
          ],
          [
            "*.html",
            "<img src=\"${relImage:${fileDirname}}\">"
          ],
          [
            "*.cpp",
            "@image html ${relImage:${workspaceFolder}}"
          ],
          [
            "*.hpp",
            "@image html ${relImage:${workspaceFolder}}"
          ],
          [
            "*.ipynb",
            "![](${relImage:${fileDirname}})"
          ],
          [
            "*",
            "${relImage:${workspaceFolder}}"
          ]
        ]
      }
    }
  },
  "features": {
    "ghcr.io/devcontainers/features/git:1": {}
  },
  "postCreateCommand": "bun install",
  "forwardPorts": [4321]
}

マストで入れておきたい拡張機能と、udonの設定を書き、作成後に実行するコマンドも定義、ポートも追記って感じ。

以上

ここまで書けたらあとはDevContainerで開くだけでOKです。

ちなみに私はDockerというかコンテナが苦手です(泣)