Elsaの技術日記(徒然なるままに)

主に自分で作ったアプリとかの報告・日記を記載

MENU

React・node.js連携

前回、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でこちらのような構成を作ればよいようです。
※フロントサイド、サーバサイドの構成を考えたらあたりまえですが。
f:id:Elsammit:20200812151226p:plain

■連携方法

連携方法は下記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アプリ初心者で知らないことたくさんあるため、調べながら頑張って作っていきます!!