HacobuneにNuxt.jsでビルドした成果物をデプロイしたいのでマルチステージビルドしてみる

こちらの続き
https://qiita.com/Yoshihiro-Hirose/items/7a3107fa3b0bd39603fe

概要

• Hacobune はコンテナをデプロイできる
• Nuxt.js のようなフロントエンドフレームワークでビルドしたものをデプロイしたい
  • Next.js など別のものでも応用できるはず
• Dockerfile 内でアプリケーションをビルドすれば実現できそう

対応手順

• 適当な Nuxt.js のプロジェクトを用意
• 以下 Dockerfile を用意する

Dockerfile

FROM node:12
WORKDIR /app
COPY . .
RUN yarn install
RUN yarn generate

FROM nginx
COPY --from=0 /app/dist /usr/share/nginx/html

• 以下 .dockerignore を用意する

.dockerignore

node_modules
.nuxt

• Hacobune でリポジトリを指定
  • デプロイしたサンプル： https://hirosenuxt.c1.hacobuneapp.com/
  • ソールコード: https://github.com/Yoshihiro-Hirose/hacobune-nuxt
    • マルチステージ対応差分: https://github.com/Yoshihiro-Hirose/hacobune-nuxt/commit/2dfe67bd871f8011dc6c735df4a2634a1a00c3c3

やっていること

• Dockerfile 前半でアプリケーションをビルド
  • node:12 を指定
  • ファイルをコンテナにコピーする。その際、node_modules などは除外する(.dockerignore)
  • 一般的な手順でアプリケーションをビルド
• Dockerfile 後半で成果物を Web アプリケーションにまとめる
  • 前半でビルドしたものは dist ディレクトリに出力される
  • COPY でビルドしたコンテナからファイルをコピーしている

参考

• https://qiita.com/tmiyajima/items/b099fb707bfde9337a70
• https://docs.docker.jp/engine/userguide/eng-image/multistage-build.html