DockerでReactの環境作ってみよう
勉強でReactをやるくらいならNode.jsを入れて作ればOKなのですが、実際の開発ではdocker-compose使って開発環境を作ることが多いのでぜひできるようにしましょう！
環境
作成時環境
- Docker Desktop for Windows Version 4.0.0
- Windows10 home
作成した環境
- React 17.0.2
- Node.js 16.9.1
Windowsで作ってますが、Macでも同じ手順で使えると思います。
ソースコード
コピペや確認で使ってください
Dockerfile作成
Node.jsのイメージを使用します。React使うために必要です。
alpineが軽量のLinuxでdockerでよく使用されます。
で、WORKDIRが作業ディレクトリです。
FROM node:16-alpine
WORKDIR /app
docker-compose.yml作成
services:
front:
build: ./react
volumes:
- ./react:/app:cached
command: sh -c "cd react-test && yarn start"
ports:
- "3000:3000"
- front：サービス。コマンドとか打つときに使います。名前つけてる。
- build：使用するイメージがdocker-compose.ymlと同じディレクトリにあるなら必要ないんですけど、今回reactって名前のフォルダの中に入れてますので
./reactと指定。 - volumes：ローカルではreactってフォルダだけど、コンテナの中では
appに設定しているので。これを設定しないとコードなど変更しても何も起こらない - command：
docker-compose upしたときに実行してほしいコマンド。 - port：ローカルの3000番ポート→コンテナの3000番ポートに通してねってこと。
Reactはデフォルトで3000番ポートで起動する設定なのでその設定に合わせてます。
ReactインストールとReactのアプリ作成
以下のコマンド打つとreact作るのに必要なパッケージ全部取ってきてくれます。
結構な量ダウンロードするので時間かかると思います。
$ docker-compose run --rm front sh -c "npm install -g create-react-app && create-react-app react-test"
実はビルド(docker-compose build)必要なんですけど、このコマンド打つと勝手にやってくれてます。
コマンドの説明
docker-compose runというのがDocker-compose upしてない時にコンテナ内で一回だけコマンド実行してほしいときに使うコマンド。
frontというのがdocker-composeに名前を付けたサービス名
実行させたいコマンド本体は
npm install -g create-react-appとcreate-react-app react-testです。
npm install -g create-react-app reactに必要なパッケージをインストールしてくれる。
create-react-app react-testはreactのアプリ作るために最初に色々作ってくれるコマンド。
&&をくっつけることでこの二つを一つずつ実行してくれる。
このコマンドは普通に始めるときと同じです。
↓Reactの公式ページQuickStart
React起動
$ docker-compose up
を実行するとdocker-composeのcommand: sh -c "cd react-test && yarn start"が実行されるので
reactのアプリを開発サーバーで起動させてくれます。
デフォルトの3000番ポートを使うようにしているので以下にアクセスするとReactのマークがぐるぐる回転すると思います。
