UbuntuにAstroのバージョン5.1.6をインストールして触っているので、その時の情報をまとめました。
Astroとは？
Astroは近年注目を集めている新しいタイプのWebフレームワークで、静的サイト生成 (SSG) をベースとしているため、ページの読み込み速度が非常に速く、動的な処理を行わないのでセキュリティ的にも優れています。
また、 React、Vue.js、Svelteといった人気のJavaScriptフレームワークと組み合わせて使うことができます。
私はどれも使ったことがなくて名前だけ知っているという程度ですが、なんか面白そうだったのでこれから勉強していきたいと思ってAstroを触り始めてみました。
「Node.js」「npm」インストール
Astroをインストールするために必要な「Node.js」と「npm」のインストール行います。
Node.jsは「apt」を使ってもインストールできるのですが、「apt」でインストールされる「Node.js」はバージョンが少し古いので、「Node.js」「npm」「yarn」等のバージョン管理を行ってくれる「Volta」を使ってインストール行うことにしました。
Voltaインストール
まずは、Voltaをインストールします。
$ cd $ curl https://get.volta.sh | bash
「Volta」をインストールした後は、一度ログアウトして再度ログインするか「bash」を実行してインストールした「Volta」の情報を反映させます。
その後に「volta -v」を実行して正常にインストールされているか確認をします。
$ bash $ volta -v 2.0.2
「Volta」についての説明は下記のページでも行っていますので、興味があれば参照してみてください。
Voltaを使って「Node.js」「npm」をインストール
「Volta」を使って「Node.js」と「npm」をインストールします。
$ volta install node success: installed and set node@22.13.0 (with npm@10.9.2) as default
これで「Node.js」と「npm」がインストールされました。
$ node -v v22.13.0 $ npm -v 10.9.2
Astro インストール
下記のコマンドを実行してAstroのインストールを行います。
$ npm create astro@latest
コマンドを実行すると途中で以下の質問があるので、答えながらインストールを行っていきます。
dir Where should we create your new project?
（Astroをインストールしたいディレクトリを指定
指定したディレクトリが作成されてそこにインストールされる）
tmpl How would you like to start your new project?
（準備されているテンプレートを使用するか？）
● A basic, minimal starter (recommended) 今回はテンプレートを使わないを選択
○ Use blog template
○ Use docs (Starlight) template
deps Install dependencies? (recommended)
（依存関係をインストールするか？）
● Yes ○ No Yesを選択
git Initialize a new git repository? (optional)
（新しいgitのリポジトリを初期化するか？）
○ Yes ● No 今回はGitHubを使用しないのでNoを選択
「Astro」を初めて触るため、素の状態で始めてみたかったのでテンプレートは使用せず、GitHubとの連携もとりあえず行わないシンプル構成でインストール行うことにします。
「Astro」をインストールするディレクトリ名は「vpslife_astro」としました。
下記は、実際にインストールした際のログになります。
$ npm create astro@latest
> astro@1.0.0 npx
> create-astro
astro Launch sequence initiated.
dir Where should we create your new project?
./vpslife_astro
tmpl How would you like to start your new project?
A basic, minimal starter
deps Install dependencies?
Yes
git Initialize a new git repository?
No
◼ Sounds good! You can always run git init manually.
✔ Project initialized!
■ Template copied
■ Dependencies installed
next Liftoff confirmed. Explore your project!
Enter your project directory using cd ./vpslife_astro
Run npm run dev to start the dev server. CTRL+C to stop.
Add frameworks like react or tailwind using astro add.
Stuck? Join us at https://astro.build/chat
╭─────╮ Houston:
│ ◠ ◡ ◠ Good luck out there, astronaut! 🚀
╰─────╯
Astro開発サーバの起動
まずは、astroをインストールしたディレクトリに移動します。
$ cd vpslife_astro/
「npm run dev」コマンドを実行すると、Astroの開発サーバが起動します。
$ npm run dev > vpslife-astro@0.0.1 dev > astro dev 14:35:49 [types] Generated 1ms 14:35:49 [content] Syncing content 14:35:49 [content] Synced content astro v5.1.6 ready in 177 ms ┃ Local http://localhost:4321/ ┃ Network use --host to expose 14:35:49 watching for file changes...
メッセージにあるとおりブラウザで下記URLにアクセスしてみてください。
http://localhost:4321/
Astroの画面が表示されるはずです。
Astroをローカルホスト以外にインストールしている場合は、localhostではなくインストールを行ったサーバのホスト名やIPアドレスを入力してください。
また、開発サーバが使用しているポート番号にアクセスできるようにファイアウォールの設定変更必要になります。
4321番ポートがすでに使用されている場合は、astroが使用可能なポート番号を探して使用してくれます。
Astro開発サーバを終了させたい場合
「Ctrl」+「c」を入力することで開発サーバを終了させることができます。
SSHのポートフォワーディングで動作確認
今回はConoHaのVPSに「Astro」をインストールしています。
「Astro」を触るのが初めてで、セキュリティ関連についての知識もまだな無いため、ファイアウォールで4321番ポートの通信許可設定を行わず、SSHのポートフォワーディング機能を使って、localhostの43210番ポートに接続すると、VPSの4321番ポートにポートフォワーディングするようにしてみます。
$ ssh -L 43210:localhost:4321 ユーザ名@VPSサーバ
※SSHの接続ポートを変更している場合や、鍵認証方式の場合は別途オプションが必要になります。
これで、外部からAstroへの接続はできませんが、SSH接続を行っているクライアントからのみ、下記のURLにWebブラウザで接続することで動作検証を行うことができるようになります。
http://localhost:43210
SSHの接続設定について
クライアントがLinuxやMacで「~/.ssh/config」にSSH接続用の設定を記述できる場合、SSHで接続するための情報を記述しておくことで、長いSSH接続コマンドを入力することなく簡単にSSH接続を行えるようになります。
「~/.ssh/config」についての説明は下記のページで行っていますので参考にしてみてください。
設定例
「LocalForward 43210 localhost:4321」部分でポートフォワーディングの設定を行っています。
Host VPSサーバ名_astro
HostName VPSサーバIPアドレス
User ユーザ名
IdentityFile 秘密鍵
Port SSH接続ポート
LocalForward 43210 localhost:4321
TCPKeepAlive yes
ServerAliveInterval 60
IdentitiesOnly yes
これで、下記のようにコマンドを実行するだけでSSH接続を行い、ポートフォワードディングの設定も行ってくれます。
$ ssh VPSサーバ名_astro
コメント