はじめに
Codespaces愛用しています、しゃばです。
ポートフォリオをいよいよ作りたく、どうせなら最近話題のastro+svelteを触ってみたいと思っています。
ただのastro導入段階で少し躓いたのでメモ。
何がおきたか
npm run devでastroを起動したかったのですが、いつまで立ってもcodespacesさんがポートフォワードしてくれず。
自分でポートを開いてもつないでくれない状態でした。
どうしたか
npm run dev実行時にもメッセージが出ていましたが、デフォルトだと次のようなメッセージが出ます
1
2
3
4
5
6
7
8
9
$ npm run dev
> portfolio@0.0.1 dev
> astro dev
🚀 astro v2.0.10 started in 64ms
┃ Local http://localhost:3000/
┃ Network use --host to exposeなるほど外部からのアクセスなので—hostをつけて実行してやる必要がありそうです。
1
2
3
4
5
6
7
8
9
10
11
12
13
$ npm run dev -- --host
> portfolio@0.0.1 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↓
でました、やったね。
💡
—host は、npm run dev実行で呼ばれるastro devにつけてあげる必要があります。npm run dev —host だとnpm run devコマンドに対してオプションが付くことになるので、ダッシュ2つ—-をつけることで、以降のオプションをnpm run devの実行先のコマンドへ渡すことが出来ます。
追加で
毎回— —hostをつけるのは面倒なので、packages.jsonを書き換えます。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
"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"
}
}