はじめに

1週間N(E)ETになった社会人の学習記録です。
前回作ったFastAPIに対して、CRUDする予定だったのですが、まずは、Reactの環境をDocker上に構築しました。

参考ページ

Google先生の教えの中から分かりやすそうな記事を参考にする。

1. Dockerfile 作成

参考ページはディレクトリ作っているぐらいだったので、不要と判断。

2. docker-compose.yml 作成

できるだけデフォルトに寄せて設定項目を減らした。

docker-compse.yml

version: "3"

services:
# 略
  # React
  web:
    container_name: "web"
    image: node:15.14.0-buster-slim
    ports:
      - 3000:3000
    environment:
      LANG: ja_JP.UTF-8
      TZ: Asia/Tokyo
      NODE_ENV: deveropment
    volumes:
      - type: bind
        source: /mnt/c/Users/Public/GitHub/prac/docker/python_fastapi/web/app
        target: /app
    command: sh -c "cd /app && yarn start"

設定項目	備考
サービス名	参考資料¹のTips
image	nodeのデフォルトはdebian系だったから
ports	Reactのデフォルトは3000っぽい
environment	下表参照
volumes	お好み設定
command

環境変数名	設定値	備考
LANG	ja_JP.UTF-8	日本語²
TZ	Asia/Tokyo	日本時間²
NODE_ENV	deveropment	Docker使うならproductionでいいかなと思ったが、「To create a production build, use yarn build.」とでるのでdeveropmentにした。² ³ ⁴

3./4./8. appフォルダの作成とReactの起動

参考資料のまま、以下のコマンドをWSLのUbutuで実行。
結構時間がかかるけど、/appフォルダ内にReact本体が作成される。
localhost:3000にアクセスすると、Reactのロゴがぐるぐる回る。

docker-compose build
docker-compose run --rm web npx create-react-app app --template typescript
docker-compose up

5./6./7. 多分不要

5. appフォルダ内の移し替え

Dockerfile内でWORKDIRを設定していないため、PWDは/(root)のまま。
/にて「npx create-react-app app --template typescript」を実行すると、
/app 内にReact本体が展開されたので、本手順は不要だった。

6. .gitignoreの編集

/app/node_modulesはgitなどで別途管理する必要があると思う。
この本体部分が/usr/local以下とかの全体にインストールされるようなら、そういうDockerイメージを公式が出してほしい。
Dockerhubに無い時点で今回の手順を参考にした。

7. portの変更

デフォルトの3000番を使うので変更不要。

所感

鶏と卵問題のせいで、一番最初はbuildとrunとupを別にするのはだるい（まあ、DockerのCLIを立ち上げて中で打つよりは幾分マシだが）。
同じ問題はRailsの構築⁵ ⁶ でも見て取れるので、仕方ないような気がする。（Railsの開発時はRails createコマンドとかはコンテナ側で実行するのかホスト側で実行するのか気になる。）
コンテナの再立ち上げの際に数分待たされるほど遅いような気がする。（production版にすれば多少マシになるのかな？）
Reactのロゴが原子核っぽいのとReactorが原子炉ってことを考えると、開発陣に原子核物理の人でもいるのかな。

免責事項（言い訳）

上記の記載は初心者の試行錯誤なので、あてにしないように!!!