Amazon Web Services ブログ

AWS Amplify Hosting で任意の SSR アプリをホスティングできるようになりました

開発者とフロントエンドフレームワークの作成者が AWS Amplify Hosting 上でフルマネージドの Server Side Rendering (SSR) アプリケーションをデプロイできるようにする、新しいデプロイ仕様の一般提供を開始しました。このデプロイ仕様によって、Amplify Hosting の SSR 機能がすべてのフレームワークで利用可能になります。これらの文書化された規約に従うことで、開発者やフレームワークの作者は、Nuxt, SvelteKit, Astro、さらには Express サーバーのような一般的な SSR フレームワークで構築されたアプリケーションをデプロイすることができます。この仕様では、Compute, Image optimization, Routing rules, Static assets のための規約ベースの基本要素を定義しています。

主な機能は以下の通りです。

  • Static assets – フレームワークに静的ファイルをホストする機能を提供します。
  • Compute – フレームワークに Node.js HTTP サーバーを 3000 番ポートで実行する機能を提供します。
  • Image Optimization – フレームワークに実行時に画像を最適化する機能を提供します。
  • Routing Rules – フレームワークに入ってくるリクエストパスを特定のターゲットにマッピングする機能を提供します。

この新しい SSR のデプロイ仕様は、Nuxt が Nitro サーバプリセットで行ったように開発者とフレームワークの作成者が SSR の基本要素を利用するためのアダプタを構築するために設計されています。さらに、開発者が基本要素をフル活用するために、Express.js のような他のフレームワークや技術で同様の実装することも可能にします。

この仕様と、Compute, Image optimization, Routing rules, Static assets に関する規約ベースの基本要素は、Amplify Hosting SSR デプロイ仕様ドキュメントに記載されています。

Nuxt のサポート

Nitro サーバー内でこのビルトインアダプターパターンを使用した Nuxt のサポートを開始されました。これによって Nuxt SSR アプリの Amplify Hosting へのデプロイを、プロジェクトに依存関係を追加することなく開始できるようになりました。新しいデプロイ仕様を使用して、Nuxt チームは、設定無しで Nuxt アプリを Amplify Hosting にデプロイできるアダプタを作成しました。以下にその方法を紹介します。

ソリューションの概要

この新機能を活用するため、Nuxt チームと協力して、Amplify Hosting への Nuxt SSR デプロイをサポートしました。この仕様は、Nuxt を駆動する Nitro サーバー内の組み込みデプロイプリセットに実装されており、Nitro 上に構築されたあらゆるフレームワークをサポートしています。

この記事では、Nuxt SSR アプリケーションを Amplify Hosting にデプロイすることに焦点を当てます。Nuxt アプリケーションは、Nitro サーバから利用可能な設定不要の組み込みアダプタを使用します。わずか数ステップで、Nuxt SSR アプリを作成して Amplify Hosting にデプロイできます。

Nuxt SSR アプリのデプロイ

Nuxt アプリは Amplify Hosting に簡単にデプロイすることが出来ます。Nuxt の依存関係さえあれば、デプロイすることができまです。Nuxt は Nitro サーバー経由で組み込みアダプタを実装しているため、最小限のセットアップで Amplify Hosting にデプロイできます。

アプリをローカルで実行し、テストしたら、CI/CD で Amplify Hosting にデプロイできます。Amplify CI/CDでのビルドプロセス中に、Nitro サーバーは Amplify CI/CD パイプラインにあることを認識し、設定不要の Nitro プリセットを aws_amplify として自動的に選択します。このステップでは、アプリのビルド出力を Amplify Hosting のデプロイ仕様に合わせて調整します。このプロセス全体は、Nuxt 組み込みアダプタによって行われます。

新しい Nuxt アプリを始める

はじめに、nuxi を使用して新しい Nuxt アプリを作成します。

npx nuxi@latest init

この例では、パッケージマネージャとして npm を使っています。インストール完了のメッセージが表示され、Git リポジトリを初期化するプロンプトが表示されます。

✔ Which package manager would you like to use?
npm
◐ Installing dependencies...                                       

> postinstall
> nuxt prepare

✔ Types generated in .nuxt                                        

✔ Installation completed.                                         

✔ Initialize git repository?
Yes
ℹ Initializing git repository...                                  

Initialized empty Git repository in ...
                                                                   
✨ Nuxt project has been created with the v3 template. Next steps:
 › cd nuxt-app                                                     
 › Start development server with npm run dev

プロジェクト内の package.json ファイルは以下の例のようになり、Nuxt と Vue の典型的な依存関係が含まれます。

{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "@nuxt/devtools": "latest",
    "nuxt": "^3.8.1",
    "vue": "^3.3.8",
    "vue-router": "^4.2.5"
  }
}

GitHub に新しいリポジトリを作成し、ローカルのリポジトリをそこにプッシュします。

Amplify Hosting でアプリを作成できるようになりました。Amplify Hosting で、Host web app をクリックし、新しいアプリを作成します。

次に、GitHub リポジトリとブランチに接続します。

Amplify のアプリ名を入力します。Nuxt の場合、ビルドとテストの設定は自動検出によって自動的に入力されます。以下の例と一致することを確認し、必要に応じてパッケージマネージャのインストールコマンドを調整します。この設定では、ビルド環境を設定し、デプロイするアーティファクトの baseDirectory を .amplify-hosting に指定します。

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - nvm use 18
        - corepack enable
        - npx --yes nypm i
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: .amplify-hosting
    files:
      - '**/*'

Nitro サーバーアダプタは、デプロイ仕様に従ってファイルを整理し、.amplify-hosting ディレクトリに自動で移動します。

ビルド設定で SSR アプリのログを有効にする

アプリのサーバーサイドロギングを有効にすることができます。アプリがデプロイされると、Amazon CloudWatch アカウントへのサーバーサイドロギングが有効になります。つまり、アプリケーションサーバーまたは Nuxt server route からのログはすべてそこにキャプチャされます。

有効にするには、Build and test settings のEnable SSR app logs チェックボックスをオンにします。チェックボックスを選択すると、IAM Role の選択または作成オプションが表示されます。サーバーサイドレンダリングロギングのIAM ロールを選択または作成します。Amplify Hosting に IAM ロールの作成を許可することを選択した場合、その IAM ロールはすでに CloudWatch Logs を作成する権限を持っています。

次の画面で、Save and deploy を選択します。

アプリが正常にデプロイされたら、Amplify アプリの URL に移動します。これで Nuxt アプリが公開されました！

Nuxt image

<NuxtImg> および <NuxtPicture> コンポーネントを完全に利用するには、@nuxt/image モジュールをインストールしてアプリを設定します。モジュールでアプリを設定したら、変更をデプロイします。Amplify Hosting は自動的に画像の最適化を有効にし、コンポーネントを使用する際に画像のリサイズや変換が可能になります。

Nuxt サーバーサイドログの表示

オプションとして、いくつかのステップで CloudWatch へのサーバーサイドロギング出力をテストできます。まず、アプリの server/api/hello.ts に Nuxt server route を追加します。これは “Hello, World” の例で、ルートがリクエストを受信したときに追加の console.log() も追加します。

export default defineEventHandler((event) => {
  console.log('server route requested')
  return {
    hello: "world",
  };
});

アプリを保存し、新しい変更を GitHub のリポジトリにプッシュします。これによってアプリをビルドしてデプロイするための新しい CI/CD プロセスが開始されます。

デプロイされたら、新しいサーバーのエンドポイント ( main.<app-id>.amplifyapp.com/api/hello) にアクセスしてください。サーバーは JSON レスポンスを返しますが、私たちの場合はシンプルな { hello: "world" } です。

サーバーサイドのログを見るには、Monitoring > Hosting compute logs で Amplify アプリのCloudWatch ログストリームに移動します。最新の CloudWatch ログストリームをクリックします。

CloudWatch コンソールを開きます。最新の Log stream をクリックします。

これらのログでは、サーバールートで追加されたステートメントログが出力されます。

新しい Amplify Hosting SSR デプロイ仕様を利用する設定不要のアダプタのおかげで、Amplify Hosting での Nuxt アプリのデプロイは合理化されています。互換性のあるアダプタを持つフレームワークを使用している場合、Amplify Hosting は自動的に SSR の基本要素を使用してアプリケーションを認識し、デプロイします。

クリーンアップ

最後に、不要になったアプリケーションを削除します。これを行うには、このアプリの Amplify Hosting コンソールの App settings > General に移動し、Delete app をクリックします。また、アプリのデプロイ設定中に SSR ロギング用の IAM ロールを作成した場合は、そのロールを削除する必要があります。ロールの名前は、AmplifySSRLoggingRole-<app-id> のパターンに従います。

まとめ

Nitro サーバの aws_amplify 用の設定不要なプロバイダを使用して、わずか数ステップで Nuxt アプリをビルドして Amplify Hosting にデプロイできるようになりました。この方法では、デプロイプロセスが簡素化され、Amplify Hosting 上の Nuxt アプリのビルド設定を検証するだけで済みます。Nuxt 3 アプリを Amplify Hosting 上で稼働させるための簡単で迅速な方法です。

この新しいデプロイ仕様により、開発者やフレームワークの作成者は、この仕様で概説されている SSR の基本要素を利用するための独自のアダプタを構築できるようになります。つまり、あらゆる SSR フレームワークでも、カスタムビルドのアダプタを使えば、Amplify Hosting 上で同じ合理的で効率的なデプロイプロセスを利用することができるのです。

Amplify Hosting の拡張された SSR 機能とアダプタの構築に関するドキュメントをより深く知るには、Amplify Hostingによる SSR アプリのデプロイのドキュメントをご覧ください。

その他のリソース

本記事は「Introducing Support for Hosting Any SSR app on AWS Amplify Hosting」を翻訳したものです。

翻訳者について

稲田 大陸

AWS Japan で働く筋トレが趣味のソリューションアーキテクト。普段は製造業のお客様を中心に技術支援を行っています。好きな AWS サービスは Amazon Location Service と AWS Amplify で、日本のお客様向けに Amazon Location Service の解説ブログなどを執筆しています。