ローカルのnuxt開発環境をサクッとdockerで公開したい

全然サクッと公開できなかった・・・

開発環境で色々作っているnuxtのプロジェクト、普段はyarn devやnpm run devで開発・確認をしていますが、お客サンからの一言「どっかサーバーに上げて見れるようにしてくれない？」と。

ここで考えられる対応方法はいくつかあります。

・ビルドしてdist/ フォルダをS3やgithub経由でnetlifyとかにアップする。
　簡単。S3やgithub,netlifyの設定が必要。
　変更のたびにビルド→再アップが必要。

・開発サーバーを放置していいなら、直接 yarn serve(nuxt start)する
　一番簡単、ただしnuxt startをデーモンとして動かないので、サービス化するのに一手間必要。

・dockerコンテナをawsのec2上などに展開する。
　サービス化できるので放置できる。gitと連携しておけば、ファイル更新があってもpullしてコンテナ内で再ビルドできる。

楽なのは、ビルド済みのファイルをS3やnetlifyなどの静的ファイル公開サービスへデプロイする方法です。
ただ、今回セキュリティの事情で、ec2上に乗せる必要がありました。

dockerでnuxtプロジェクトを公開する方法は主に2つありまして

・nginxコンテナでdistフォルダを公開する（一般的）
　本番系に近い方法、SPAの設定が必要。
　https://ja.nuxtjs.org/faq/nginx-proxy/

　こちらも、ソース変更のたびに再ビルドが必要です。

・nodeコンテナで直接 yarn serve（旧 yarn start）する。
　↑今回やる方法

今回、nodeコンテナで公開する方法を使ってみました。
dockerを配置するフォルダと、nuxtのフォルダが別の場所にある場合はひと工夫必要でした。

docker-compose

docker-compose.yml

services:
  node:
    tty: true
    build: ./dockerFileのあるディレクトリ
    volumes:
      - ../../nuxtプロジェクトのフォルダ:/app:delegated
    ports:
      - "80:3000"
    command: ash -c "yarn && yarn build&& yarn export && yarn serve"

Docker-file

FROM node:current as node

WORKDIR /app

ENV NUXT_TELEMETRY_DISABLED 1
ENV HOST 0.0.0.0
ENV PORT 3000

ENV NUXT_TELEMETRY_DISABLED 1が無いと、build時に止まってしまう

ハマったポイント

docker-composeのvolumesフォルダは、ビルド中には見ることができない。。。
COPYコマンドで親ファイルからソースを持ってくることができない・・・
なので、コンテナを起動してからyarn install,build系のコマンドを叩くようにする必要がありました。

https://crieit.net/posts/docker-build-volume
https://qiita.com/mk-tool/items/1c7e4929055bb3b7aeda
https://qiita.com/katoosky/items/bd24905bca20afdfe745

参考資料

https://jp.vuejs.org/v2/cookbook/dockerize-vuejs-app.html
https://qiita.com/art_porokyu/items/8363334c358c67adb61a
https://qiita.com/tmiyajima/items/b099fb707bfde9337a70