前提条件
今回はDocker上にReactの開発環境構築を行います。Dockerの環境構築手順は以下の記事を参考にしてください。
Docker環境構築：Windows+Virtualbox+Vagrant+Ubuntu上にDocker開発環境構築
※上記記事ではWindowsのVirtualbox上にDocker環境を構築していますが、Windowsではない場合やWSLを使ったDocker環境でも構いません。
全般的な注意点
- 本記事のコマンド実行例の行先頭の「>」「$」「#」はプロンプト記号なので入力時は不要。
- 本記事のコマンド実行例の行末にコメントを入れている場合があるが、コピペする際はコメント部分は含まないように注意。
React環境構築手順
1.Dockerfile作成＆Dockerイメージ作成
Ubuntu上でDockerfileを作成していく
$ cd ~
$ mkdir react
$ cd react
$ vi Dockerfile
※今回はReact環境なので「react」ディレクトリを作成し、その下にDockerfileを配置します。
※上記はコマンドで操作していますが、GUIで操作してもOK。
次のようにDockerfileを記述。今回はfirebaseもnpmインストールしている例を書いているが、使わない場合は不要。
FROM node:16-alpine3.13
WORKDIR /app
RUN npm install -g create-react-app
RUN npm install --save react-router-dom
RUN npm install --save prop-types
RUN npm install -g firebase (←firebaseも使いたいので記述)
RUN npm install -g firebase-tools (←firebaseCLI)
※firebase,firebase-toolsの２行はfirebaseを使用しない場合は不要です。
Dockerfileの置いてあるディレクトリで、以下のコマンドを実行
$ docker build -t sample-react-image . (←最後の「.」を忘れずに。カレントディレクトリを指定している)
Dockerイメージが「sample-react-image」という名前で生成される。
docker-composeコマンドを使っても可能だが、その場合はdocker-compose.ymlに追加の記述が必要。
2.docker-compose.yml作成＆Dockerコンテナ起動
Dockerfileと同じ場所にdocker-compose.ymlを作成する
version: '3'
services:
sample-react:
container_name: sample-react-container
image: sample-react-image (←先ほど作成したイメージ名と合わせる)
command: sh -c "cd react-sample && yarn start"
ports:
- "3000:3000" （←Reactのデフォルトサーバで使われる3000ポートを開けておく）
volumes:
- ./app:/app （←カレントディレクトリ直下のappディレクトリと、Reactコンテナの/appを関連づける）
※Dockerfileとdocker-compose.ymlは、WinSCPやVSCode Remote Developmentで接続して編集しても構わない。
※image行でイメージを指定せずに、build行を記述すると、docker-composeコマンドでイメージの作成をすることもできる。
docker-compose.ymlのあるディレクトリで以下のコマンドを実行
$ docker-compose run --rm sample-react sh -c "create-react-app react-sample"
→これでReactプロジェクトが作成される。appディレクトリの下にreact-sampleディレクトリが出来上がり、その下にpackage.json等が生成されていることを確認。
Ubuntu上のrootユーザでディレクトリが作成されているので、今後ファイル編集をvagrantユーザでできるように、vagrantユーザに権限を変える。
$ sudo chown -R vagrant:docker app
続けてdocker-compose.ymlのあるディレクトリで以下のコマンドを実行
$ docker-compose up -d
※ただしこの場合も、Docker内のコマンドで作成されたファイルはrootユーザが所有者になってしまい、ホスト側(Vagrant側)で編集ができないので注意が必要。
3.React初期画面を表示
Windowsから、ブラウザで
http://192.168.33.10:3000
にアクセス
Reactのデフォルト初期画面が表示されたらOK
※docker-compose.ymlに記載しているyarn startコマンドがしばらく時間がかかるので、少し待ってからアクセス。
その他
docker-compose.ymlでbuild項目を設定する際の記述
version: '3'
services:
sample-react:
〜省略〜
build:
context: . (←Dockerfileの場所を指定)
dockerfile: Dockerfile (←Dockerfileの名前(今回はDockerfileでOK)を指定)
その場合、以下のdocker-composeコマンドでbuildする。
$ docker-compose build
npmパッケージを追加する場合
npmで何かパッケージをインストールしたい場合は、グローバルにインストールしたいものはDockerfile、プロジェクト単位でインストールしたいものはpackage.jsonという使い分けが良いと思う。
Dockerfileを変更した場合は、再度docker buildコマンドを実行し、イメージを更新する。
npmコマンドでインストールする場合は、以下のコマンドでインストールする。
docker exec -it sample-react-container sh -c "npm install {package}"
