ここでは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
