Zenn
😽

Cloud Native Buildpack で Nuxt.js が動く Docker コンテナを作る

2020/12/25に公開
tech

きっかけ

Dockerfileのベストプラクティスとセキュリティについて を読んで、 Cloud Native Buildpacks(以下、CNB) の存在を知りました。
とても簡単に Docker コンテナを作っていたので、自分がよく触る Nuxt.js はどうやってやるんだろうと思い試してみました。

事前準備

Docker と Buildpack、 Nuxt.js が必要になります。環境がない場合は、下記を参考にセットアップしてください。

Docker イメージの作成

  1. npx create-nuxt-app で Nuxt.js プロジェクトを作成する

npx create-nuxt-app コマンドを使う事で、Nuxt.js プロジェクトをインタラクション形式で作成できます。

  1. Nuxt.js プロジェクト内で、下記コマンドを実行する
pack build ${作成する Docker イメージ名} --builder gcr.io/buildpacks/builder:v1

builder には、他にも次のものが用意されています。今回は、一番上でオススメされている gcr.io/buildpacks/builder:v1 を使用していきます。

Google:                gcr.io/buildpacks/builder:v1      Ubuntu 18 base image with buildpacks for .NET, Go, Java, Node.js, and Python
Heroku:                heroku/buildpacks:18              heroku-18 base image with buildpacks for Ruby, Java, Node.js, Python, Golang, & PHP
Paketo Buildpacks:     paketobuildpacks/builder:base     Ubuntu bionic base image with buildpacks for Java, .NET Core, NodeJS, Go, Ruby, NGINX and Procfile
Paketo Buildpacks:     paketobuildpacks/builder:full     Ubuntu bionic base image with buildpacks for Java, .NET Core, NodeJS, Go, PHP, Ruby, Apache HTTPD, NGINX and Procfile
Paketo Buildpacks:     paketobuildpacks/builder:tiny     Tiny base image (bionic build image, distroless-like run image) with buildpacks for Java Native Image and Go

Docker コンテナの作成

次は、Docker コンテナを作っていきます。
上記で作成した Docker イメージは、 npm start が実行されます。動作を確認するだけなら問題ないですが、開発をするとホットリロードが効かないです。そのため、package.json の scripts を次のように修正します。
NUXT_HOST=0.0.0.0 を指定しているのは、ホスト側から localhost でアクセスできるようにするためです。(package.json を修正すると間違って commit する危険性があるので、他の方法がある場合は教えてください🙇‍♀️)

- "start": "nuxt-ts start" 
+ "start": "NUXT_HOST=0.0.0.0 nuxt-ts"

あとは、docker run でコンテナを作成すれば Nuxt.js を Docker コンテナ内で開発することができます。

docker run -v ${ディレクトリパス}:/workspace --name nuxt ${作成した Docker イメージ名}

Discussion