作業中のメモ

よく「計算機」を使って作業をする．知らなかったことを中心にまとめるつもり．

トップ > React > Reactの環境構築

Reactの環境構築

React プログラミング docker

どうも，筆者です．

最近，技術習得ができていないのではないかと疑問を持ち始めるようになった．ただ，仕事の都合上，自宅でできる範囲の事は限られている． そこで，Web 系の技術であれば自宅からでも勉強ができると思い立ち，Web 系の技術を学ぶこととした．

最近の流行りを追い切れていないが，以前から興味があった技術として React がある．ここでは，React を勉強し，以前作成した WebPhone の frontend を React で作り直したいと思う．（他に良い題材が無かった） React は，使ったことすらなかったので，まずは，環境を構築し，チュートリアルを進めるところまでをまとめたいと思う．構築した環境は，本番では使わない気がするが．

準備

例に漏れず，Docker で環境構築をする．まず，ディレクトリ構成は以下のようにした．public と src に関しては，コンテナ作成後，docker からホストにコピーして利用するものとする．

.
│  docker-compose.yml
│  README.md
│
└─frontend
    │  Dockerfile
    │  entrypoint.sh
    │
    ├─public
    │
    └─src

docker-compose.yml

docker-compose.yml は以下のようになる．

version: '3.4'

x-logging:
  &json-logging
  driver: json-file
  options:
    max-size: "10m"
    max-file: "3"

services:
  frontend:
    build:
      context: ./frontend
      dockerfile: Dockerfile
      args:
        TZ: "Asia/Tokyo"
    image: frontend.react
    working_dir: /home/node/app
    restart: always
    container_name: frontend-react
    #volumes: # 後で，コメントを外す．
    #  - ./frontend/public:/home/node/app/public
    #  - ./frontend/src:/home/node/app/src
    ports:
      - 8888:3000
    logging: *json-logging

Dockerfile

Dockerfile は以下のようになる．

FROM node:16-alpine3.11
ARG TZ="Asia/Tokyo"

ENV NODE_UID=1000 \
    NODE_GID=1000

# install basic software
RUN    apk update \
    && apk add --no-cache bash tzdata shadow su-exec tini \
    && cp /usr/share/zoneinfo/${TZ} /etc/localtime \
    && mkdir -p /var/log/react \
    && rm -rf /home/node/app \
    && rm -rf /root/.cache /var/cache/apk/*

COPY entrypoint.sh /usr/local/bin/entrypoint.sh
RUN chmod +x /usr/local/bin/entrypoint.sh

USER node
RUN    cd /home/node \
    && echo -e "y\n" | npx create-react-app app \
    && cd app \
    && npm install log4js
USER root

WORKDIR /home/node/app

ENTRYPOINT [ "/usr/local/bin/entrypoint.sh" ]
CMD [ "npm", "start" ]

entrypoint.sh

entrypoint.sh は以下のようになる．ここでは，ホスト側の volume と共有する前提であり，root 権限でファイルが作成されないように細工している．

#!/bin/bash

# get node user information
uid=$(id node -u)
gid=$(id node -g)

# change GID
if [ ${NODE_GID} -ne ${gid} ]; then
    groupmod -g ${NODE_GID} node
fi
# change UID
if [ ${NODE_UID} -ne ${uid} ]; then
    usermod -u ${NODE_UID} node
fi

# update owner
chown node:node /var/log/react
chown node:node package.json package-lock.json
# execute process by node user
exec su-exec node /sbin/tini -e 143 -- "$@"

環境のビルド・生成ファイルの取得

ビルド手順と create-react-app により生成されるファイルの取得手順は，以下のようになる．

  1. docker-compose build により docker image を作成する．
  2. docker-compose up -d により，コンテナを作成する．
  3. ホストマシンでコマンドを実行し，docker container 内のファイルをホスト側にコピーする．

docker image の作成

以下のコマンドを実行する．

docker-compose build

コンテナの作成

以下のコマンドを実行する．

docker-compose up -d
# 下記のコマンドを実行し，コンテナが起動していることを確認する
# docker ps -a

生成ファイルの取得

以下のコマンドを実行し，ホスト側にファイルコピーする．

# ホストマシンでコマンドを実行
# === 作業ディレクトリ ===
# ls
# -> README.md  docker-compose.yml  frontend
# ==================

# ファイルのコピー
docker cp frontend:/home/node/app/public ./frontend/public
docker cp frontend:/home/node/app/src ./frontend/src
# 権限の変更
sudo chown ${USER}:${USER} -R ./frontend
# 階層構造の修正
mv ./frontend/public/public/* ./frontend/public
mv ./frontend/src/src/* ./frontend/src
rm -rf ./frontend/public/public ./frontend/src/src

この段階で，ディレクトリ構造は以下のようになる．

.
│  docker-compose.yml
│  README.md
│
└─frontend
    │  Dockerfile
    │  entrypoint.sh
    │
    ├─public
    │      favicon.ico
    │      index.html
    │      logo192.png
    │      logo512.png
    │      manifest.json
    │      robots.txt
    │
    └─src
            App.css
            App.js
            App.test.js
            index.css
            index.js
            logo.svg
            reportWebVitals.js
            setupTests.js

接続確認

一度，コンテナを削除し，docker-compose.yml を更新後に，再度コンテナを作成する．

まず，以下のコマンドでコンテナを削除する．

docker-compose down

次に，コメントアウトしていた部分のコメントを外す

version: '3.4'

（中略）

    volumes:
      - ./frontend/public:/home/node/app/public
      - ./frontend/src:/home/node/app/src

（以下，省略）

再度，コンテナを作成する．

docker-compose up -d

一通り完了したら，ブラウザから http://localhost:8888 にアクセスする．