Astro開発環境を作ってみる
Ubuntu 20.04
remy_worldはじめに
Astroは「npm create astro@latest」で簡単に開発環境が構築できますが、node.jsのversionが 18.0以上が必須です。満たない場合はdocker環境で取り敢えず検討してみるか、node.jsのversion upをするしかありません。ここでは2通りに分けて評価してみました。
パソコン環境
- OS ：Ubuntu 20.04.6 ( 64 bit)
- node.js ： v18.17.1
- npm ：v10.2.5
node.jsのversionがv16.6.2(<18.0)の場合
更新前はv16.6.2でしたので、普通にやっても環境構築はできません。そこでdocker環境の力を借ります。
imageは下記サイトのものを利用しました。2024/07時点の最新版ではnode.js：v22.4.0でした。
docker-compose.yml
version: '3'
services:
myapp:
tty: true
image: docker.io/bitnami/node:latest
ports:
- 4321:4321
volumes:
- .:/app下記の通り、コンテナを作成・起動して、そのコンテナ内部に入ってからAstro環境を構築します。
# バックグランドで起動
$ sudo docker-compose up -d
# 起動したコンテナを探して、内部に入る
$ sudo docker ps
(※一部表記省略)
CONTAINER ID IMAGE PORTS NAMES
ce1df85e145d bitnami/node:latest 0.0.0.0:4321->4321/tcp, :::4321->4321/tcp astro_env_myapp_1
# --ここからはコンテナ内部での操作です。
$ sudo docker exec -it astro_env_myapp_1 bash
root@ce1df85e145d:/app# node -v
v22.4.0
root@ce1df85e145d:/app# npm -v
10.8.1
root@ce1df85e145d:/app# npm create astro@latest # ←astro開発プロジェクト作成
Need to install the following packages:
create-astro@4.8.0
Ok to proceed? (y)
# -- 各項目に答えていきます。最後に下記が表示されればOKです。--
╭─────╮ Houston:
│ ◠ ◡ ◠ Good luck out there, astronaut! 🚀
簡単なのですが、注意すべきことが一つだけあります。それはサーバー起動コマンドは通常の「npm run dev」では上手くいきません。
開発環境からアクセスできない
このように開発環境からアクセスできません。この場合の対処方法として、dockerでAstroを起動する場合は「npm run dev -- --host 0.0.0.0」としてください。
Astro 成功画面(docker環境)
node.jsのversionがv18.17.1(>18.0)の場合
自分の環境下でnode.jsのversionをv18.17.1にアップしました。この場合は自分の環境で簡単に構築できます。
npm create astro@latest を実行するだけです。
実行コマンド
$ npm create astro@latest
Need to install the following packages:
create-astro@4.8.4
Ok to proceed? (y)
astro Launch sequence initiated.
dir Where should we create your new project?
./sampleApp # ←プロジェクトフォルダ
tmpl How would you like to start your new project?
Include sample files
ts Do you plan to write TypeScript
No #←TypeScriptを使いたい場合はYes
◼ No worries! TypeScript is supported in Astro by default,
but you are free to continue writing JavaScript instead.
deps Install dependencies?
Yes
git Initialize a new git repository?
No # ←git管理する場合はYes
◼ 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 ./sampleApp
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! 🚀
╰─────╯
npm notice
npm notice New minor version of npm available! 10.2.5 -> 10.8.2
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.8.2
npm notice Run npm install -g npm@10.8.2 to update!
npm notice
サーバー起動も「npm run dev」だけで、開発環境から起動画面にアクセスできました。
以上です。
Follow me!
