【Amplify + Next.js】AmplifyHostingでアプリを爆速デプロイ
はじめに
デプロイ環境やフロー作成を嫌厭しがちだったので恐る恐る手を伸ばしてみたのですが、想像以上に爆速デプロイできてしまいびっくり。色々試したことをまとめてみました。
概要
Next.jsのSSR環境を用いてAmplifyでデプロイするまでの手順を例に進めていく（今回はAmplifyCLIを使わずに画面からぽちぽち操作👆）。合わせてAmplify Hosting の便利な機能も色々一緒に試してみる。
AWS Amplifyとは
アプリを構築するための開発プラットフォーム。AWSの様々なサービスを使用し、フロントエンド開発者でも簡単にWebアプリを公開する環境を作ることができるサービス。Amplifyとしては、Amplify Studio, Amplify Library, Amplify CLI, Amplify Hosting（旧:Amplify Console）などのサービスが挙げられるが今回はAWSHostingのみを利用する。
AWS Amplify Hostingとは
AWSからリリースされた静的Webホスティングサービス。有名どころのフレームワークは大体サポートされている。2021年5月にNext.jsのSSRに対応している。
Amplify Hosting supports the common SPA frameworks, for example, React, Angular, Vue.js, Ionic, and Ember, as well as static site generators like Gatsby, Eleventy, Hugo, VuePress, and Jekyll.
手順
IAMユーザー作成
今回はデプロイまで行うためAmplifyに特化したAdmin権限であるAdministratorAccess-Amplifyポリシーをユーザーにアタッチする
フロントエンドでバックエンドリソースをデプロイするためのアクセス許可が必要となるためロールの選択または作成を許可するポリシーのアタッチする
アプリ作成
1. Amplifyサービス画面を開きAmplifyHostingを開始
リポジトリサービスプロバイダー選択画面が表示されるのでコードを管理しているプロバイダーを選択（今回はGitHubを利用）
2. ホスティングしたいGitHubのリポジトリとブランチを選択
3. ビルド設定
Amplify側でリポジトリを検査して、実行する一連のビルドコマンドを自動的に検出、異なる場合でも編集可能。また、カスタムビルドイメージの設定や環境変数の設定、ライブパッケージの更新もこちらからできる。
4. 保存してデプロイ
確認画面へ進み設定に誤りがないことを確認してからビルドを開始
5. デプロイ完了
ワークフローが全て完了するとデプロイ完了🎉 リンクから飛んで確認することができる。
出来上がったアプリの構成
各種機能をみてみる
フルマネージドな CI/CD (継続的インテグレーション/継続的デリバリー)
Gitリポジトリと接続し、コードをpushするだけで自動的にビルド・デプロイを行なってくれるのでCI/CDを独自に設計する必要がなく、とてもシンプルでスピーディ。手動デプロイに変更することも可能。
環境の切り分け
ブランチごとのデプロイ環境の構築
ブランチごとにAmplifyに接続することによって各デプロイフローを構築することができる。ドメインの割り当て前でも環境を分けることができる。
サブドメインごとのデプロイ環境の構築
Route53で登録したドメインを利用することで、Amplify側から簡単にサブドメインごとの環境を構築することができる。ルートを本番環境、サブでステージングや開発環境のようにドメインごとに環境を作ることができるのでとても便利。
Route53でルートドメインを登録した後、Amplify側で作成したいサブドメイン名と割り当てるブランチを選択すれば自動でサブドメインを作成してくれる。Route53での手動でのサブドメイン作成は不要。
PR単位でのプレビュー
プレビュー機能を有効にすることによってPR作成をAmplify側で検知して、デプロイ先URLとは異なる一意のURLを発行、作成したPRのプレビューを見ることができる。
PRを作成するごとにビルド設定に基づくビルド・デプロイが行われ、レビューページではこのように表示される。ビルド失敗時はFailedとなり、プレビューURLは発行されないので改めてコードをpushする必要がある。
Basic認証
作成した環境ごとにアクセス制限が可能。難しい設定なしに、画面がらユーザー名とパスワードを入力して完了。
URLへアクセスすると、ユーザー名とパスワードの入力を求められます。
料金について
無料枠はなく従量課金。ビルド・デプロイ時間分の料金+ホスティングのGBの料金となっている。
おまけ
Next.js12はまだ正式にはサポートされていなさそう
Nuxt.jsはSSRが未対応
さいごに
- ぽちぽちしてデプロイが終わったかとおもったらCI/CDのパイプラインまで出来上がっていてとんだ優れもの！！是非実際の開発にとりいれていきたいです。
- 複雑な設定を一撃で終わらせてくれる便利なサービスですがAWSサポートありき、issueを確認したりこまめに動向をチェックするのがよさそうです。
Discussion