Dockerコンテナ内でAstroの開発をする

ローカルにNode.jsやAstroをインストールすることなくコンテナ内で開発したいと思いました。

注意ですが、Astroで作ったウェブサイトをコンテナで動かす方法ではなくて、コンテナの中でAstroの開発をする方法です。

前提条件

この記事は以下の環境で執筆しています。

• Windows 11 Home
• Docker Desktop
• Node.jsはローカルに入っていません

Dockerコンテナ作成

Dockerfileとdocker-compose.ymlはそれぞれ以下の通りです。動かすための最低限の設定をしています。

FROM node:22
WORKDIR /usr/src
EXPOSE 4321

version: '3.8'

services:
  hoge:
    container_name: hoge
    build:
      context: .
      dockerfile: ./docker/Dockerfile
    volumes:
      - .:/usr/src
    tty: true
    ports:
      - 4321:4321

Astroはnpm run devで起動したときに4321ポートを使用するので、4321ポートを使う設定のみ行っています。

作成できたらDockerコンテナを起動して中に入ります。

docker-compose up -d
docker exec -it CONTAINER_ID //bin/bash

ちなみにdocker psしたときには以下のようにポートの対応付けがされています。

Astroのインストール

基本的には公式ドキュメントに沿ってコマンドを一つ実行するだけです。今回はブログテンプレートを使用しました。

https://docs.astro.build/en/install-and-setup/#use-a-theme-or-starter-template

npm create astro@latest -- --template blog

どこにプロジェクトを作成するか、TypeScriptを使うか、など聞かれるので答えていきます。

しばらくするとプロジェクトが作成されます。

起動とローカルからの接続

ローカルマシンであれば、npm run devで起動すればhttp://localhost:4321をブラウザで開けばデフォルトの画面が表示されます。ローカルマシンからコンテナ内で起動しているAstroに接続するには一つだけ設定が必要になります。

package.jsonのdevスクリプトを以下のように変更します。

  "scripts": {
    "dev": "astro dev --host",

この状態でnpm run devで起動すれば、ローカルマシンのブラウザからhttp://localhost:4321でページを開くことができます。

npm run devしたときのターミナルのNetworkにこのようなURLが入っていれば大丈夫です。

無事にローカルマシンのブラウザからアクセスすることができました。（少しカスタマイズした後にこの記事を書いているのでデフォルトの画面とは異なります）

これでローカルの環境に影響を与えずに開発を行うことができます。

補足：ホットリロードはできません。やる方法はあるみたいなので、知りたい方は調べてみてください。