Amplify Console のプルリクエストプレビューと Cypress テストの機能を使い便利にアプリのテストを行う

Amplify Console を使うと、開発者は継続的なデプロイを行う Git ベースのワークフローの定義やフルスタックのサーバーレスウェブアプリケーションのホスティングが容易に行えるようになりますフルスタックのサーバーレスアプリの構造では、GraphQL API やデータおよびファイルストレージ、また認証もしくは分析のためのバックエンドのリソースが、React、Gatsby あるいは Angular といったフロントエンドフレームワークと統合されています。Amplify Console に関する詳細については、以前のブログ記事をご参照ください。

今回は、コードを実稼働状態にリリースする前の段階において、プレビュー URL を作成しプルリクエストについてエンドツーエンドのテストが行える機能を発表させていただきます。

プルリクエストプレビュー
Amplify Console の設定で、開発者が Git レポジトリにプルリクエストを送信するたびにアプリケーションを一意の URL にデプロイできるようになりました。このプレビュー URL は、実稼働のサイトが使用するものとは完全に異なるものです。プルリクエストをご自身のコードレポジトリのメインブランチにマージする前に、Amplify Console の新機能で変更点を確認できます。Amplify CLI を介してプロビジョニングされたバックエンド環境も含むフルスタックのアプリでは、すべてのプルリクエストがプルリクエストが閉じられると削除される一時的なバックエンドをスピンアップします。これにより、実稼働環境から完全に分離された状態で変更点の確認が可能になります。Amplify Console では、プライベートの Git レポジトリに限り、プルリクエストのためのバックエンドインフラストラクチャを作成します。これにより、不要なプルリクエストによる余計なコスト発生を防ぎます。

この仕組みを理解するために、クラウドベース認証のバックエンドがあるウェブアプリケーションを作成し、Amplify Console でデプロイしてみることにします。最初に React アプリケーションを作成します (React のインストールについてはこちらをご参照ください) 。

npx create-react-app amplify-console-demo                                                
cd amplify-console-demo

Amplify の環境を初期化します (先に、Amplify CLI のインストール方法をご確認ください) 。Amazon Cognito で提供されている、クラウドベース認証のバックエンドを追加します。Amplify CLI に表示されるデフォルト設定値はすべてそのままにします。

npm install aws-amplify aws-amplify-react
amplify init
amplify add auth
amplify push

次に、src/App.js を修正して、フロントエンド認証のためのユーザーインターフェースを追加します。このコードは AWS Amplify ドキュメントページから入手していただけます。準備が整ったら、ローカルの開発用サーバーを使い、分離環境でのアプリケーションのテストを開始します。

npm run start

ブラウザで http://localhost:8080 を開き、スキャフォールディングを表示します (次のスクリーンショットは、AWS Cloud 9 の開発環境から撮ったものです) 。ユーザー作成のために、[Create account] をクリックしサインアップ手順を確認して、アプリケーションを承認します。

サインアップを終えたら、アプリケーションページを開きます。

ここで、覚えておくべき重要なポイントが 2 つあります。1 つめは、プライベートの GitHub レポジトリを使用するということです。Amplify Consoleでは、プライベートリポジトリのプルリクエストでのみバックエンドインフラストラクチャを作成します。望まないプルリクエストのために不必要なインフラを作成することを防止するためです。2 つめは、Amplify Console でのビルド処理は、package-lock.json の中だけで依存関係をチェックするということです。今回、追加した amplify パッケージに npm を設定し、yarnを設定していないのはこのためです。

納得のいくアプリが用意できたら、GitHub レポジトリにコードをプッシュします (すでに、git remote add origin ... を実行していると考えてください) 。

git add amplify
git commit -am "initial commit"
git push origin master

次のステップでは、Amplify Console を設定して、全ての Git コミットでアプリをビルドしてデプロイします。Amplify Console にログインし、[Connect App] をクリック、レポジトリに [GitHub] を選択した後、[Continue] をクリックします (この作業を始めて行うときは、GitHub のユーザー名とパスワードにより、GitHub の認証をする必要があります) 。

ソースとして使用するレポジトリとブランチを選択します。

Amplify Console がプロジェクトの種類を検知し、ビルドファイルの選択肢を表示します。使用している環境の名前 (dev) を選択します。Amplify Console を始めて使用するときは、手順に従いサービスロールを新しく作成します。このロールは、開発者に代り Amplify Console が AWS バックエンドサービスへアクセスすることを承認します。

[Next] をクリックします。設定内容を確認し、[Save and Deploy] をクリックします。数秒から数分が経過すると、作成したアプリケーションの準備が完了します。ブラウザでデプロイした URL を開くと、アプリが正常に動作していることを確認できます。

それでは、プルリクエストのプレビューを有効化してみましょう。左側にあるメニューで [Preview] をクリックした後、 [Enable Previews] をクリックします。Amplify Console でプレビューを行うには、アプリを自分の GitHub アカウントにインストールしておく必要があります。コンソールに表示される手順に従い、GitHub アカウントの設定を行います。この設定ができたら、ブランチを選択し、[Manage] をクリックします。プルリクエストのプレビュー機能を有効あるいは無効にできます。(Amplify のアプリは、GitHub アカウントの設定ページにある Applications セクションで、いつでもアカウントからアンインストールすることができます。)

これで、必要なメカニズムの準備は整いましたので、プルリクエストの作成を行ってみましょう。

GitHub の App.js を直接修正します。withAuthenticator コンポーネントをカスタマイズし、[Sign In] ボタンの色をオレンジからグリーンに変更します。変更を保存しプルリクエストを作成します。

[Pull Request] の詳細ページで、[Show all checks] をクリックし、Amplify Console によるテストのステータスを取得します。AWS Amplify Console Web Preview が進行中と表示されます。そして、フロントエンドのビルドとデプロイに必要な、プルリクエストテストのためのフルバックエンド環境が、Amplify Console により作成されます。

しばらくするとすべてのチェックが通過しグリーンのマークが表示されます。[Details] をクリックし、プレビュー用URL を取得します。エラーが発生した場合は、Amplify Console からビルドフェーズに関する詳細ログファイルを確認できます。

また、プレビューステータスのチェックも 、Amplify Console から行えます。

ブラウザでプレビュー用 URL を開き、変更した動作の確認を行います。[Sign In] ボタンが、オレンジからグリーンに変わっているのがわかります。

先の手順で作成したユーザー名とパスワードによる認証を行うと「User does not exist」というエラーメッセージが表示されます。このプレビュー用 URL が、メインのアプリケーションとは別のバックエンドを指しているからです。Cognito コンソールには、各環境に 1 つずつ、2 つの Cognito ユーザープールがあります。

メイン URL に対し行ったのと同様なアクセス制御設定で、 プレビュー用 URL にアクセスできるユーザーを指定することができます。

表示された変更内容に問題がなければ、GitHub でプルリクエストのマージを行い、実稼働環境に向け、新たに変更したアプリのビルドとデプロイを行います。マージ処理を行うと、Amplify Console はプレビュー用環境を自動的に削除します。同時に、プルリクエストのために作成された一時的なバックエンド環境も削除されます。

Cypress テスト
今回、メインブランチにマージする前の変更点をプレビューする機能に加え、ビルド処理でのエンドツーエンドテスト実行機能も追加されています。使い慣れたテストフレームワークにより、ユニットもしくはエンドツーエンドテストをアプリケーションに追加し、ビルドフェーズでのテストを自動的に実行することが可能です。Cypress のテストフレームワークを使う場合は、Amplify Console により、テストのソースツリー内での検出と、アプリケーションのビルド処理への挿入が自動的に行われます。

このテストのすべてにパスしたプロジェクトのみが、デプロイフェーズのパイプラインへ送り込まれます。以前に投稿した記事で、この機能の詳細についてと、 作業手順の解説がご覧になれます 。

今回、Amplify Console に行ったこれら 2 つの機能追加は、パイプラインの頑強性に対する信頼度を高め、実稼働環境で公開するコードの品質を担保するために役立ちます。

利用状況
ウェブプレビュー機能は、現在 AWS Amplify Console が利用可能なすべてのリージョンにおいて、Amplify Console の標準料金に一切の追加料金がなくご利用できます。AWS の無料利用枠をご利用のお客様であれば、無料で使用開始できます。AWS の新しいお客様であればサインアップするだけで 1 か月の間に、ビルドとデプロイ実行を 1,000 分間、サーバー機能に15 GB、さらに、データストレージに 5 GB をご利用になれます。

— seb