ローカルの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
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