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

2020年10月11日 14:42

React、Node環境をDockerで起動できるようにします。
（前回の記事は下記になります）

Docker構築

Dockerのインストールの手順は省略します。
フロントエンドとバックエンドのDockerファイルを作成します。

touch ./src/front/Dockerfile.front
touch ./src/app/Dockerfile.app

Dockerfile.front

FROM node:12-alpine AS BUILD_IMAGE

WORKDIR /nrdp

COPY ./package*.json ./
RUN npm ci

COPY ./config ./config
COPY ./src/front ./src/front
RUN mkdir dist

ENV CHOKIDAR_USEPOLLING=true
EXPOSE 8080

CMD ["npm", "run", "front"]

Dockerfile.app

FROM node:12-alpine AS BUILD_IMAGE

WORKDIR /nrdp

COPY ./package*.json ./
RUN npm ci

COPY ./src/app ./src/app

EXPOSE 3000

CMD ["npm", "run", "app"]

フロントエンド、バックエンドを起動するdocker-composeファイルを作成します。

touch ./docker-compose.yml

docker-compose.yml

version: "3"

services:
 app:
   build:
     context: .
     dockerfile: ./src/app/Dockerfile.app
   ports:
     - "3000:3000"
   volumes:
     - ./src/app:/nrdp/src/app
   tty: true
   networks: 
     - react-node-docker-postgres

 front:
   build:
     context: .
     dockerfile: ./src/front/Dockerfile.front
   ports:
    - "8080:8080"
   volumes:
     - ./src/front:/nrdp/src/front
   tty: true
   networks: 
     - react-node-docker-postgres

networks: 
   react-node-docker-postgres:

Dockerで起動するので、フロントエンド - バックエンド連携の設定を変更します。webpack.configのdevServerのhost、proxyを修正します。
proxyのtargetで指定するURLのホスト名はdocker-compose.ymlで指定したサービス名となります。

webpack.config

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

Dockerを起動します。

docker-compose up -build

localhost:8080でアクセスできるようになります。
起動したまま、バックエンドとフロントエンドを修正してみます。

src/app/js/main.js

app.get('/api/docker', (req, res) => {
 const dockerMsg = 'Connected Docker!';
 res.send({ docker: dockerMsg });
});

src/front/js/node/Node.jsx

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

export default class NodeApp extends React.Component {

 state = {
   nodeResult: "",
   dockerResult: ""
 }
   
 componentDidMount() {
   const responseJson = getJSON("/api/node")
   .then(responseJson => this.setState({ nodeResult: responseJson.api }));

   const dockerResponseJson = getJSON("/api/docker")
   .then(dockerResponseJson => this.setState({ dockerResult: dockerResponseJson.docker }));
 }
 
 render() {
   return (
     <div className="NodeApp">
       <div>
         {this.state.nodeResult}
       </div>
       <div>
         {this.state.dockerResult}
       </div>
     </div>
   );
 }
}

Dockerの再起動しなくてもブラウザが更新されます。

Dockerでのデバッグ

Dockerコンテナにデバッグできるようにlaunch.jsonを修正します。

launch.json

{
   // IntelliSense を使用して利用可能な属性を学べます。
   // 既存の属性の説明をホバーして表示します。
   // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
   "version": "0.2.0",
   "configurations": [
       {
           "type": "node",
           "request": "attach",
           "name": "Docker: Attach to Node",
           "port": 9229,
           "address": "localhost",
           "localRoot": "${workspaceFolder}/src/app/js",
           "remoteRoot": "/nrdp/src/app/js",
           "protocol": "inspector"
       }
   ]
}

バックエンドの起動をデバッグモードで起動できるように「app-debug」を追加します。

package.json

  "scripts": {
   "front": "webpack-dev-server --config ./config/webpack.config.js --open --mode development",
   "app": "nodemon src/app/js/main.js  --exec babel-node",
   "app-debug": "nodemon -L --inspect-brk=0.0.0.0:9229 src/app/js/main.js  --exec babel-node",
   "dev": "concurrently \"npm run front\" \"npm run app\""
 },

Dockerfile.app

FROM node:12-alpine AS BUILD_IMAGE

WORKDIR /nrdp

COPY ./package*.json ./
RUN npm ci

COPY ./src/app ./src/app

EXPOSE 3000

CMD ["npm", "run", "app-debug"]

デバッグ用のポートをDockerコンテナ（app）が受け付けられるように修正します。

services:
 app:
   build:
     context: .
     dockerfile: ./src/app/Dockerfile.app
   ports:
     - "3000:3000"
     - "9229:9229"
   volumes:
     - ./src/app:/nrdp/src/app
   tty: true
   networks: 
     - react-node-docker-postgres

「docker-compose up -build」で起動します。
起動後、VSCode左メニューバーのデバッグをクリックし、「Docker: Attach to Node」を選択します。