DockerでReact.js環境を構築したいんだけど、手順を解説してほしい
今回はそんな疑問に回答します。
この記事を読んでいただければ、DockerでReact.js環境を構築することができます。
なぜこの記事を書いたのか
この記事を書いた理由は、おもに2つです。
- 人気のフレームワークであるReact.jsの環境構築を方法をまとめておきたかったため
- 「Dockerfile と docker-compose.ymlを一から作成してビルドする」という一連の流れを確認するため
環境構築完了（ゴール）の確認
この記事のゴールは、以下のようにReactのページが起動することとします。
環境構築の手順
手順１）Docker、nodeのインストール
手順２）Dockerfile、docker-compose.ymlの作成
手順３）ビルド
手順４）Reactアプリの作成
手順５）コンテナの実行
手順１：Docker、nodeのインストール
- Dockerのインストール
下記からDockerをインストールします。
Dockerはコンテナ型の仮想環境です。
Dockerをインストールして、Dockerの環境の中で開発をすることになります。
- Node.jsのインストール
Dockerで環境構築したり、ライブラリをインストールするためにNode.jsのインストールが必要です。
手順２：Dockerfile、docker-compose.ymlの作成
docker-react-app（プロジェクトフォルダ） └┬─ Dockerfile └─ docker-compose.yml
上記のフォルダ構成を参考に、ファイルを作成します。
「docker-react-app」というフォルダを作成し、その直下に「Dockerfile」「docker-compose.yml」という名称で新規ファイルを作成すればOKです。
FROM node:14.17.5
WORKDIR /usr/src/app/ターミナルで「node -v」コマンドを実行することで、Node.jsのバージョンを確認できます。
Dockerfileに記載するNode.jsのバージョンは「FROM node:○○.○○.○」という形で指定します。
version: '3'
services:
node:
build:
context: .
tty: true
environment:
- NODE_ENV=development
volumes:
- ./:/usr/src/app
command: sh -c "cd reactapp && npm start"
ports:
- "3000:3000"手順３：ビルド
「手順３：ビルド」「手順４：Reactアプリの作成」「手順５：コンテナの実行」で実行する「docker-compose」コマンドは、Dockerfileが存在するディレクトリで実行する必要があります。ターミナルにて「cd docker-react-app」コマンドを実行してカレントディレクトリを指定しておく必要があります。
このコマンドを実行してビルドします。
docker-compose build
buildコマンドはimageを作成するコマンドです。コンテナは作成しません。
手順４：Reactアプリの作成
docker-compose run --rm node sh -c "npm install -g create-react-app && create-react-app reactapp"上記「手順１：Docker、nodeのインストール」でNode.jsをインストールしていれば「npm install -g create-react-app && create-react-app reactapp」が実行され、Reactがインストールされます。
手順５：コンテナの実行
docker-compose upここまで完了したらWebブラウザで http://localhost:3000 へアクセスします。以下のようにReactのページが起動すれば環境構築完了となります。
まとめ
Dockerを使用したReact.jsの環境構築手順は、理解していただけたでしょうか。
解説は以上となります。
コメント