Coffee Break Point

codespacesでastroを使うときは開発環境の立ち上げに—hostをつけよう

開発環境とツール活用
codespacesでastroを使うときは開発環境の立ち上げに—hostをつけよう

はじめに

Codespaces愛用しています、しゃばです。

ポートフォリオをいよいよ作りたく、どうせなら最近話題のastro+svelteを触ってみたいと思っています。

ただのastro導入段階で少し躓いたのでメモ。

何がおきたか

npm run devでastroを起動したかったのですが、いつまで立ってもcodespacesさんがポートフォワードしてくれず。
自分でポートを開いてもつないでくれない状態でした。

どうしたか

npm run dev実行時にもメッセージが出ていましたが、デフォルトだと次のようなメッセージが出ます

$ npm run dev

> [email protected] dev
> astro dev

  🚀  astro  v2.0.10 started in 64ms
  
  ┃ Local    http://localhost:3000/
  ┃ Network  use --host to expose

なるほど外部からのアクセスなので—hostをつけて実行してやる必要がありそうです。

$ npm run dev -- --host

> [email protected] dev
> astro dev --host

  🚀  astro  v2.0.10 started in 37ms
  
  ┃ Local    http://localhost:3000/
  ┃ Network  http://172.16.5.4:3000/
  
11:51:59 PM [content] Watching src/content/ for changes
11:52:00 PM [astro] update /.astro/types.d.ts
11:52:00 PM [content] Types generated

↓

Image

でました、やったね。

💡
—host は、npm run dev実行で呼ばれるastro devにつけてあげる必要があります。npm run dev —host だとnpm run devコマンドに対してオプションが付くことになるので、ダッシュ2つ—-をつけることで、以降のオプションをnpm run devの実行先のコマンドへ渡すことが出来ます。

追加で

毎回— —hostをつけるのは面倒なので、packages.jsonを書き換えます。

{
	"name": "portfolio",
	"type": "module",
	"version": "0.0.1",
	"scripts": {
		"dev": "astro dev --host", // ←ここ
		"start": "astro dev --host", // ←ここ
		"build": "astro build",
		"preview": "astro preview",
		"astro": "astro"
	},
	"dependencies": {
		"astro": "^2.0.10"
	}
}