React + Node + Docker + Postgres （#2 Node構築）

前回はフロントエンド側の環境を構築したので、今回はバックエンド側を構築していきます。（前回の記事は下記になります）

Node構築

バックエンド側ではNode.jsのexpressで構築していきます。

npm i -S express
npm i -D babel-cli
npm i -D nodemon concurrently

バックエンドAPIを作成します。

mkdir -p ./src/app/js
touch ./src/app/js/main.js

main.jsを編集します。

const express = require("express");
const path = require("path");

const app = express();

app.get('/api/node', (req, res) => {
 res.send({api: 'Connected Node'});
})

app.listen(3000, ()=> {
 console.log('app running');
})

package.jsonのscriptsにバックエンドを起動するように追記します。

"app": "nodemon src/app/js/main.js  --exec babel-node",
"dev": "concurrently \"npm run front\" \"npm run app\""

バックエンドを起動します。

npm run app

ブラウザで「localhost:3000/api/node」にアクセスするとレスポンスが帰って来ます。

React - Node連携

それではフロントエンドとバックエンドを繋げてみます。
localhost:8080/apiのリクエストをlocalhost:3000/apiにリクエストするProxyを起動するようにします。
webpack.config.jsのmodule.exportsにを以下を追記します。

devServer: {
 historyApiFallback: true,
 open: true,
 host: 'localhost',
 port: 8080,
 proxy: {
   '/api/**': {
     target: 'http://localhost:3000',
     secure: false,
     logLevel: 'debug'
   }
 },
}

フロントエンドからapiにリクエストし取得した結果を表示するようにします。

mkdir ./src/front/js/utils
touch ./src/front/js/utils/HttpUtils.js
mkdir ./src/front/js/node
touch ./src/front/js/node/Node.jsx

HttpUtil.js

import _ from "lodash";

const HEADERS_CONTENT_TYPE_JSON = {
 headers: {
   "Content-Type": "application/json"
 }
};

export function get(path, options) {
 const opts = {
   ...options
 };
 return fetch(path, opts);
}

const isNullish = v => _.isNull(v) || _.isUndefined(v);

export function parseQueryString(searchParams) {
 if (!searchParams) return {};
 if (_.isString(searchParams)) {
   searchParams = new URLSearchParams(searchParams);
 }
 if (searchParams instanceof URL) {
   searchParams = searchParams.searchParams;
 }
 let obj = {};
 for (let [key, value] of searchParams.entries()) {
   if (isNullish(obj[key])) {
     obj[key] = value;
   } else if (_.isArray(obj[key])) {
     obj[key].push(value);
   } else {
     obj[key] = [obj[key], value];
   }
 }
 return obj;
}

export function toQueryString(params) {
 return params ? "?" + new URLSearchParams(params) : "";
}

export function getJSON(path, params, options) {
 const opts = {
   ...HEADERS_CONTENT_TYPE_JSON,
   ...options
 };
 const query = toQueryString(params);
 return get(`${path}${query}`, opts).then(resp => resp.json());
}

export function post(path, body, options) {
 const opts = {
   method: "POST",
   body,
   ...options
 };
 return fetch(path, opts).then(resp => resp.json());
}

export function postJSON(path, data, options) {
 const opts = {
   ...HEADERS_CONTENT_TYPE_JSON,
   ...options
 };
 return post(path, JSON.stringify(data), opts);
}

export function del(path, body, options) {
 const opts = {
   method: "DELETE",
   body,
   ...options
 };
 return fetch(path, opts).then(resp => resp.json());
}

export function deleteJSON(path, data, options) {
 const opts = {
   ...HEADERS_CONTENT_TYPE_JSON,
   ...options
 };
 return del(path, JSON.stringify(data), opts);
}

Node.jsx

import React, { Component } from 'react';
import { getJSON } from "../utils/HttpUtils";

export default class NodeApp extends React.Component {

 state = {
   nodeResult: []
 }
   
 componentDidMount() {
   const responseJson = getJSON("/api/node")
   .then(responseJson => this.setState({ nodeResult: responseJson.api }));
 }
 
 render() {
   return (
     <div className="NodeApp">
       <div>
         {this.state.nodeResult}
       </div>
     </div>
   );
 }
}

src/fornt/js/main.jsからNode.jsxを呼び出せるように修正します。
Node.jsxをインポートします。

main.js

import React from "react";
import ReactDOM from "react-dom";
import NodeApp from './node/Node'

const Index = () => {
 return (
   <div>Hello React! <NodeApp /></div>
 );
};

ReactDOM.render(<Index />, document.getElementById("root")); 

フロントエンド、バックエンドを起動しましょう。

npm run dev

src/app/js/main.jsの「Connected Node」に「!」を追加してみます。
バックエンドの再起動はしなくてもブラウザの更新のみで「Connected Node!」となります。

ここまでのものはこちらになります。
https://github.com/YosukeKondo/react-node-docker-postgres/releases/tag/v2.0_node

VSCodeでデバッグ

バックエンドのデバッグできるようにします。
①左メニューバーのデバッグをクリック
②「launch.jsonファイルを作成します」をクリック
③「Node.js」をクリック

launch.jsonが自動作成されるので、下記の通りに編集します。

{
   // IntelliSense を使用して利用可能な属性を学べます。
   // 既存の属性の説明をホバーして表示します。
   // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
   "version": "0.2.0",
   "configurations": [
       {
           "type": "node",
           "request": "launch",
           "name": "プログラムの起動",
           "skipFiles": [
               "<node_internals>/**"
           ],
           "program": "${workspaceFolder}/src/app/js/main.js"
       }
   ]
}

デバッグを起動します

任意のところでブレークポイントを貼ります。
バックエンド側は上記で起動していますので、フロントエンド側を起動する（「npm run front」）とデバッグができます。

次はDockerで起動できるようにします。