amplifyでnuxtを利用する

awsのサーバーレスアーキテクチャとしてamplifyというものがあります。
サーバーを建てずにJavaScriptのフレームワークを動かすツール、Googleのfirebaseみたいなツールですね。

で、これのvue-jsのチュートリアルを見るとこれ、vue-cliを使ってフレームワークを構築しているのですが、やっぱりvue-cliを使うよりもnuxt.jsを使ったほうが今どきな感じも受けますね。

そんなわけで試してみたのですが、いくつかハマる点があり苦戦。
というわけでハマったところをいくつか書いていきましょう。

srcディレクトリとdistディレクトリ

amplifyの初期化時、srcディレクトリとdistディレクトリを指定しないといけません。
が、vue-cliだとinit時srcディレクトリが生成されるものの、nuxtにはsrcディレクトリが無い。
色々調べていたら、YouTube動画で~/と指定しているのを発見。
これでうまくいくっぽいです。
distディレクトリはそのまんまで。

build、serve

vue-cliはnpm run-script buildでdistディレクトリに吐き出されるのですが、nuxtはこれだとdistディレクトリが作られない。
のでpublishに失敗します。
というわけで、ビルドスクリプトはnpm run-script generateにしましょう。
これならうまくいきます。
間違えてamplify initしちゃった場合は
amplify/.config/project-config.json
ここをいじればいい感じです。