3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2021-08-28

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"の後の部分を変えずに最初の部分だけをホストマシンのポートに設定する。後の部分を変えるのであれば、DockerfileEXPOSE 5000と同じ値である必要がある。

以上。

ハッピーコーディング!

3
2
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?