Astro。2022年に生まれたフロントエンドフレームワークです。
もう名前がかっこいいですよね。とにかく速い動作が特徴で、公式が"Astroを使えば、遅いウェブサイトを作るのはほぼ不可能になる"と宣言しているほどです。素敵。
さて、公式の開発環境準備のドキュメントの手順通りにAstroを組み込んだプロジェクトを作成していくわけですが、プロジェクトの作成時、そしてプロジェクト実行時にそれぞれエラーが発生しました。
エラー発生した状況とその対応策をご紹介しますので、皆さんの助けになれば幸いです。
公式ドキュメント：https://docs.astro.build/ja/tutorial/1-setup/1/
エラーその１：依存関係のインストールに失敗
指定されたバージョン以上のNode.jsをインストールした後、任意のフォルダでcreate astroのコマンドを実行しますが、その際に依存関係のインストールに失敗というエラーが発生しました。
C:\Users\astro練習>npm create astro@latest
> npx
> create-astro
astro Launch sequence initiated.
dir Where should we create your new project?
./super-singularity
tmpl How would you like to start your new project?
A basic, minimal starter
deps Install dependencies?
Yes
git Initialize a new git repository?
Yes
▲ error Error
▲ error Dependencies failed to install, please run npm install to install them manually after setup.
✔ Project initialized!
■ Template copied
■ Dependencies installed
■ Git initialized
next Liftoff confirmed. Explore your project!
Enter your project directory using cd ./super-singularity
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
このエラーの原因ですが、 プロジェクトを作成するフォルダのパスに日本語が入っていること でした。
今回の場合だと、astro練習の名前をアルファベットのみに変更すれば、問題なくプロジェクトが作成できました。
エラーその２：astroのコマンドが認識されない
astroのプロジェクトが作成できたら、とりあえず実行してローカルサーバーを起動してみると思います。その際astroというコマンドが認識されない事象に遭遇しました。
C:\Users\astroPractice\solar-singularity> npm run dev
> solar-singularity@0.0.1 dev
> astro dev
'astro' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。
node_modulesの中を見るとあら不思議、astro関連のフォルダが全然入っていませんでした。
この場合の対処ですが、astroをグローバルにインストールしてから「npm create astro@latest」でプロジェクト作成すると、自動的にastroの依存関係もインストールしてくれます。
↓astroのグローバルインストール
npm install -g astro
astroのグローバルインストール後に作成したプロジェクトで再度「npm run dev」で実行すると、ローカルでサーバーが立ち上がり、画面が表示されました。
beautiful
後はreactやVueみたいに開発していくだけですね。
皆様が良いastroライフを送れますように。