😬

Nuxt3でAmplifyのデプロイ(publish)ができない時のtips

2023/02/11に公開

デプロイ

Amplify

Nuxt 3

tech

（＊「Nuxt3で」と書きましたが、単に自分が試した環境というだけで、「Nuxt3が原因で/固有の」という意味はないです）

まずは普通に上手くいくはずの手順

amplify add hosting (Hosting with Amplify ConsoleとManual deploymentを選択)をターミナルで叩く
amplify publishをターミナルで叩く

で、待っていればURLが発行されてアプリがウェブ上で見えるはずなんですが、本記事はこれが上手くいかなかった人のためのtipsです。

上記の手順が一番楽だと思うんですが、Githubのリポジトリからソースコードを接続し、Amplify Console上でデプロイする方法もあります。上記の方法は失敗した時に手掛かりが少ないので、上手くいかないようならこちらの方法を試すのもありだと思います。

Amplify Consoleでのbuild (構築)や`amplify publish`に失敗する

Amplifyのpython3のバージョンが古い問題

アプリ内でpythonパッケージを使っている場合、Amplifyにデフォルトで乗っているpython3のバージョンが古くてパッケージがインストールできない問題が発生します。amplify.ymlにおまじないを書いて、新しいバージョンのpython3をインストールする必要があります。
詳細は下記の記事を参考にしてください。

AWS AmplifyでPythonのFunctionをCI/CDするとbuildに失敗する問題の対処方法

Distribution DirectoryやBaseDirectoryのパスはどこへ...

デフォルトではdist/になっていると思います。
ウェブの記事等では、これを/dist/にしましょうと書いてあったりするわけですが、amplify publishを叩いた時にGenerated public .output/publicと出ているので、.output/publicとするのが正解のようです。

`amplify.yml`ってどこにあるの？ build setting (ビルドの設定)というタブはないんだが...

ウェブで検索していると、多くの記事でamplify.ymlを書き換える話が書かれています。Amplify Consoleの「ビルドの設定」で書き換える部分なのですが、そもそもこの「ビルドの設定」がない場合があります。

Amplifyのアプリをデプロイする方法は、いくつかあるようですが、Githubのリポジトリからソースコードを接続し、Amplify Console上でデプロイするときにしか(amplify.ymlの設定ができる)「ビルドの設定」は出てこないです。

ちゃんと調べたわけではないですが、amplify publishでアプリを公開する場合は、amplify configure hostingを叩いてDistributionDirectoryなどを変更するのだと思います（が、自分は最初こっちでやろうとして上手くいかなかったので正解は不明です）。

自分でroot下にamplify.ymlを作成して書き込むという話も見かけますが、実際にそれをやって説明している記事・動画を見かけなかったのでスルーします。

viteエラーが出る

ERROR 'request' is not exported by __vite-browser-external が出る場合は、nuxt.config.tsを書き換えるのを忘れているからです。

export default defineConfig({
  plugins: [vue()],
  resolve: {
      alias: [
      {
        find: './runtimeConfig',
        replacement: './runtimeConfig.browser',
      },
    ]
  }
})

および

    define: {
      'window.global': {}
    }

とする必要があります。（もしかしたら後者はなくても大丈夫かも？）

Directory Directory Pathでエラーが出る

Zipping artifacts failed. This is often due to an invalid distribution directory path. Run "amplify configure project" to check if your Distribution Directory is pointing to a valid path.

これはエラー文の通りpathを変える必要がある...と思っていたんですが、自分の場合は凡ミスで、これまでnpm run build (yarn build)やnpm run generate (yarn generate)をしていませんでした。これを叩くと色々ルーティング先が作られるので、叩きましょう。

AccessDeniedのエラーが出る

厄介でした。このエラーだけだと、何が悪いか情報が乏しすぎます...正直完全に理解していないですが、調べたこと・やってみたことを共有します。

（強引な）リダイレクト設定

これは素人目にも（素人だからかもしれないけれど）、見るからに強引な設定なんですが、
「リライトとリダイレクト」→「編集」→「テキストエディタを開く」から、

[
    {
        "source": "/<*>",
        "target": "/index.html",
        "status": "404-200",
        "condition": null
    }
]

とすると、AccessDeniedを突破できます。403エラーを無視して問答無用でリダイレクトしているだけな気がしますが、他の方法では解消できなかったのでこれを採用しました。（正しい方法を知っている方がいたら優しく教えてください）

参考記事: "Access Denied after Deploying NuxtJs on AWS Amplify"

よくあるリダイレクト設定

自分の場合はこれで解決というわけではなかったんですが、AWS Consoleにて、「リライトとリダイレクト」（旧「書き換えて、リダイレクト」）で設定すると、AccessDeniedを解消できるようです。
これはよく書いてあるので、詳細は下の記事などを参照してください。

Amplify Console でデプロイした SPA が403エラーになった原因と対策

`amplify.yml`の設定についての補足

amplify.ymlの設定は、BaseDirectoryの値を設定する話がよく書かれていますが、yarnを使っている場合は、

frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run generate

のところで、npm ci→yarn install, npm run generate→yarn generateにします。たぶん生成時には元からこうなっていると思いますが、解説動画・記事等でnpmにしてあっても、yarnで大丈夫ですよ、と言いたいです。

一旦hosting設定を削除する

amplify remove hosting をターミナルで叩くとホスティングを消せます（amplify pushもしておく必要あり?）。
Amplify Consoleの「全般」→「ブランチ」→ブランチを選択して「アクション」のところで削除できます

ただし、Githubリポジトリなどを用いずに直にAmplify Consoleでホスティングしたときに作成されるブランチを消すと、あとでamplify add hostingをしても自動で生成されません。
消した後にamplify publishを叩くと、「ブランチがありません」と怒られてエラーになります。

公式サイト

さいごに

ここまで試行錯誤してみたことをリストアップしてみたんですが、色々確認するためにもう一度デプロイ作業をしなおしてみたら、以前はBaseDirectoryが.output/publicにしないとエラーになったはずなのに、dist/でもビルドが通って普通にデプロイ出来たりして、まだ謎が多い状態です。

なのでここに書いたことは、正しい情報であるという保証はなく、諸々の状況の下「これで上手くいくこともある」という程度の内容だと思ってください。また、こういうのは仕様変更ですぐに賞味期限切れになると思うので（だからこそ古い記事に振り回されて迷走するわけで、だからこそこの記事を書いたわけですが）、ナマモノだということも強調しておきます。

それでは。頑張りましょう。