ここではDockerを使って、コンテナ上にReactの開発環境を構築した方法と注意点を紹介します。React自体の説明は省くので、詳しくは公式チュートリアル等をご覧あれ。

構築に当たっては、「DockerでReact＋TypeScript環境を作ってみた～formatterを添えて～ | Logical Studio Blog」を参考にしました。

セットアップ～create-react-appまで

• setup_docker.sh: docker 導入用

#!/bin/sh

echo "Dockerインストール"
# 参考（<https://docs.docker.com/install/linux/docker-ce/ubuntu/）>
sudo apt-get -y remove docker docker-engine docker.io containerd runc
sudo apt-get -y update

# 公開鍵の追加
sudo apt-key adv --keyserver keyserver.ubuntu.com --recv-keys "公開鍵"
sudo apt-get -y install apt-transport-https ca-certificates curl gnupg-agent software-properties-common
sudo curl -fsSL <https://download.docker.com/linux/ubuntu/gpg> | sudo apt-key add -
sudo apt-key fingerprint 0EBFCD88
sudo add-apt-repository "deb [arch=amd64] <https://download.docker.com/linux/ubuntu> $(lsb_release -cs) stable"
sudo apt-get -y update
sudo apt-get -y install docker-ce docker-ce-cli containerd.io
sudo apt-cache madison docker-ce

echo "Dockerデーモン起動"
sudo systemctl start docker

echo "Dockerデーモンの自動起動設定の有効化"
sudo systemctl enable docker

echo "Docker Composeインストール"
# 参考（<https://docs.docker.com/compose/install/）>
sudo apt-get -y update
sudo curl -L <https://github.com/docker/compose/releases/download/1.29.2/docker-compose-`uname> -s`-`uname -m` -o /usr/local/bin/docker-compose
sudo chmod +x /usr/local/bin/docker-compose

echo "Docker非sudo対応"
sudo groupadd docker
sudo systemctl restart docker
sudo gpasswd -a $USER docker

echo "inotifyの監視ファイル数上限値を増加させる"
echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf
sudo sysctl -p

echo "Docker非sudo対応の反映のためにシステム再起動"
sudo reboot

• docker-compose.yml

version: "3.8" #docker composerのバージョンの指定
services:
  front:
    build: ./ #buildするdockerfileの位置
    container_name: node #作成するdockerコンテナの名前
    working_dir: /home/front #docker内に入った時の初期パスの指定
    ports:
      - 3000:3000 #コンテナにバインドするポートの指定（左:自分のPCポート、右:dookerコンテナのポート）
    tty: true #コンテナが勝手に終了しないための設定
    stdin_open: true #標準入出力とエラー出力をコンテナに結びつける設定
    environment:
      - CHOKIDAR_USEPOLLING=true #ホットリロードを行う設定

• Dockerfile：参考記事からちょっとアレンジ

FROM node:16.14.0-buster
ENV NODE_VERSION 14.18.1

ARG HOME_DIR=/home/front
WORKDIR ${HOME_DIR}

COPY ./front ${HOME_DIR}

EXPOSE 3000

# コンテナが勝手に終了してしまわないよう設定
ENV CI=true

これでコンテナを立ち上げてみます。

$ docker-compose build
...
Successfully tagged sample-react-1_front:latest

$ docker-compose up -d
Creating network "sample-react-1_default" with the default driver
Creating node ... done

コンテナの中に入ってcreate-react-app。

$ docker exec -it node bash
root@97121bf2f357:/home/front# ls
root@97121bf2f357:/home/front# npx create-react-app . --template typescript --use-npm
...

We suggest that you begin by typing:

  cd /home/front
  npm start

Happy hacking!

ここでの注意点（そして、まだよくわかっていないところ）は、docker-compose.ymlのvolumesでローカルにマウントしようとするとsh: 1: create-react-app: Permission deniedのエラーが出る点です。本当はローカルに置いたDockerfile等と合わせてgit管理したかったものの、今回はコンテナ上のReactソースとローカルのDocker設定ファイルはリポジトリを分けました。

コンテナに接続して作業する

今回はMicrosoftが出しているVScodeの拡張機能、Remote -Containersを使ってコンテナに接続しました。以下のように、コンテナのところを右クリックして出てくるメニューの上から３番目、”Attach Visual Studio Code”をクリックすることでコンテナにVScodeで接続できます。

コンテナ上の開発ディレクトリに入ったら、npm startでサーバを起動します。docker-compose.ymlで、Dockerコンテナの3000ポートはホストの3000ポートとフォワーディング設定していたので、このサーバにはホスト側でブラウザを立ち上げ、localhost:3000のURLで接続できます。

$ npm start

参考

• DockerでReact＋TypeScript環境を作ってみた～formatterを添えて～ | Logical Studio Blog
• さわって学ぶクラウドインフラ　docker基礎からのコンテナ構築 [ 大澤 文孝 ]