Docker内のNuxt.jsサイトを公開する

konno kiyotaka

Docker内に構築したNuxt.jsのサイトを公開する、条件として、公開サイトもDockerで構築し、かつ、ソースはボリューム機能でDocker外と共有とする。無料で。
なかなかハードルが高かったですが、できました！

Docker環境をどこに公開するか

無料公開と考えた場合に、1年の期間制限のAWSは対象から外します。そして、本サイト自体がGCEで立っているので、一旦それも除外。そこで検討したのが、Azureです。

Azure App Service

Azureでは、素のApp Serviceは無料プランがあります。

App Service の価格
https://azure.microsoft.com/ja-jp/pricing/details/app-service/windows/

この素のサービスはPaaSなので、Dockerをインストールして環境構築するということはできません。これと連携してコンテナを読み込む、Web App for Containersというサービスがありますが、これは無料プランでは利用できません。さらに、通常であれば利用を検討すべきContainer InstancesとかAKS（Azure Kubernetes Service）というものもありますが、これらも有料プランのみです。

色々苦労した挙句、無料でDockerコンテナを立ち上げるのは無理ということで、あきらめました。

Heroku

Herokuでもコンテナを読み込んでリリースする機能が提供されています。
https://devcenter.heroku.com/articles/container-registry-and-runtime

これは無料で使えるプランもあるのですが、Volumeはサポートされていません。

なぜVolumeを使いたいかというと、ローカルの開発環境もDockerで構築したい、それと同一の環境をリリース環境に持っていきたい、ただ開発ツールはクライアントに持つことになるのでソースはローカルに持ちたい、そのソースをコミットすることでリリース環境にも反映したい、という理由です。
そういう意味で、最近話題の、VSCodeのRemote Development機能
https://crieit.net/posts/VSCode-Remote-Development
開発ツールをローカルに持ちつつソースはローカルに持つ必要がないという意味ですごいと思うのですが、複数人開発と考えた時にはどうなんだろうとも思ったりします。

さくらArukas

https://arukas.io/

今回試しませんでしたが、これもHerokuと同様、Volumeはサポートされません。ただ、無料プランが提供されているのは発見でした。

GCE（Google Compute Engine）

結局VMをそのまま使わせてもらえる環境でなければ今回の条件には合わない、と理解し、そうなると使えるのはGCEしかないのでは、という結論になりました。すでにDocker立てているわけですが、そこはDocker。複数立てることもできるわけです。ということで、もう一つDocker環境を立てることにしました。

公開用Docker構築

前回

タイタニックアプリを作ろう（Nuxt.js 開発環境の基本）

ここではなるべくシンプルなDockerファイルを目指して設定をしましたが、これはDockerをUpした後にサービスを起動しなければならないということです。
そうではなく、Upと共にNuxtサービスも立ち上げるということで試行錯誤しました。

まず、最初はDocker Build、あるいはUpでのエラー。
ERROR: Service ‘app’ failed to build: containerd-shim not installed on system

DokerファイルをいじるとBuildだけはできたりして、大いに悩みましたが、最終的には、VMリスタートで解消。時間を返せ・・・
再起動したらしたで、既存のDocker＝本サイトが立ち上がらないという問題発生！原因は、先にApaheが起動していてポート80を取られていたため。サービスを落として再度実行により問題解消。かなりの時間を費やして、やっと本題。

最終的には下記のサイトを大いに参考にさせていただきました。

dockerでnuxt.jsの環境を作ってみる
https://qiita.com/reflet/items/e7c33f84ab43ab237ee4

Dockerfile

FROM node:12.1.0-alpine
WORKDIR /app
RUN npm install --global @vue/cli @vue/cli-init
WORKDIR /app/titanic-client
RUN yarn install
ENV HOST 0.0.0.0
EXPOSE 3000
CMD ["yarn", "run", "dev"]

docker-compose.yml

version: '3'
services:
  app:
    build: ./client
    volumes:
      - ./client:/app
    ports:
      - "3000:3000"
    tty: true

ポイントとしては、

  • vue/cli だけでなく、vue/cli-initもインストールしておくことが必要
  • yarn installはpackage.jsonが存在するディレクトリで実行する必要があり、nuxtアプリを下位階層に作る場合（vue initでアプリ名を指定する場合：今回はtitanic-client）はディレクトリ切り替えのために、WORKDIRを指定する。
  • CMD [“yarn”, “run”, “dev”]によりDocker起動時にNuxtアプリも起動する

という感じでしょうか。終わってしまえば結構シンプルにできることがわかりますが、ここまで来るのは大変でした。

これで立ち上がれば、GCEの公開アドレスのポート3000で、例の変な画面が見えるようになります。

アーカイブ