はじめに
1週間N(E)ETになった社会人の学習記録です。
前回作ったFastAPIに対して、CRUDする予定だったのですが、まずは、Reactの環境をDocker上に構築しました。
参考ページ
Google先生の教えの中から分かりやすそうな記事を参考にする。
1. Dockerfile 作成
参考ページはディレクトリ作っているぐらいだったので、不要と判断。
2. docker-compose.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"
| 設定項目 | 備考 |
|---|---|
| サービス名 | 参考資料1のTips |
| image | nodeのデフォルトはdebian系だったから |
| ports | Reactのデフォルトは3000っぽい |
| environment | 下表参照 |
| volumes | お好み設定 |
| command |
| 環境変数名 | 設定値 | 備考 |
|---|---|---|
| LANG | ja_JP.UTF-8 | 日本語2 |
| TZ | Asia/Tokyo | 日本時間2 |
| NODE_ENV | deveropment | Docker使うならproductionでいいかなと思ったが、「To create a production build, use yarn build.」とでるのでdeveropmentにした。2 3 4 |
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の構築5 6 でも見て取れるので、仕方ないような気がする。（Railsの開発時はRails createコマンドとかはコンテナ側で実行するのかホスト側で実行するのか気になる。）
コンテナの再立ち上げの際に数分待たされるほど遅いような気がする。（production版にすれば多少マシになるのかな？）
Reactのロゴが原子核っぽいのとReactorが原子炉ってことを考えると、開発陣に原子核物理の人でもいるのかな。
免責事項（言い訳）
上記の記載は初心者の試行錯誤なので、あてにしないように!!!