前回、Reactでサーバサイドとの通信方法をまとめました。
elsammit-beginnerblg.hatenablog.com
だけど疑問だったことが1つあり調べておりました。
Reactとnode.jsなどのサーバサイドを同時に実行する方法
です。
Reactは、
yarn start
を実行する必要がありますが、node.jsは、
node 実行ファイル
を実行する必要があります。
こちらをどのような構成で実行・管理していけばよいのか分かりませんでした。。。
基本的にはサーバサイドであるnode.jsからReactを呼び出して、Webブラウザ上に表示すればよい気がするのですが、、、
どうすればよいのだろう？？
ということで、Reactとサーバサイドとの連携方法についてまとめていきたいと思います！！
今回は、サーバサイドをnode.jsで作成して進めていきます。
■構成図
参考を確認したところ、Reactとnode.jsでこちらのような構成を作ればよいようです。
※フロントサイド、サーバサイドの構成を考えたらあたりまえですが。
■連携方法
連携方法は下記2つ(もしかしたら他にもあるかもしれませんが)。
①React、node.jsの両方を実行、動作させる
②Reactをビルドして生成されたindex.htmlを用いる
①だとフロントサイド、サーバサイド両方を修正させながら実行できるため便利だと思います。
一方、最終的にデプロイする場合には②の方がサーバが乱立することを防ぐことができるため、よいと思います。
■前準備
サーバサイドとフロントサイドのフォルダ構成は下記のようにしておきます。
server/ |-client/ ← create-react-appで実行 |-index.js ← node.jsで実装 |-node_modules |-package-lock.json |_package.json
ここで、pakage.json等、clientフォルダとindex.js以外は、serverフォルダ直下で、
npm init
を実行すれば生成されます。
■React、node.jsの両方を実行
まず、concurrentlyをnpmでインストール
npm install concurrently
次に、server/pakage.jsonを開いて下記のように設定。
"scripts": {
"start":"node index.js",
"client":"npm run start --prefix client",
"test": "concurrently \"node index.js\" \"yarn run client\""
},最後に下記コマンドを実行するとReact、node.jsの両方が同時に実行させることができます。
npm install test
paakge.jsonに設定したscriptですが、
コマンドを実行した時に起動させるコマンドを定義させる設定になります。
例えば、
npm run start
とすると、node index.jsを実行したことになります。
concurrentlyを定義すると、2つのコマンドを実行できるようになるようです。
■Reactをビルドして生成されたindex.htmlを用いる
まず、clientフォルダ直下でこちらを実行。
yarn build
これにより、client/build直下にindex.htmlが生成されます。
次にサーバーサイド側の実装をこちらのようにします。
const express = require('express');
const app = express();
const fs = require('fs');
app.use(express.static('./client/build'));
app.get('/', (req, res) => {
var url = "client/build/index.html";
console.log("url:"+url);
if (fs.existsSync(url)) {
fs.readFile(url, (err, data) => {
if (!err) {
res.writeHead(200, {"Content-Type": "text/html"});
res.end(data);
}
})
}
});
app.listen(8080, ()=> {
console.log("Listening: 8080");
});そして、serverフォルダ直下で、
node index.js
と実行すればOKです。
■最後に
サーバサイド、フロントサイド間の連携・通信がわかったのでサーバ連携したアプリを作ってみたいな。と思っております。
まだまだWebアプリ初心者で知らないことたくさんあるため、調べながら頑張って作っていきます！！
