Astroの検証をDockerコンテナで行う

Astroのローカル開発環境をローカルのnodeからDockerコンテナ上のnodeに変更しました。Astroブログのテーマと記事を別リポジトリで管理するの記事で記述した通り、テーマと記事のリポジトリを分けて管理するようにした結果、通常通りの開発環境起動コマンドnpm run devが実行できなくなってしまったためです。

Dockerの設定

正直、Dockerの設定ファイルの書き方をあまり覚えてないのでChatGPTにファイル作成をお願いしました。すると以下のDockerfileとdockercompose.yamlを作ってくれました。

• Dockerfile

FROM node:14
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD [ "npm", "start" ]

• docker-compose.yaml

version: '3'
services:
  app:
    build: .
    ports:
      - "3000:3000"
    volumes:
      - .:/usr/src/app
      - /usr/src/app/node_modules

ただ、間違っている部分や個人的な要件を追加して、以下のように修正しました。

• Dockerfile
  • nodeのバージョンを変更
  • 起動コマンドが間違っているので修正
  • コンテナ外からのリクエストも受け付けるように起動コマンドを修正

-FROM node:14
+FROM node:18
 WORKDIR /usr/src/app
 COPY package*.json ./
 RUN npm install
 COPY . .
 EXPOSE 3000
-CMD [ "npm", "start" ]
+CMD [ "npm", "run", "dev", "--", "--host", "0.0.0.0"]

• docker-compose.yaml
  • コンテナ名を指定
  • ブログ記事用のディレクトリをマウント

 version: 3
 services:
   app:
+    container_name: astro-udon-blog
     build: .
     ports:
       - "3000:3000"
     volumes:
       - .:/usr/src/app
       - /usr/src/app/node_modules
+      - ../articles/blog:/usr/src/app/src/content/blog

コンテナの起動

これで検証環境がDockerコンテナ上で動き出します。

# docker-compose up

通常通り http://localhost:3000/ にアクセスすれば、検証環境のサイトを見られます。