nginxでvue.jsでビルドしたファイルを配信する

vue.jsのビルド環境

nginxで配信するvueファイルをDockerで準備します。

例えばこんな感じで用意します。

FROM node:lts-alpine

WORKDIR /app

RUN apk update && \
    npm install -g @vue/cli

EXPOSE 8080

コンテナ内でvueのプロジェクトの初期化

vue createというコマンドが今風のようです Creating a Project | Vue CLI

docker-composeの設定

docker-composeも記載します(frontというフォルダにvueのファイルが入っている）

version: "3"
services:
  vue:
    build:
      context: ./
      dockerfile: ./docker/vue/Dockerfile
    volumes:
      - "./front:/app"
    ports: 
      - "8080:8080"
    tty: true

vueのコンテナ内でビルドします

yarn build

そうするとdistというフォルダにビルドの成果物ができます。

nginx

FROM nginx:1.17.8-alpine

EXPOSE 80

Dockerfile用意しましたが、特に何も書いていません。
直接docker-composeに書いてもいいとも思います。

次にnginxのdocker-compose

  nginx:
    build:
      context: ./
      dockerfile: ./docker/nginx/Dockerfile
    volumes:
      - "./docker/nginx/conf:/etc/nginx/conf.d"
      - "./front/dist:/var/www"
    ports: 
      - "80:80"

先程のfrontコンテナで作った（ビルドした）distフォルダをnginxコンテナにマウントしています。
このファイルを配信したい。

次にnginxのconfファイル

server {
    listen       80;
    server_name  localhost;

    location / {
        root   /var/www;
        index  index.html index.htm;
    }
}

docker-composeの設定に合わせ、/var/wwwに配置しています。

docker-compose up -d

でnginxを起動し、localhost:80にアクセスしてvue.jsのデフォルトページが出れば完成！