ReactをDocker上のNginxで動かす

はじめに

Create React Appで作成したプロジェクトのビルドファイルをDocker上のNginxで動かします。
ReactのビルドとNginxへの配置は一つのDockerfileでマルチステージビルドして行います。

Dockerfileの書き方

ARG APP_HOME=/home/node/app

# build stage
FROM node:14.17 as build
WORKDIR ${APP_HOME}

COPY . ${APP_HOME}
RUN yarn install
RUN yarn build

# deploy stage
FROM nginx:alpine
COPY --from=build ${APP_HOME}/build /var/www
COPY ./nginx /etc/nginx/conf.d/

WORKDIR /usr/share/nginx/html
CMD ["nginx", "-g", "daemon off;"]

基本的にそんな難しいことはしてないですが、
Reactに関しては、ホストのファイル（/src、/public、package.jsonなど）をコピーしてyarn installとyarn buildするだけです。
yarn buildすることで/buildにビルドされたファイルができあがります。

Nginxについて

Nginxについては上記のDockerflieにもあるようにマルチステージビルドで、Reactでビルドされたファイルを配信先のディレクトリにコピーして立ち上げるだけです。
マルチステージビルドについてはこちらをご覧ください。
https://docs.docker.com/develop/develop-images/multistage-build/

Nginxで立ち上げる際に一点注意があります。
デフォルトのNginxの設定だと、/でなく、/sample/などでアクセスしよとすると404エラーになってしまいます。
そこで設定ファイルを書き換えます。
/nginx/default.confというファイルを以下のように作成します。

server {
    listen       80;

    location / {
        root   /var/www;
        index  index.html index.htm;
        try_files $uri /index.html;
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

ここで作成した設定ファイルは上記Dockerfileの

COPY ./nginx /etc/nginx/conf.d/

の部分でコピーしてコンテナのNginxの設定を書き換えています。

以上でCreate React Appで作成したプロジェクトのビルドファイルをDocker上のNginxで動くようになったと思います。

最後に

こちらを実際に動かすときはDockerコマンドでもいいですが、以下のようなdocker-compose.ymlを作成してビルドしてあげてもいいと思います。

version: "3.9"
services:
  front:
    build:
      context: .
      dockerfile: Dockerfile
    tty: true
    ports:
      - "80:80"