【ゼロから始めるReact】環境構築編（Docker）~ Vol.1 ~

【ゼロから始めるReact】環境構築編（Docker）

すずこ「そういえばReact触ったことないや」

すずこ「やってみよう!」

ということで、React（+ typescript）の環境を作ってみる。

構築ポイント

• 構築作業はできるだけシンプルに
  ⇒ コンテナに入ってコマンド打つとかやりたくなかった（面倒くさがり）
• ホストディレクトリを先にマウントしてから、Reactプロジェクトを作成
  ⇒ 初回コンテナ起動時にはホスト側にReactプロジェクトがある状態なので、ソースをいじりやすい

目次

1. バージョン
2. ディレクトリ構成（構築開始時）
3. ファイル内容
4. 構築手順
5. ディレクトリ構成（構築終了時）

バージョン

ソフトウェア名	バージョン
Docker	version 20.10.14
Docker Compose	version v2.4.1

ディレクトリ構成（構築開始時）

work_dir
　┣ app
　┃　┣ Dockerfile
　┃　┣ docker-entrypoint.sh
　┃　┗ src
　┗ docker-compose.yml

ファイルパス	説明	備考
app/Dockerfile	Reactコンテナイメージを管理するためのファイル
app/docker-entrypoint.sh	コンテナ起動時に実行したい処理を記述しているファイル
app/src	Reactプロジェクトの資材を格納するためのディレクトリ	作業時は空でOK
docker-compose.yml	コンテナの構成を定義しているファイル	本件ではappコンテナ（React）のみの構成ではあるが、後ほどDBコンテナ等の構築も想定されるためDockerComposeを使用

ファイル内容

app/Dockerfile

FROM node:16.15.0-alpine
WORKDIR /usr/src/app

COPY ./docker-entrypoint.sh /
ENTRYPOINT ["/docker-entrypoint.sh"]

app/docker-entrypoint.sh

#!/bin/sh
ROOT_DIR="/usr/src/app"
APP_DIR="$ROOT_DIR/react-app"

if [ ! -e $APP_DIR ]; then
    cd $ROOT_DIR
    echo "[START] create react app..."
    npm install -g create-react-app
    create-react-app react-app --template typescript
    echo "[END] create react app"
fi

cd $APP_DIR
echo "[START] yarn start..."
yarn start

exec "$@"

docker-compose.yml

version: "2"
services:
  app:
    container_name: react_app
    privileged: true
    restart: always
    stdin_open: true
    tty: true
    command: /bin/sh
    build:
      context: ./app
      dockerfile: Dockerfile
    ports:
      - "3000:3000"
    volumes:
      - ./app/src:/usr/src/app

構築手順

1. 構築ファイルの準備

ディレクトリ構成（構築開始時）のように資材を配置する

2. コンテナイメージの作成

# 作業ディレクトリに移動
$ cd work_dir

# ファイルの存在確認
$ ls
app  docker-compose.yml

# docker-entrypoint.shの権限変更
$ chmod 755 app/docker-entrypoint.sh

# コンテナイメージ構築
$ docker-compose build

3. コンテナの起動

# コンテナ起動
$ docker-compose up -d

# コンテナの状態確認
$ docker-compose ps
NAME                COMMAND                  SERVICE             STATUS              PORTS
react_app           "/docker-entrypoint.…"   app                 running             0.0.0.0:3000->3000/tcp

※STATUSがrunningになっていること

# ReactProjectの存在確認
$ ls app/src/
react-app

4. 画面にアクセス

画面が表示されればOK!

ディレクトリ構成（構築終了時）

work_dir
　┣ app
　┃　┣ Dockerfile
　┃　┣ docker-entrypoint.sh
　┃　┗ src
　┃　　 ┗ react-app（Reactの資材が入っているディレクトリ）
　┗ docker-compose.yml

コンテナにマウントしているため、work_dir/app/src/react-appをいじればアプリに反映される。

---

ということで、Dockerを使ってReactの環境を構築してみた。
今後DBへの繋ぎこみ等も行っていく予定。

すずこ「なにか要望があればコメントしてくれたら構築しようかな...((ﾁﾗｯ」

以上