HomeAbout me

Nuxt jsのプロジェクトをDockerでデプロイする

Mon Mar 25 2019

Nuxt jsのプロジェクトをDockerでデプロイ

Nuxt jsで作成したプロジェクトを本番環境でデプロイする方法は大きく分けて，

  • Node.jsアプリケーションとしてサーバで実行
  • generateコマンドを利用し，静的ファイルを生成

の2つがあります．

今回は，上のNode.jsアプリケーションとしてサーバで実行の方について書きます．

環境

環境としてはOSはmac，Dockerのバージョンは18.09.2を利用しています．

  • OS macOS Mojave v10.14.2
  • Docker v18.09.2

例題とするプロジェクト

今回は，Nuxt jsプロジェクトの例として，以下のようなディレクトリ構成のプロジェクトを使って解説して行きたいと思います．
なおNuxt jsのバージョンは 2.0です．

# プロジェクトのルート配下
├── README.md
├── node_modules
├── nuxt.config.js
├── package-lock.json
├── package.json
├── src
└── yarn.lock
# srcディレクトリ配下
├── assets
├── components
├── layouts
├── middleware
├── pages
├── plugins
├── static
└── store

Nuxt js特有のディレクトリ類を/src配下に置いてあるのが，人によっては見慣れないかもしれません．

ちなみにソースディレクトリの指定は，nuxt.config.jsで以下のように記述することで設定できます．

module.exports = {
  srcDir: 'src/'
}

Dockerによるデプロイ

本プロジェクトをDockerでデプロイする為にDockerfileを作成します．

まずはプロジェクトのルートにdockerディレクトを作成し，Dockerfileを配置します．

$ mkdir docker
$ touch docker/Dockerfile

Dockerfileの作成

Dockerfileを書く前に指針を決めておきます．

  • ベースイメージにはalpineを用いる．
  • ビルドコンテナと本番環境(プロダクション用のコンテナ)を作成する．

ベースイメージには軽量なことを理由にalpineを用います．
今回は，nodeが予め入っているnode:11.12-alpineをベースイメージに使用します．
またビルド時だけに必要なファイルなどは本番環境には必要ないので，プロジェクトをビルドするコンテナと実際に動かす本番環境用のコンテナ(プロダクション用のコンテナ)の2つを作成します．

コンテナを2つ作成するためにmulti-stage buildsという仕組みを使います．

Dockerfileの中身

Dockerfileの中身です．

# ビルドコンテナ
FROM node:11.12-alpine as builder

WORKDIR /app

# プロジェクトの配置とビルド
ADD . ./
RUN yarn install
RUN yarn build

# プロダクション用のコンテナ
FROM node:11.12-alpine

WORKDIR /app
ENV HOST=0.0.0.0

ADD package.json ./
ADD nuxt.config.js ./

COPY --from=builder ./app/src/static ./src/static/
COPY --from=builder ./app/node_modules ./node_modules/
COPY --from=builder ./app/.nuxt ./.nuxt/

EXPOSE 3000
CMD ["yarn", "start"]

ポイントとしては，FROMが2回登場していることですね．
順番に見ていきます．

# ビルドコンテナ
FROM node:11.12-alpine as builder

WORKDIR /app

# プロジェクトの配置とビルド
ADD . ./
RUN yarn build

ここでは，node:11.12-alpineのイメージを元にbuilderという名前のコンテナを作成しています．
このbuilderは名前の通りプロジェクトをビルドするコンテナです．
まずプロジェクトを配備するディレクトリをWORKDIR命令で指定しています．
今回はコンテナのルート直下にappディレクトリにプロジェクトを起きます．
次にホストマシンにあるプロジェクトADD命令でappディレクトリに配置します．
そしてコンテナ内でyarn buildを実行することでプロジェクトをビルドします．

# プロダクション用のコンテナ
FROM node:11.12-alpine

WORKDIR /app
ENV HOST=0.0.0.0

ADD package.json ./
ADD nuxt.config.js ./

COPY --from=builder ./app/src/static ./src/static/
COPY --from=builder ./app/node_modules ./node_modules/
COPY --from=builder ./app/.nuxt ./.nuxt/

EXPOSE 3000
CMD ["yarn", "start"]

次にプロダクション用のコンテナを作成します．
ベースイメージには同様にnode:11.12-alpineを用います．
こちらも同様にコンテナのルート直下にappディレクトリを作成し，そこにプロジェクトを配置します．

本番環境では，

  • package.json
  • nuxt.config.js
  • src/staticディレクトリ
  • node_modulesディレクトリ
  • .nuxtディレクトリ

を配置します．

そして，yarn startコマンドを実行することでプロジェクトを実行します．

コンテナの作成

では実際にコンテナを作成してみましょう．
今回は，イメージ名my-appで作成します．

# イメージのビルド
$ docker image build -t my-app:latest docker/Dockerfile .
# コンテナの作成
$ docker container run -d -p 3000:3000 my-app:latest

立ち上がったらブラウザでhttp://localhost:3000にアクセスしてみましょう．

tags

Nuxt

Docker

Comments