はじめに
Reactプロジェクトをコンテナを用いてビルドしてみます。
ビルド環境で外部NWにアクセスをしたくない。などの要望に対応する方法となります。
以前の記事でフロントエンドをReact、バックエンドをSpringBootで作成したWebアプリケーションを作成しました。
この構成をそのまま流用して検証していきます。
将来的にはDevOPSに用いるビルド環境をコンテナで構築したいのでその検証になります。
状況の整理
ローカルでReactアプリをビルドする場合は、デフォルトの場合、手元にあるpacakge-lock.json、package.jsonを参照し、node_moduleを生成。依存関係を解決し、ビルドを行います。
これと同じ状況をコンテナに構築してあげればよいということになります。
Reactをコンテナでビルドする
以下手順で進めます。
- dockerfileを作成
- .dockerignoreを作成
- コンテナイメージを作成
- コンテナ起動（ビルドするだけなら本来不要）
それぞれ、プロジェクトのルートパスに作成します。
dockerfile作成
Reactプロジェクトのビルド時、外部NWに接続したくないので事前にnode_modulesをコンテナ内に用意。
依存関係が壊れないようにpackage-lock.jsonをコンテナに含めます。
# Node.jsのコンテナ
FROM node:18-alpine AS build
# 作業ディレクトリを設定
WORKDIR /app
# 事前にローカルのpackage-lock.jsonをコピー
COPY package-lock.json package-lock.json ./
# node_modulesをコンテナビルド時に作成
RUN npm install
# ソースコードをコピー（CI/CDの時はパイプラインでコピーするので不要）
COPY ./ ./
# ビルド
RUN npm run build
# `serve` パッケージをインストール（検証用に用意するサーバー）
RUN npm install -g serve
# 検証用にサーバを起動
CMD ["serve", "-s", "dist", "-l", "3000"]
.dockerignore作成
コンテナ起動時にコピーする必要がないものは.dockerignoreに追加
dist
node_modules
コンテナビルド
docker build -t front-build-container .
コンテナ起動
検証用にビルドしたモジュールをserveポート3000で実行
docker run -p 3000:3000 --name front-app front-build-container
動作確認
localhost:3000にアクセスします
問題なし！
おわりに
今回は検証用に、ビルド環境以外のものもコンテナに含めていますが、適宜要否を判断してください。
今回でいうところのソースのコピーや、serveのインストール、実行はCI/CDパイプラインの構築時には不要となってきます。（構成にもよりますが）
今まではコンテナの理解があやふやでしたが、直近で手を動かしながらの動作検証を行うことで理解度がとても高まっています。
今後Kubernetesの検証をしていきたいので、助走をつけられている気がします。