【React】Docker Composeで開発環境を構築

Dockerは事前にMacにインストールされていることを前提とします。

環境構築でやりたいこと

• Macのローカル環境ではなく、Dockerを使ってReactを立ち上げたい
• デフォルトのポート3000でなく、他のポート番号を使いたい
• TypeScriptを入れたい

フォルダとファイルの用意

最初にプロジェクトを生成するのに必要なフォルダとファイルを作成します。codeコマンドはエディタのVSCodeを立ち上げるコマンドです。codeが使えない場合は、GUIからエディタを開いてください。

❯ mkdir react-app
❯ cd react-app
❯ touch {Dockerfile,docker-compose.yml}
❯ code .

Node.jsのバージョンを確認

Node.jsを利用するため、利用するバージョンを見てみます。色々あるバージョンの中でも、公式サイトを見て推奨版であるLTSを確認します。LTSとはLong-term Supportの略で、長期の保守運用が約束されたバージョンです。

DockerHubを確認

Node.jsのimageは、DockerHubから探します。DockerHubとは、ユーザーが作成したコンテナをアップロードして公開・共有できるサービスです。その中でも、Dockerのコンテナ用によく使われる軽量LinuxディストリビューションのAlpine Linuxを使います。

今回は、node:14.17.1-alpineを使うことにします。

Dockerfileの作成

Dockerfileとは、Dockerイメージを作成するための一連の手順が含まれたファイルです。

FROM node:14.17.1-alpine
WORKDIR /src

docker-compose.ymlの作成

Docker Composeは複数のコンテナをまとめて管理するためのツールです。単体のコンテナだけであれば、Docker Composeは不要ですが、今後複数のコンテナを管理したいケースを想定して、docker compose upで起動出来るようにします。

version: '3.8'
services:
 react-app:
   build:
     context: .
     dockerfile: Dockerfile
   volumes:
     - ./:/src
   command: sh -c "cd app && PORT=3001 yarn start"
   ports:
     - "3001:3001"
   stdin_open: true

この時、portsは3000ではなく、3001を指定します。そして、yarn startのコマンドにPORT=3001を与えてDockerを起動した時に自動的に3001で起動できるようにします。

Reactプロジェクトの生成

--template typescriptを指定することで、TypeScriptを入れることができます。

❯ docker compose build
❯ docker compose run --rm react-app sh -c "yarn global add create-react-app && create-react-app app --template typescript"

Dockerの起動

Dockerをバックグラウンドで起動して、起動直後にログを見てみます。

❯ docker compose up -d
❯ docker compose logs -f

以下のログが出たらブラウザからhttp://localhost:3001にアクセスします。

react-app_1  | Compiled successfully!
react-app_1  | 
react-app_1  | You can now view app in the browser.
react-app_1  | 
react-app_1  |   Local:            http://localhost:3001
react-app_1  |   On Your Network:  http://192.168.0.2:3001
react-app_1  | 
react-app_1  | Note that the development build is not optimized.
react-app_1  | To create a production build, use yarn build.

Reactが起動できました。