はじめに
学校のシステム開発授業で基本は授業などで勉強したPHPを利用するものですが、技術選定が自由なところからReact + viteを使った開発を進めていたところ、ネットワーク開放のときに先生方がてこずっていたため詳しくまとめてみました。
この記事では
- Reactでのネットワーク開放について
をまとめています。
ネットワーク開放とは
「ネットワーク開放」とは、自分のPCで動かしている開発サーバーを、同じWi-Fiにつないだスマホや他のPCなど、ネットワーク越しにアクセスできるようすることです。
例：
- ローカルのみ（localhost） → 自分のPCからだけアクセスできる
- ネットワーク開放 → 同じLAN内の他の端末からもアクセス可能
Reactでネットワーク開放が標準でないのは？
Reactの開発サーバー（Viteなど）はローカル開発用にホットリロードなどを提供するもので、セキュリティ上、外部からアクセスできない設定になっています。
理由：
- 意図しない他人が開発中のアプリを見たり操作したりするリスク
- セキュリティーホールを防ぐ
このため、必要な時に明示的に設定を変更してネットワークを開放するスタイルになっています。
React + viteでネットワーク開放をする方法
vite.config.jsを編集
// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
server: {
host: '0.0.0.0'
}
})
host: '0.0.0.0'でLAN内のすべての端末からアクセスが可能になります。
IPアドレスを確認
自分のPCのIPアドレスを調べます。
- mac/Linux
bash
ifconfig
- Windows
bash
ipconfig
例：192.168.1.10
スマホや別PCからアクセス
ブラウザでhttp://192.168.1.10:5173にアクセス
（ポート番号はViteのデフォルトの5173）
npm run dev -- --hostで一時的な開放も
bash
npm run dev -- --host
を実行すると、ViteがLAN内の他端末からの接続を受け付けるようになり、ターミナルにも次のように表示されます。
bash
➜ Local: http://localhost:5173/
➜ Network: http://192.168.1.10:5173/
スクリプトに追加すると便利
package.jsonに以下を追加することで、毎回のコマンド入力を楽にできます。
json
"scripts": {
"dev": "vite",
"dev lan": "vite --host"
}
npm run dev lanでネットワーク開放された状態で起動できます。
注意点
- 開放中はLAN内のだれでもアクセス可能になる
- 信頼できるネットワークのみで使用する
- 外部に公開したい場合は本番用にビルド・Webサーバーで運用する。