DockerとNginxでVue.jsサービス構築

はじめに

DockerでNginxを作成する際にproxy_passは効かないで502 Bad GateWayエラーになる場合があります。
502エラーのときは、proxy_passのIPが正しくない可能性が高いです。

DockerFile

Vue.jsのソースをビルドして、nginxの/var/www/htmlディレクトリにコピーします。

# ビルド環境
FROM node:lts-alpine as build-stage

WORKDIR /app

# package.json, package-lock.jsonをコピー
COPY package*.json ./

# モジュールのインストール
RUN npm install

COPY . .

# ビルド
RUN npm run build

# 本番環境
FROM nginx:stable-alpine as production-stage

COPY --from=build-stage /app/dist /var/www/html

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

vue.js向けのnginxのconf概要

    root /var/www/html;
    index index.html;
    charset utf-8;

    ## ヘッダーの項目の名前には「_」が使えるように設定
    underscores_in_headers on;

    # /apiのURLだったら、3001のポートに転送
    location /api {
      # Dockerの場合、nginxコンテナ外のサービスをproxyしたい場合、localhostはNGです。
      # proxy_pass http://localhost:3001/api;

      # hostサーバのIPを指定
      proxy_pass http://HostIP:3001/api;

      # カスタムヘッダー項目を設定
      proxy_set_header X-my_custom_header_field $http_x_my_custom_header_field;
    }

    # vue.jsのURL
    location / {
      # 404エラーの回避策
      try_files $uri $uri/ /index.html;

      # CSS,JSファイルはtext/htmlに誤認識されないように設定
      include /etc/nginx/mime.types;
    }

nginx: http://nginx.org/en/docs/http/ngx_http_core_module.html#underscores_in_headers
vue.js docker化： https://jp.vuejs.org/v2/cookbook/dockerize-vuejs-app.html

以上