React.js

create-react-app + Dockerで開発しよう

$ npx create-react-app my-app
$ cd my-app

# Dockerfileとdocker-compose.ymlをつくる．
$ cat Dockerfile
FROM node:14.5.0-alpine
WORKDIR /usr/src/app
# node versionは適宜最新のものを使うなどするのがよい．

$ cat docker-compose.yml
version: '3'
services:
  node:
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - ./:/usr/src/app
    command: sh -c "yarn start"
    ports:
      - "3000:3000"
    stdin_open: true # https://teratail.com/questions/249875
  • これでdocker-compose build, docker-compose up とかをしつつよしなに開発する．

Enviroment(create-react-app)

  • npm start: development mode
  • npm run test: test mode
  • npm run build: production mode
  • create-react-appではnodeのenvは利用できない．
    • NODE_ENV=developmentの指定で.env.developmentを読み込ませる，などはできない．

ENV(create-react-app)

  • .env : デフォルト
  • .env.local: ローカル環境用(Environmentモードがtestの場合は読み込まれない)
  • .env.development, .env.test, .env.production: それぞれのEnvironmentモードで読み込まれる
  • .env.development.local, .env.test.local, .env.production.local: ローカル環境用
  • create-react-appはdotenvを利用しており、.envファイルで指定した設定値はReactアプリ内からprocess.env経由でアクセスできます。
  • .envファイルには、REACT_APP_から始まる変数名=値 の形式で記述します。
  • ref: 知っていると捗るcreate-react-appの設定 - Qiita