dockerでReact環境を構築

はじめに

今まではFlaskのJinja2を使って、簡単のwebページを書いてたが、流石にフロントエンドで使用されているフレームワークReactやVueなどを使えないとやばいと思い、勉強していく。
今回はReactを使ってみたので、環境構築の備忘録。
(ReactとVue両方使えるようになりたい…)

TL;DR

Dockerとdocker-composeでのReact環境の構築手順です。
初心者なので、かなり初歩的な内容で他の方が執筆なさった記事を参考にしています。

前提環境

pc: MacBookPro(2017)
os: Big Sur
Homebrew 3.4.10
Docker version 20.10.13
docker-compose version 1.29.2

Homebrew~docker-composeのインストールはdocker+poetryでpythonを使うの序盤に書いています。

作業ディレクトリ作成

下記のコマンドで作業をするディレクトリを作成します。

$ mkdir reactApp

Dockerfileとdocker-compose.yamlも空で良いので作成しておきます。作成コマンド例touch Dockerfile。
今回の例では下記のような構成となります。

構成

$ tree
.
├── Dockerfile
├── docker-compose.yaml
└── reactApp

環境手順

Dockerfileの作成

下記の内容をDockerfileに書き込みます。

NodeJs環境のDockerfile

FROM node:16.15.0-alpine
WORKDIR /usr/src/app

NodeJsのバージョンを公式サイトで確認します。その後に、該当のバージョンをDockerHubのnodeリポジトリで探します。

私が確認した時はNodeJs 16.15.0がLTSだったので、nodeイメージはnode:16.15.0-alpineを使用します。

docker-compose.yamlの作成

docker-compose.yaml

version: '3.9'
services:
  react-app:
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - ./reactApp:/usr/src/app # ローカルをコンテナ内にマウント
    command: sh -c "cd react-sample && yarn start"
    ports:
      - "3000:3000"
    stdin_open: true 

コンテナとReactプロジェクト作成

下記のdocker-composeコマンドでコンテナを起動します。

コンテナ起動

$ docker-compose build

次のコマンドでプロジェクトを作成。(npmとyarnではどちらが良いのかは未調査。)
--template typescriptオプションを付けるとtypescriptをインストールできます。

プロジェクト作成

$ docker-compose run --rm react-app sh -c "npm install -g create-react-app && create-react-app react-sample (--template typescript)"
...
Success! Created react-sample at /usr/src/app/react-sample
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd react-sample
  npm start

Happy hacking!

上記のような成功メッセージが完了されればOKです。

コンテナ起動

下記のコマンドでコンテナ起動します。オプションで-dを付けるとバックグランドで動作します。

build container

$ docker-compose up (-d)

-dオプションを付けない場合は別のターミナルなどで次のコマンドを実行してログを見てみます。

display log

$ docker compose logs -f

下記のようなメッセージが表示されたらhttp://localhost:3000にブラウザからアクセスします。Reactの画面が表示されるはずです。

docker-compose log

react-app_1  | Compiled successfully!
react-app_1  |
react-app_1  | You can now view react-sample in the browser.
react-app_1  |
react-app_1  |   Local:            http://localhost:3000
react-app_1  |   On Your Network:  http://172.19.0.2:3000
react-app_1  |
react-app_1  | Note that the development build is not optimized.
react-app_1  | To create a production build, use npm run build.
react-app_1  |
react-app_1  | webpack compiled successfully
react-app_1  | No issues found.

その他

ブラウザで表示された画面を変更したい場合は/reactApp/react-sample/src/App.tsxを修正します。
今回はTypeScriptをインストールしたのでApp.tsxというファイル名ですが--template typescriptを付けない場合はApp.jsとなります。

参考

• NodeJs
• DockerHub - node
• 5分で始めるReact with Docker
• 【React】Docker Composeで開発環境を構築

最後に

フロントエンドをReact(またはVue)、バックエンドをFlask(またはFast API)で実装したアプリ開発を検討中。seleniumもなんとかして使いたいので、アプリ内容を検討中。