Angular で作った SPA を Docker の nginx を使って動かす

このサイトにある手順をまるっと使わせていただきました。

medium.com

追加したのは以下の3ファイル

.dockerignore

node_modules

nginx.conf

server {
  listen 80;
  location / {
    root /usr/share/nginx/html;
    index index.html index.htm;
    try_files $uri $uri/ /index.html =404;
  }

  error_page   500 502 503 504  /50x.html;
  location = /50x.html {
    root   /usr/share/nginx/html;
  }
}

Dockerfile

FROM node as build-stage
WORKDIR /app
COPY package*.json /app/
RUN npm install
COPY ./ /app/
ARG configuration=production
RUN npm run build -- --output-path=./dist/out --configuration $configuration

FROM nginx
COPY ./nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=build-stage /app/dist/out/ /usr/share/nginx/html

以下の手順でビルド & 公開

$ docker build -t <IMAGE_TAG> .
$ docker run -p 8080:80 <IMAGE_TAG>

これで localhost:8080 でアクセスできる。

一般公開だったら Firebase Hosting とかで良いのですが、今回は社内イントラ内での公開だったのでこのようにしました。