1分で環境立上げ - create-react-app & typescript & yarn & dockerを実行するまで

Issue

create-react-app & typescriptでアプリが完成したが、良さそうなDockerfileとdocker-compose.ymlが無い。

解決策

過去のプロジェクトからとってきた。
今後検索で引っ掛かるようにここで共有する。

前提

• Dockerfileとdocker-composeの知識がある前提なので、わからなければ公式サイトで勉強することを勧める。
• CRAはEjectしていない前提である。

実装

Dockerfile

FROM node:14-alpine AS builder

# set working directory
WORKDIR /app

# Copies package.json and yarn.lock to Docker environment
COPY package.json ./
COPY yarn.lock ./

# Install `serve` to run the application.
RUN npm install -g serve
# Installs all node packages
RUN yarn install --frozen-lockfile

# Copies everything over to Docker environment
COPY . .

# Build for production.
RUN yarn build

# Uses port which is used by the actual application
EXPOSE 5000

# Run application
#CMD [ "npm", "start" ]
CMD serve -s build

docker-compose.yml

version: "3"

services:
  my_webapp:
    build:
      context: .
    volumes:
      - ./src:/app/src # 多分これはいらないかも。
    ports:
      - "5000:5000"

あとは、以下のコマンドでローカルと本番環境で実行できる。

docker-compose build -> ビルドを作る
docker-compose up -d -> バックグラウンドで実行する

Portの設定は<HOST>:<CONTAINER>になる。なので、- "5000:5000"の後の部分を変えずに最初の部分だけをホストマシンのポートに設定する。後の部分を変えるのであれば、DockerfileのEXPOSE 5000と同じ値である必要がある。

以上。

ハッピーコーディング！