LoginSignup
0

More than 1 year has passed since last update.

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

やっていること

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

参考

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
0