この記事のゴール・前提条件
- ブログのUIを作成するためのフレームワーク（Astro）の開発環境を構築し、localhostでプロジェクトを起動できること
- だいぶ今更感はあるが
- Headless CMSおよびAstroに関する説明は割愛する
実行環境
OS
~ $ sw_vers
ProductName: macOS
ProductVersion: 15.0.1
BuildVersion: 24A348
git
~ $ git -v
git version 2.39.5 (Apple Git-154)
docker
~ $ docker -v
Docker version 27.3.1, build ce1223035a
とりあえず環境構築
Node.jsのインストール
公式サイトやパッケージ管理ソフト（Homebrewなど）からインストール
（※筆者は後述するDockerfileを経由したためこちらでの説明は割愛）
Node.jsのバージョンはv18.17.1かv20.3.0以上であること（v19はサポート対象外）
新規プロジェクト作成
ターミナルやコマンドプロンプトから以下コマンドを実行
npm create astro@latest
実行後、以下について聞かれるのでyまたはn（もしくはCUI上の選択肢）から回答
- プロジェクトを作成するディレクトリ（ここだけ任意値）
- 新規プロジェクト作成時にテーマを使用するか
- TypeScriptを使用するか
- 依存関係をインストールするか
- gitリポジトリとして管理するか（=
git init）
プロジェクト起動
上記1で指定したディレクトリへ移動し、以下コマンドを実行
npm run dev
http://localhost:4321/にアクセスし、以下のような表示になれば起動OK！
（※使用したテンプレートやnpm create実行時のバージョンによって変動あり）
ここまでで環境構築は完了！お疲れ様でした。
ローカルを汚したくないあなたへ
DockerfileとDocker-compose.ymlの作成
以下コマンドを実行
touch Dockerfile docker-compose.yml
-
Dockerfile
FROM node:lts-bullseye-slim WORKDIR /app # COPY {npm create時に指定したdir_name}/ /app // コンテナ外で資産管理する場合 EXPOSE 3000 -
docker-compose.yml
services: {service_name}: build: context: . dockerfile: Dockerfile container_name: {container_name} ports: - "3000:3000" volumes: - .:/app stdin_open: true environment: - NODE_ENV=development
コンテナ起動〜コンテナ内に入る
// コンテナ起動
docker-compose up -d
// コンテナ内に入る
docker exec -it {container_name} /bin/bash
※この後の作業は新規プロジェクト作成から実施
注意点
Dockerコンテナを立てて構築する場合は、npm run dev実行時以下のようにオプションをつけること
（特にポートはEXPOSEしたものを指定しないとアクセスできないので注意）
※公式だとポート番号4321を指定するように記載されているがなぜか起動できなかった。
npm run dev -- --host --port 3000
gitで履歴管理をしたいあなたへ
リポジトリ作成
githubなどであらかじめリポジトリを作成しておく
リモートリポジトリにプッシュまで
以下コマンドを実行
※次回以降はDockerfileのCOPYコマンドを有効にすることで最新資産を持ってくるようにする
※docker-compose.ymlのvolumesを指定しているのでコンテナ内外で同期が取れるようになっているので、Gitの操作はコンテナ外からでも実行可。（ただこの辺りの運用は人によりけり）
git add .
git commit -m "commit comment"
git push (origin {branch_name}