React開発時には、APIサーバーとReactアプリサーバーを別にして、プロキシを使うというベスト・プラクティス

React

Create-React-AppのインストールとReactアプリの作成

sudo npm install -g create-react-app
-gオプションを指定することでグローバルにcreate-react-appをインストールします。
これでどこからでもcreate-react-appを使用することができます。
create-react-app client
create-react-appでclientというプロジェクトを作成します。
cd client
npm start
clientフォルダ内入って、
npm start で、自動的にブラウザ上にReactアプリが立ち上がります。
 

ExpressサーバーとReactサーバーを分けて運用する

 
開発時(devモード)は、ExpressサーバーとReactサーバーの2つのサーバーに分けます。
ExpressサーバーはAPIとしてJsonを返し、Reactサーバーはcreate-react-appが.jsファイルを返します。
 
2つのサーバーを別々に稼働するために、serverフォルダ内でnpm run dev、clientフォルダ内でnpm startをする必要があります。
serverフォルダ内でcreate-react-appを実行しclientプロジェクトを作成したので、serverフォルダ内の構成は以下のようになっています。
server/
├── client/
├── index.js
├── node_modules
├── package-lock.json
└── package.json
concurrentrlyをnpmでインストールします。
server/package.jsonの設定を行います。
"scripts": {
"start": "node index.js",
"server": "nodemon index.js",
"client": "npm run start --prefix client",
"dev": "concurrently \"npm run server\"\"npm run client\""
}
\はエスケープ文字で"を"内で使えるようにしています。

ローカル開発環境で開発している時にはProxy(プロキシ)を使うと( ・∀・)イイ!!

ブラウザーはCookieを発行元以外のドメインには渡せないので、
単純にサーバーを2つ(ここでは、localhost:3000とlocalhost:5000)に分けるとCookieによる認証ができなくなります。
というわけで、ブラウザーからの出入りはlocalhost:3000(Reactアプリ、ここではclient)に統一します。
Expressサーバーが動いているlocalhost:5000にはReactアプリ(client)が動いているlocalhost:3000をプロキシ(Proxy)サーバーとして使い間接的にアクセスします。
 
ブラウザー側からはあくまでもlocalhost:3000でサイトが動いているように見えます。
プロキシとは代理人という意味で、localhost:5000の代理としてlocalhost:3000がリクエストを受け取り、そのままリクエストを渡します。
 
 

create-react-app 2.0でのproxyの設定

create-react-appはバージョンが1.x.xから2.x.xにバージョンアップされたことで、proxyの設定方法も変更になっています。("react-scripts"のバージョンが1.x.xから2.x.xに変更されていることに伴っています。client/package.jsonで"react-scripts"のバージョンを確認してみてください)

client/の中で
npm install http-proxy-middleware
としてhttp-proxy-middlewareをインストールします。
 
client/src/内にsetupProxy.jsを作成し、proxyの設定を行います。
client/src/setupProxy.js
const proxy = require('http-proxy-middleware')
 
module.exports = function(app) {
    app.use(proxy('/auth/google', { target: 'http://localhost:5000' }))
    app.use(proxy('/api/*', { target: 'http://localhost:5000' }))
}

create-react-appがsetupProxy.jsというファイル名を自動的に見つけ出して読みこんでくれます。
他のファイルでsetupProxy.jsをimportする必要はありません。

/auth/googleまたは/api/以下のエンドポイントにアクセスされた際にはhttp://localhost:5000 (Expressサーバー)に中継されます。

プロダクション時にはどうする?

create-react-appで作成したclientフォルダ内で

cd client
npm run build

するとbuild/staticフォルダ内にjsフォルダ、 cssフォルダが作成され、
その中にjsファイルcssファイルがwebpackによって作成されます。
ExpressサーバーはAPIサーバーとしての機能と、Proxyすることなくただ単純にこの静的なjsファイルとcssファイルを返すだけになります。プロダクション時には静的なファイルを返すだけなので、Reactサーバーは必要ないわけです。

コメント