Reactの勉強のついでにDockerで環境構築もしたので共有
実行環境
Docker Desktop 24.0.2
MacOS 14.1.1
React 18.2.0
必要なファイルを作成
今回必要になるのは、Dockerfile, .dockerignore, docker-compose.ymlの３つ。
touchコマンドでファイル名を波括弧でくくると、複数ファイルが同時に作れるのは知らなかった。。。
touch {Dockerfile,.dockerignore,docker-compose.yml}
Dockerfile
まずはDockerFileを作成します。これが無いとどうにもならん。
今回はステージ1と2に分けてマルチステージビルドしています。
不必要なファイルを排除して、イメージサイズを軽量化するためです。
# Stage1
# dockerhubを参照して、最新のnodeのイメージを使用。ステージ2ではbuilderという名前で使用する。
FROM node:21-alpine AS builder
# 後続のコマンドが実行されるディレクトリをコンテナ内の/appに設定
WORKDIR /app
# ローカルのpackage.jsonとpackage-lock.jsonをコンテナの作業ディレクトリにコピー
COPY package.json package-lock.json ./
# Node.jsのOpenSSL関連の問題を回避するための環境変数を設定。
# 詳細→https://builtin.com/software-engineering-perspectives/err-ossl-evp-unsupported
ENV NODE_OPTIONS=--openssl-legacy-provider
# package.jsonに定義された依存関係をインストール
RUN npm install
# 全てのソースコードをコンテナ内にコピー
COPY . ./
# アプリケーションのビルド
RUN npm run build
# Stage2
FROM nginx:alpine
# ステージ1でビルドしたソースをNginxのディレクトリにコピー
COPY --from=builder /app/build /usr/share/nginx/html
# listenするポートを設定
EXPOSE 80
# Nginx起動
CMD ["nginx", "-g", "daemon off;"]
.dockerignore
不要なファイルがdockerイメージに含まれないよう、以下のディレクトリとファイルを指定する。
node_modules
build
.git
.env
Dockerイメージのビルド
ターミナルで以下のコマンドを実行して、イメージをビルドする。
docker build -t test-react-app .
Dockerコンテナの実行
以下のコマンドを実行してコンテナを実行する。
今回は、ローカルの8080ポートをコンテナの80ポートにマッピングしています。
docker run -p 8080:80 test-react-app
いざ確認！
localhost:8080にアクセスすれば、アプリの稼働確認ができるはず。
私のはこんな感じ。(openweathermapというAPIを使って天気予報アプリを作っている途中)
