Docker✖️Reactの環境構築
はじめに
こちらに移行しました🙇
バックエンドにSpringBoot3(REST API)フロントエンドにReactを使用してWebアプリケーションを作っていきます。
勉強も兼ねて記録に残したいと思いますので誰かの役に立てば嬉しいです😊
今記事の目標
前回はDockerComposeを使用して実際にSpringBootを起動するところまで実施しました。
今回はReactを動かすDockerfileとdocker-compose.ymlを作成していきたいと思います。
今回からはフロントエンドの環境構築をしていきます。
環境について
- react 18.2.0
- Typescript 4.9.5
- Node.js 21
- macOS Sonoma 14.1.1
- Docker Desktop 4.18.0
Dockerfileを作成する
プロジェクトフォルダを作成する
今回作業していくフォルダを作成します。
私の場合は~/develop配下で作業をしていきたいので以下のようにしてプロジェクトフォルダを作成し、プロジェクトフォルダ配下に移動します。
% mkdir ~/develop/share-favplace-front
% cd ~/develop/share-favplace-front
プロジェクトフォルダ配下にDockerfileを作成する
下記コマンドでDockerfileを作成します。
share-favplace-front % touch Dockerfile
Dockerfileの編集
Dockerfileを編集していきます。
FROM node:20-alpine
ARG WORKDIR
ENV HOME=/${WORKDIR} \
LANG=C.UTF-8 \
TZ=Asia/Tokyo \
HOST=0.0.0.0 \
WORKDIR ${HOME}
FROM <ベースイメージ>
使用するイメージを指定します。今回はnode:21-bullseye-slimのイメージを指定しています。
ARG <変数名>
Dockerfile内で使用する変数名を指定します。
「docker-compose.yml」内のargsでセットした値がここに入ります。
ENV <変数名=値>
Dockerイメージで使用する環境変数を指定します。
ENVを使って設定した環境変数は、イメージからコンテナへ渡されます。
コンテナへ渡されると、コンテナ内で起動したアプリケーションで参照することができます。
WORKDIR <ディレクトリパス>
コンテナ内の作業ディレクトリを指定します。
COPY <ローカルのファイルパス> <Dockerのファイルパス>
ローカルファイル（自分のPC上にあるファイル）をDcoker環境にコピーする命令です。
COPY. ./
カレントフォルダ（Dockerfileがあるフォルダ）配下をDocker環境のWORKDIR(/app)配下にコピーするという命令になります。
./はWORKDIRからの相対パスを指定しており、絶対パスの/appと記述するのと同じことです。
docker-compose.ymlを作成する
下記コマンドでdocker-compose.ymlを作成します。
share-favplace-front % touch docker-compose.yml
docker-compose.ymlの編集
docker-compose.ymlを編集していきます。
version: "3.9"
services:
front:
build:
context: .
args:
WORKDIR: ${WORKDIR}
container_name: share-favplace-front
env_file:
- ./environment/react-app-variables.env
command: npm run start
volumes:
- .:/${WORKDIR}
ports:
- "${FRONT_PORT}:${FRONT_PORT}"
今回は1つのコンテナを作成します。
front
Reactを動かすフロント用のコンテナです。
項目説明
それぞれの項目の詳細については以下を参照してください。
.envファイルを作成する
docker-compose.ymlで参照している環境変数を登録していきます。
下記コマンドで.envを作成します。
share-favplace-front % touch .env
.envの編集
WORKDIR=app
FRONT_PORT=3000
API_PORT=8080
以上で、Reactを起動するための環境構築は完了です。
まとめ
今回はReactを起動するためのDockerfileとdocker-compose.ymlを作成しました。
次回はDocker環境にReactプロジェクトを作成し、起動していきたいと思います。
Discussion