【macOS Monterey】ViteのPreviewスクリプトで403になった時の対処法
環境
- macOS: Monterey v12.0.1
- Vite: v2.7.13
起きたこと
本番環境用のビルド結果をローカルで確認したく、npm run build した後に npm run preview を実行し、http://localhost:5000/ を開いてみたところ、403 エラーになりました。本記事では調べたことと対処方法についてまとめます。
追記（2022/02/09）
Vite v2.8.0 から preview スクリプトで使うデフォルトのポートが 5000 → 4173 になったので、特に設定を変えなくても動くようになりました🎉
そのため、preview スクリプトで 403 になった方は Vite v2.8.0 以上にバージョンを上げてみることをおすすめします。
先に結論
- Monterey から AirPlay レシーバーが 5000 番ポートを使用するようになった
- Vite の preview スクリプトもデフォルトでは 5000 番ポートを使用するためコンフリクトした
- preview スクリプトで使用するポートを変更することで解消できる
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
+ preview: {
+ port: 9001
+ }
})
エラーになった原因の調査
似たようなエラーが報告されてないか調べてみる
Vite の Discussion で似たような事象が報告されていました。
どうやら、AirPlay レシーバーも 5000 番ポートを使用しているためコンフリクトしているみたいです。preview スクリプトで使用するポートを変えると、エラーが解消されるようなので試してみます。
previewスクリプトで使用するポートを変える
公式のドキュメントを確認してみたところ、preview.port を設定すれば preview スクリプトで使用するポートを変えられるようです。
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
+ preview: {
+ port: 9001
+ }
})
この状態で再度 npm run preview を実行し、http://localhost:9001/ を開くと、エラーが解消されビルド結果を確認できました🎉
そもそもの原因
どうやら、Monterey から AirPlay レシーバーが 5000 番ポートを使うようになったみたいです。
試しに 5000 番ポートを使用しているプロセスがあるか確認してみます。（実行結果は一部省略しています）
$ lsof -i:5000
COMMAND PID ...
ControlCe 591 ...
やはりいましたね。
下記の手順を踏むことで、AirPlay レシーバーを停止できるみたいです。
「システム環境設定」 -> 「共有」 -> 「AirPlay レシーバー」のチェック外す
が、各々が上記の設定を変えるのは手間なので、previewスクリプトで使用するポートを変えるのが良さそうという結論に落ち着きました。
Discussion