Reactにおけるプロキシ（proxy）設定について
Reactでのプロキシ設定は、開発環境においてAPIサーバーとクライアント間のCORS問題を回避するために使用されます。
通常、Reactアプリはフロントエンドサーバー（例：localhost:3000）で実行され、APIはバックエンドサーバー（例：localhost:8080）で実行されるため、ブラウザがクロスオリジンリクエストをブロックします。
これを解決するために、フロントエンドの開発サーバーがAPIリクエストをプロキシとして中継するように設定できます。
1. 基本的なプロキシ設定（CRAベースのプロジェクト）
CRA（Create React App）を使用している場合は、package.jsonに以下のようにproxyオプションを追加できます：
（package.jsonの内容）
{
"proxy": "http://localhost:8080"
}
これにより、Reactアプリから以下のようにAPIリクエストを送信できます：
fetch('/api/data');
// 実際のリクエストは http://localhost:8080/api/data に転送されます
Reactの開発サーバーが /api/data のリクエストを受け取り、http://localhost:8080/api/data にプロキシしてくれます。
2. 高度なプロキシ設定（カスタムプロキシ、複数のパスなど）
より複雑なプロキシ設定が必要な場合は、src/setupProxy.js ファイルを作成し、http-proxy-middleware を使用できます。
インストール
npm install http-proxy-middleware --save
設定例
（src/setupProxy.js の内容）
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
app.use(
'/api',
createProxyMiddleware({
target: 'http://localhost:8080',
changeOrigin: true,
})
);
};
メリット
- 複数のパスをそれぞれ異なるサーバーへプロキシ可能
- パスの書き換え（path rewrite）が可能
- ヘッダーの変更など高度なオプションも対応
3. 本番環境では？
このプロキシ設定はローカル開発サーバー上でのみ機能します。
本番環境では、以下のいずれかの方法を取る必要があります：
- バックエンドサーバーがフロントエンドとAPIを統合する
- リバースプロキシ（例：Nginx）を使用してリクエストをルーティングする
- CORS対応ヘッダーをバックエンドに設定する
＊Nginxによるリバースプロキシ設定の例
目的
- Reactのビルド済み静的ファイルを
/経由で配信 -
/api/へのリクエストはバックエンドサーバー（例：localhost:8080）へプロキシする
ディレクトリ構成（例）
- Reactビルド出力先：
PATH/react-app/build - Nginx設定ファイル：
/etc/nginx/sites-available/react-app
Nginx設定例（/etc/nginx/sites-available/react-app）
server {
listen 80;
server_name your-domain.com;
root /PATH/react-app/build;
index index.html;
# Reactアプリ（SPA）のルーティング
location / {
try_files $uri /index.html;
}
# APIリクエストのリバースプロキシ設定
location /api/ {
proxy_pass http://localhost:8080/;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}
設定の反映手順
- 上記の設定ファイルを
/etc/nginx/sites-available/react-appに保存 - シンボリックリンクを作成：
ln -s /etc/nginx/sites-available/react-app /etc/nginx/sites-enabled/
- Nginx設定のテスト：
sudo nginx -t
- Nginxの再起動：
sudo systemctl restart nginx