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のデフォルトページが出れば完成!