Nuxt を Koyeb Serverless Platform へデプロイする

Nuxt を Docker を使って Koyeb Serverless Platform にデプロイします

Koyeb は、アプリケーションをグローバルに展開するための開発者向けサーバーレスプラットフォームです。このプラットフォームでは、Docker コンテナ、Web アプリケーション、API をシームレスに実行することができ、git ベースのデプロイメント、ネイティブなオートスケーリング、グローバルエッジネットワーク、ビルトインのサービスメッシュとディスカバリーを備えています。

このガイドでは、Koyeb プラットフォーム上で Nuxt アプリケーションを dockerize してデプロイする方法を紹介します。

Koyeb は、お好みのレジストリから Docker コンテナをデプロイすることができます。このガイドでは Docker Hub を使ってイメージを保存していますが、GitHub Container Registry や GitLab Container Registry など、他のコンテナレジストリプロバイダーを自由に使うことができます。

前提条件

このガイドをうまくフォローして完成させるために必要なのは：

1. デプロイする Nuxt プロジェクト。create-nuxt-app を使って Nuxt プロジェクトを作成し、スタートすることができます。
2. docker 化された Nuxt アプリケーションをデプロイして実行するための Koyebアカウント
3. Docker イメージをプッシュして Koyeb にデプロイするための Docker Hub アカウント

はじめに

Nuxt アプリケーションのディレクトリで以下のコマンドを実行し、依存関係をインストールします：

yarn

依存関係のインストールが完了したら、アプリケーションを起動し、すべてが正常に動作していることを確認します：

yarn dev

Docker 化されたアプリケーション

Nuxt アプリケーションを Docker 化するには、プロジェクトディレクトリに以下の内容の Dockerfile を作成する必要があります：

FROM node:lts as builder

WORKDIR /app

COPY . .

RUN yarn install \
  --prefer-offline \
  --frozen-lockfile \
  --non-interactive \
  --production=false

RUN yarn build

RUN rm -rf node_modules && \
  NODE_ENV=production yarn install \
  --prefer-offline \
  --pure-lockfile \
  --non-interactive \
  --production=true

FROM node:lts

WORKDIR /app

COPY --from=builder /app  .

ENV HOST 0.0.0.0
EXPOSE 80

CMD [ "yarn", "start" ]

以下のコマンドを実行して、Docker イメージを構築します：

docker build . -t <YOUR_DOCKER_HUB_USERNAME>/my-nuxt-project

このコマンドを実行すると、<YOUR_DOCKER_HUB>/my-nuxt-project という名前の Docker イメージがビルドされます。ビルドが終わったら、そのイメージを使ったコンテナをローカルで実行して、すべてが期待通りに動いていることを確認できます。

docker run -p 3000:3000 <YOUR_DOCKER_HUB_USERNAME>/my-nuxt-project

ブラウザを開き、http://localhost:3000 に移動して、プロジェクトのランディングページを表示します。

Docker イメージをコンテナレジストリにプッシュする

テストで Docker イメージがビルドされて機能しているので、今度はコンテナレジストリにアップロードしてみましょう。このドキュメントでは、Docker Hub にイメージを保存することにします。ターミナルで以下のコマンドを実行し、image をプッシュします：

docker push <YOUR_DOCKER_HUB_USERNAME>/my-nuxt-project

Koyeb 上で Nuxt アプリケーションを本番環境にデプロイする

Koyeb Control Panel で、Create App ボタンをクリックします。

フォームの Docker image フィールドには、先ほど作成した image の名前を入力します。 このイメージは <YOUR_DOCKER_HUB_USERNAME>/my-nuxt-projectのようになります。

Use a private registry にチェックを入れて、選択欄で Create Registry Secret をクリックします。

以下を求めるモーダルな画面が開きます：

• 作成されるシークレットの名前で、例えば docker-hub-secret とすることができます。
• レジストリプロバイダが、プライベートレジストリの認証情報を含む秘密を生成するために、ここでは Docker Hub を使用します。
• Docker Hub の場合はユーザー名とパスワードを入力します。パスワードの代わりに Docker Hub からアクセストークンの生成 を行うことを推奨します。 すべてのフィールドに入力したら、Create ボタンをクリックします。

Path を変更する必要はありません。私たちのアプリケーションは、ドメインのルート / を利用できます。

アプリの名前を nuxt-app とし、Create App をクリックします。

また、アプリケーションを配置するリージョンを増やしたり、環境変数を設定したり、必要に応じて水平方向のスケーリングを定義することができます。

自動的に Koyeb App のページに移動しますので、Nuxt アプリケーションのデプロイメントの進捗状況を確認することができます。数秒後にアプリがデプロイされたら、koyeb.app で終わる Public URL をクリックしてください。

お客様の Nuxt アプリケーションは Koyeb 上で実行され、ネイティブオートスケーリング、自動 HTTPS（SSL）、オートヒーリング、およびエッジネットワークを介したグローバルロードバランシングの恩恵を受けます。