ここではDockerを使って、コンテナ上にReactの開発環境を構築した方法と注意点を紹介します。React自体の説明は省くので、詳しくは公式チュートリアル等をご覧あれ。
構築に当たっては、「DockerでReact＋TypeScript環境を作ってみた～formatterを添えて～ | Logical Studio Blog」を参考にしました。
Contents
セットアップ～create-react-appまで
- setup_docker.sh: docker 導入用
#!/bin/shecho "Dockerインストール"# 参考（<https://docs.docker.com/install/linux/docker-ce/ubuntu/）>sudo apt-get -y remove docker docker-engine docker.io containerd runcsudo 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-commonsudo curl -fsSL <https://download.docker.com/linux/ubuntu/gpg> | sudo apt-key add -sudo apt-key fingerprint 0EBFCD88sudo add-apt-repository "deb [arch=amd64] <https://download.docker.com/linux/ubuntu> $(lsb_release -cs) stable"sudo apt-get -y updatesudo apt-get -y install docker-ce docker-ce-cli containerd.iosudo apt-cache madison docker-ceecho "Dockerデーモン起動"sudo systemctl start dockerecho "Dockerデーモンの自動起動設定の有効化"sudo systemctl enable dockerecho "Docker Composeインストール"# 参考（<https://docs.docker.com/compose/install/）>sudo apt-get -y updatesudo curl -L <https://github.com/docker/compose/releases/download/1.29.2/docker-compose-`uname> -s`-`uname -m` -o /usr/local/bin/docker-composesudo chmod +x /usr/local/bin/docker-composeecho "Docker非sudo対応"sudo groupadd dockersudo systemctl restart dockersudo gpasswd -a $USER dockerecho "inotifyの監視ファイル数上限値を増加させる"echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.confsudo sysctl -pecho "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-busterENV NODE_VERSION 14.18.1ARG HOME_DIR=/home/frontWORKDIR ${HOME_DIR}COPY ./front ${HOME_DIR}EXPOSE 3000# コンテナが勝手に終了してしまわないよう設定ENV CI=trueこれでコンテナを立ち上げてみます。
$ docker-compose build...Successfully tagged sample-react-1_front:latest$ docker-compose up -dCreating network "sample-react-1_default" with the default driverCreating node ... doneコンテナの中に入ってcreate-react-app。
$ docker exec -it node bashroot@97121bf2f357:/home/front# lsroot@97121bf2f357:/home/front# npx create-react-app . --template typescript --use-npm...We suggest that you begin by typing: cd /home/front npm startHappy 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
