【Ubuntu】Podmanを使ってAstroの開発環境を構築する方法

AstroをPodmanを使ってインストールする手順です。

Node.jsのイメージを使用したコンテナを立ち上げ、ホスト（Ubuntu側）のディレクトリにAstroをインストールします。

その後、インストールされたディレクトリをコンテナにマウント（直結）して、Astroの開発サーバーとして動作させるという仕組みです。

ホスト環境を汚さずにAstroを試せる、非常におすすめの構成です！

PodmanとComposeのインストール
Astroインストール
1. Astro用ディレクトリ作成
2. Astroのインストール（使い捨てコンテナを使用）
Astroの起動
環境を全削除して最初からやり直したい場合

PodmanとComposeのインストール

aptを使ってPodman本体と、複数の設定を管理しやすくする podman-compose をインストールします。

$ sudo apt update
$ sudo apt install podman podman-compose

Astroインストール

Astro用ディレクトリ作成

Astroをインストールするための空ディレクトリを作成します。

今回は「~/project/astro-dev」とします。

$ mkdir -p ~/project/astro-dev
$ cd ~/project/astro-dev

Astroのインストール（使い捨てコンテナを使用）

Astroをインストールする際、対話式のウィザードへの回答が必要になります。

そのため、このインストール作業の時だけ起動する「一時的な使い捨てコンテナ」を使って構築を行います。

$ podman run --rm -it -v "$PWD":/app -w /app node:22 npm create astro@latest

コマンドを実行すると、Astroのインストールウィザードが始まります。

最初の dir（インストール先ディレクトリ）の設定項目では、必ず「./」を指定してください。

これで、Astroのデータがホスト側の「~/project/astro-dev」ディレクトリにインストールされます。

コマンドの詳細解説

先ほどの長いコマンドの役割は以下の通りです。

podman run コンテナを起動する
--rm コンテナを終了したあとにコンテナを削除する
-it -iと-tオプションを指定

-i 標準出力（キーボード入力）をコンテナにつなげる
-t コンテナ内に仮想のターミナルを割り当てる
※Astroの対話型インストールウィザードの質問に対し、キーボードから回答を入力できるようにするために必須のオプションです。

-v "$PWD":/app 現在のディレクトリ（"$PWD"）を、コンテナ内の「/app」にマウントする
-w /app コンテナ内の作業ディレクトリを「/app」に設定する
node:22 Node.jsのバージョン22がセットアップされたコンテナイメージを使用する
npm create astro@latest astroをインストールするためのコマンド

疑問：appディレクトリは作成されないの？

ホスト側（Ubuntu）に app というディレクトリは作成されません。

「-w /app」を指定したことで、コンテナの中では「/app」に移動してからインストールコマンド(npm create astro@latest)が実行されます。

そして、インストール先に「./」（現在のディレクトリ）を指定しました。

「-v "$PWD":/app」の設定により、ホスト側のディレクトリ（~/project/astro-dev）がコンテナ内の「/app」にマウントされているので、コンテナ内でインストールされたAstroのデータが、ホスト側の「~/project/astro-dev」に、Astroのファイルが直接現れる仕組みになっています。

疑問：マウント先の名前が「app」の理由は？

DockerやPodmanなどのコンテナの世界では、自分で開発するアプリケーションのコードを格納する場所として、以下のディレクトリ名が標準的に使用されます。

/app
/usr/src/app
/workspace

コンテナの中にも「/etc」「/bin」といったLinuxのファイルシステムが存在するため、それらと混ざってシステムを破壊しないように、専用のディレクトリを用意してマウントしています。

Astroの起動

compose.yamlの作成

毎回長い podman run コマンドを実行するのは大変なので、podman-compose up -d という短いコマンドで起動できるように、設定ファイル「compose.yaml」を「~/project/astro-dev」に作成します。

$ cd ~/project/astro-dev
$ vi compose.yaml

設定内容は以下のとおりです。

services:
  astro-dev:
    image: node:22
    container_name: astro-dev
    working_dir: /app
    volumes:
      # ホストのカレントディレクトリをコンテナ内の /app に同期
      - .:/app
    ports:
      # ホストの4321ポートとコンテナの4321ポートを接続
      - "4321:4321"
    # Astro開発環境用起動コマンド
    command: npm run dev -- --host
    # コンテナをバックグラウンドで動かし続けるための設定
    tty: true

開発用コマンド:npm run dev -- --host

このコマンドを実行すると、Node.jsが「開発用サーバー」として働き続けます。

ファイルを保存するたびに変更を検知し、ブラウザの画面を自動更新（ホットリロード）してくれる非常に便利な機能です。

ただし、アクセスがあるたびに裏でプログラムが動いてページを組み立てるため、そのままインターネットに公開するには、表示速度やセキュリティの面で適していません。

そのため、サイトのデザインを作ったり、記事を執筆したりするための「開発用」のコマンドとして使用してください。

※本番環境として公開する際は、Nginx等のWebサーバーと組み合わせる別の手順が必要になります。

コンテナの起動

podman-composeを利用してコンテナを起動します（-d はバックグラウンド実行のオプションです）。

$ podman-compose up -d

動作確認

Webブラウザで「http://localhost:4321」にアクセスし、Astroの画面が表示されていることを確認してください。

ローカルホスト以外にインストールしている場合

VPSなどのリモートサーバー上で起動している場合、外部から4321ポートへのアクセスはファイアウォールでブロックされているはずです。

その場合は、SSHのポートフォワーディング機能を使用して接続確認を行ってください。

ssh -L 43210:localhost:4321 ユーザー名@VPSサーバ

これで、localhostの4321番ポートへのアクセスは、VPSサーバの4321番ポートへ転送されます。

詳しくはこちらを参照してください。

UbuntuにAstroをインストール

UbuntuにAstroのバージョン5.1.6をインストールして触っているので、その時の情報をまとめました。Astroとは？Astroは近年注目を集めている新しいタイプのWebフレームワークで、静的サイト生成 (SSG) をベースとしている...

コンテナの停止と削除

作業を終えてコンテナを停止させる場合は、以下のコマンドを実行します。

$ podman-compose down

このコマンドを実行するとコンテナは停止し削除されますが、ホスト側に保存されたAstroのデータ（ソースコードなど）は消えませんのでご安心ください。

環境を全削除して最初からやり直したい場合

「設定を間違えたので最初からやり直したい！」という場合の手順です。

ホスト環境を汚さないコンテナならではの身軽さですね。

コンテナの停止と削除

まずは起動中のコンテナを以下のコマンドで停止・削除します。

$ podman-compose down

エラー等でコンテナが残ってしまった場合

もし上記コマンドでうまく消えず、手動で削除したい場合は「podman ps -a」でコンテナIDを確認します。

podman ps -a | grep サービス名

今回の場合は「compose.yaml」の「services:」項目でサービス名を「astro-dev」と設定しています。

services:
  astro-dev:
  以下省略

そのため、以下のコマンドでコンテナを検索することができます。

$ podman ps -a | grep astro-dev
26a6073ce9b8  docker.io/library/node:22     npm run dev -- --...  5 hours ago  Exited (1) 4 hours ago   0.0.0.0:4321->4321/tcp  astro-dev

出力された結果の一番左側（上記の例では 26a6073ce9b8）にコンテナIDが表示されるので、それを指定して対象のコンテナを削除します。

podman rm コンテナID

今回の場合は、以下のように指定することで削除することが出来ます。

$ podman rm 26a6073ce9b8

コンテナイメージの削除（任意）

ダウンロードした「node:22」のイメージも削除したい場合は以下のコマンドを実行してください。

$ podman rmi node:22

※このイメージを他のコンテナが使用している場合は削除することが出来ません。

Astroデータの削除

最後にAstroのデータがインストールされている「~/project/astro-dev」ディレクトリをまるごと削除します。

一度削除するともとに戻すことができません！

削除対象のディレクトリに間違いないかを十分に確認してください。

「間違えることなんて無い！」と油断するとやらかします。（思い込みや、タイプミスなどで私は何度もやらかしました…）

$ cd ~/project/
$ rm -rf astro-dev