Zenn
🪤

Nuxt3をAmplify Hostingする際のハマりどころ

2023/07/12に公開
Nuxt
Amplify
#
SPA
Nuxt 3
tech

はじめに

AWS Amplifyでホスティングすると、時折AccessDeniedや404エラーに遭遇することがあります。
これは主に、Nuxt3やSPAに対応する適切な設定が行われていないことが原因です。
もし本記事の内容が皆さんの状況に当てはまるようであれば、ぜひ参考にしてみてください。

無事うまくいく工程

  1. amplify init
  2. amplify add hosting
  3. AWSコンソールでリポジトリを接続したり、プロジェクトの初期設定を行う
  4. amplify push
  5. ビルドの設定 ←ここを詳しく解説します
  6. リライトとリダイレクト ←ここも詳しく解説します

ビルドの設定

以下の画像通りに設定ができていればOKです。

コピペ用:

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run generate
  artifacts:
    # IMPORTANT - Please verify your build output directory
    baseDirectory: .output/public
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

何を変更したのか？

  • Nuxt3のビルドコマンドは npm run generate ですので、書き換えてください。
  • Nuxt3のbaseDirectoryは .output/public となりますので、書き換えてください。

リライトとリダイレクト

以下の画像通りに設定ができていればOKです。

Redirects for single page web apps (SPA) に記載されているルールをコピーし、追加してください。

[
    {
        "source": "</^[^.]+$|\\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|woff2|ttf|map|json|webp)$)([^.]+$)/>",
        "target": "/index.html",
        "status": "200",
        "condition": null
    }
]

なぜこのルールが必要なのか？

ユーザーがURLを直打ちしてアクセスしようとすると、サーバーは存在しないページにリクエストがあったと解釈し、通常は404エラーを返します。しかし、この設定により、サーバーは404エラーの代わりにindex.htmlを返します。そして、NuxtがHTMLを解釈し、適切なコンテンツをユーザーに表示するようルーティングします。

おわりに

AWS Amplifyを使用してホスティングする際のトラップについて、具体的なビルド設定とリダイレクト設定を中心に解説しました。
両者とも、そりゃそうだよねって内容だったと思います。
この記事が、皆さんが同様の問題に遭遇した際の一助になれば幸いです。

Discussion