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サーバーの２つのサーバーに分けます。
ExpressサーバーはAPIとしてJsonを返し、Reactサーバーはcreate-react-appが.jsファイルを返します。
 
２つのサーバーを別々に稼働するために、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を発行元以外のドメインには渡せないので、
単純にサーバーを２つ（ここでは、localhost:3000とlocalhost:5000、portが違うだけでも異なるドメインになっちゃいます。）に分けると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サーバーは必要ないわけです。

Reactを学ぶならUdemyがおすすめです

Reactを学ぶならUdemy がおすすめです。

私もこちらで紹介した手法を以下のコースで勉強しました。
Stephen Griderさんはかなりわかりやすくてオススメです。英語の勉強にもなるよ！

Modern React with Redux

その他にも日本語のコースもあるので試してみると良いと思います。

コンテンツはかなり充実していてやる気は必要ですが、やる気がある人にはかなりオススメです。

React の日本語のコース

その中でも以下がオススメです。

コメント

スポンサーリンク