yasudacloudの日記

札幌に住むソフトウェアエンジニア

AmplifyのNextJS13サポートされたのでみていくよ

最近AWSのアップデートが多くキャッチアップに時間が取られています( ´△`)

ちょうど1ヶ月ほど前、AmplifyでNextJSをSSRで動かそうとしていたのですがバージョン13が未対応だったためビルドが通らずバージョンを落として使っていました。

しかし、先日読んだ公式日本語ブログで13サポート&幾つか便利になったとのことで実際に見ていきたいと思います。

前準備

create-next-appなりでVer13の新規プロジェクトを作成します。まずはSSGを試したいのでpackage.jsonのbuildを以下のように変更します。

build": "next build && next export",

が、この状態でnpm run buildを行うとImageコンポーネントでこんなエラーが出ます。

Error: Image Optimization using Next.js' default loader is not compatible with `next export`.
Possible solutions:
- Use `next start` to run a server, which includes the Image Optimization API.
- Configure `images.unoptimized = true` in `next.config.js` to disable the Image Optimization API.
Read more: https://nextjs.org/docs/messages/export-image-api

この場合はnext.config.jsのimages.unoptimizedをtrueにするかImageコンポーネントのpropsにunoptimized = trueを設定するか、そもそもImageを使わないといった対応が必要です。 いずれかを行なってnpm run buildが成功したらGitHubリポジトリにPUSHすれば準備OK

AmplifyでWebアプリを作成

Amplifyの画面で「新しいアプリケーション」→「ウェブアプリケーションをホスト」を選択して先ほどのリポジトリをデプロイします。この辺は以前と変わらないので省略しますが、公式にもあるようにビルド時間が体感的に少し早くなったような気がします。ブラシーボ?

NextJSの初期設定画面が表示できました。

ここで、一応他のAWSサービスに何か変わった設定はないか何気なく開いていくと...デプロイしたAmplifyに紐づくCloudFrontとS3が存在しないことに気づきました。完全にカプセル化することになったのか、デフォルトでは表示されなくなったのか、自分の見間違いなのか。

ちなみにデプロイしたWebアプリのレスポンスヘッダーにはserver: AmazonS3とx-cache: miss from cloudfrontとあるので見えなくなっただけかも。

いやー、前はちゃんと見えたんですけどね。削除し忘れたS3バケットがまだあったりCloudFrontからLambda Edgeが紐づいてるのを確認したことがあったので。モヤモヤしますが次に進みます。

SSRでデプロイ

今度はSSRを試します。まずはpackage.jsonを"build": "next build"に戻してmainにPUSHします。一度SSG設定でAmplifyアプリを作成するとSSRに変更が出来なそうなので新たにもう一つAmplifyアプリを作ります。

デプロイ後にもう一度トップ画面と、デフォルトの/api/helloのレスポンスヘッダーを見てみます。先ほどと違ってserver: CloudFront、x-cache: Miss from cloudfrontとなっており、おそらくLambda Edgeが実行されていると思われます。こちらも同じく、バージニア北部のLambdaを開いても見えません😥

独自ドメイン

他のAWSサービスが見えないということで独自ドメインを振った時のRoute53はどうかやってみます。ドメイン設定もAmplifyから簡単に設定できます。こんな感じでamplify.yasuda.cloudというサブドメを切ります。

保存を押して数分放置していると、ブラウザから開けるようになりました!

そしてRoute53の元々あったホストゾーンにCNAMEが追加されていることを確認しました!♪( ´θ`)ノ

ちなみにバージニア北部のACMは見えませんでした。元々あったワイルドカード証明書にも関連付いておらず。

まとめ

見た目だけでなく内部的にも色々大きな変更が加わってそうです。それにしてもNextJS13のリリースから日が浅いのにこのタイミングでサポートされたのは意外でした。他にもCloudWatchメトリクスが便利そうでしたが、深掘りしにくいと思ったので割愛しました。

このアップデートを受けて、、たしかにAmplify良くなったけどCloudflareも使っていきたいんだよな〜って気持ちが正直あります。

おわり