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に書き込みます。
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の作成
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を付けるとバックグランドで動作します。
$ docker-compose up (-d)
-dオプションを付けない場合は別のターミナルなどで次のコマンドを実行してログを見てみます。
$ docker compose logs -f
下記のようなメッセージが表示されたらhttp://localhost:3000にブラウザからアクセスします。Reactの画面が表示されるはずです。
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となります。
参考
最後に
フロントエンドをReact(またはVue)、バックエンドをFlask(またはFast API)で実装したアプリ開発を検討中。seleniumもなんとかして使いたいので、アプリ内容を検討中。
Discussion
kichiさん、はじめまして。
わかりやすい記事、ありがとうございます。
わたしは3000番のポートを他で使っているので、Reactのプロジェクトで使うポート番号を3000番から変更したいのですが、いろいろ他の記事をみながらいじっているものの、エラーとなってしまいます。
どのようにしたらいいのかアドバイスいただけると幸いです。
とっちゃんさん、コメントありがとうございます。
ポート変更ですが、複数あるようです。
(1)スタート時に指定、(2)設定ファイルで指定の2通りのを試し、ポートを変更できました。
dockerを使用している場合は、使用ポートの設定も必要です。
(本記事では、docker-composeのport設定)
(1)の場合は以下のコマンドで起動しました。
(2)の場合はpackage.jsonで以下の設定を行い、
yarn startで起動します。起動時のコンソール出力は以下の記載となります。
[参考]
kichiさん、ご丁寧にありがとうございます。
お知らせ頂いた方法の(2)の方法でうまくいきました。
ポート番号について調べても調べても「これっ!」というものがなく、困っておりましたので大変助かりました。本当にありがとうございます
丁寧でわかりやすい記事でした。
お陰でかなりスムーズにコンテナ環境でReactアプリが実行できました。
ありがとうございました。
RyRyさん、返信遅くなりました。
コメントいただき、ありがとうございます！
すこしでもお役に立てたなら、よかったです！