Amplify Console がすべてのブランチデプロイに対するカスタムサブドメインの自動作成および削除をサポート

AWS運用自動化サービス「Cloud Automator」

はじめに

こんにちは、技術1課の山中です。
暑くなってきましたね!いつも仕事をしている部屋にエアコンがなくてそろそろやばいなあと感じ始めています。。
というのはさておき!
今回はこのアップデートについて見ていきます!

Amplify Console がすべてのブランチデプロイのカスタムサブドメインを自動的に作成および削除するためのサポートを追加

AWS Amplify とは

AWS Amplify (Amplify) は Web フロントエンド、モバイルアプリの開発を加速させるために作られた AWS が提供する OSS の開発プラットフォームです。
モバイルアプリケーションおよびWebアプリケーションを構築するために必要なツール群を総称したもので、具体的には、

  • iOS, Android, Webアプリと統合するためのライブラリ
  • UIコンポーネント
  • コマンドラインインターフェース ( Amplify CLI )

を提供しています。

AWS Amplify Console とは

AWS Amplify Console (Amplify コンソール) とは、サーバーレスウェブアプリケーションのデプロイ・ホスティングを行うための AWS サービスのひとつです。
コードリポジトリのブランチを指定し、環境名などを設定するだけで、簡単に継続的デプロイ環境を構築、ホスティングまで行ってくれます。
詳細は以下をご参照ください。

AWS Amplify コンソールとは? – AWS Amplify

料金

Amplify コンソールは、ビルド & デプロイ、ホスティングという 2 つの機能に対して料金が設定されています。
ビルド & デプロイ機能の場合、ビルド分あたりの料金は 0.01USD です。
ホスティング機能の場合、対象の GB ごとの料金 0.01USD と保存された GB ごとの価格は 0.01USD です。
詳細は以下をご参照ください。

料金 – AWS Amplify Console | AWS

今回のアップデート

これまでも Amplify コンソールではソースリポジトリのブランチごとにデプロイ、ホスティング機能を提供していたのですが、今回のアップデートで新たにすべてのブランチデプロイに対してサブドメインの自動作成 / 削除機能ができるようになりました。

試してみる

AWS のブログに従い、今回のアップデート内容を見ていきましょう。
Automatically create and delete custom sub-domains for your branch deployments with Amplify Console | AWS Mobile Blog
以下ステップにて進めていきます。

  1. Step1: サンプルアプリのデプロイ
  2. Step2: 自動検知の有効化
  3. Step3: カスタムドメインのセットアップ
  4. Step4: サブドメイン自動作成/削除の設定
  5. Step5: デプロイ済みブランチの自動削除

Step1: サンプルアプリのデプロイ

今回サンプルアプリとして、 Gatsby 公式のブログ用テーマ gatsby-starter-blog: Gatsby Starter | GatsbyJS を使用します。
こちら のリンクをクリックすると、 GitHub にリポジトリがフォークされ、 Amplify にて Gatsby スターターブログがビルド、デプロイ、ホストされます。
リンクをクリックすると、以下画面が現れるので Connect to GitHub ボタンをクリック。
GitHub の認証画面が表示された場合は、認証を行ってください。

任意のアプリ名を入力し Save and deploy ボタンをクリックします。

GitHub リポジトリのフォーク、 Amplify コンソールアプリの作成のあと、

ビルドが開始します。

Continue ボタンをクリックすると Amplify コンソールに移動して、ステータスを確認できます。

しばらく経つとデプロイが完了するので、左の画像をクリックしホスティングされているアプリにアクセスしてみましょう。

Gatsby Starter Blog がデプロイされています。

Step2: 自動検知の有効化

続いてブランチの自動検知機能を有効化していきます。
先程の Amplify コンソールの画面から アプリの設定全般 を選択します。

続いて右上の 編集 ボタンをクリック。

Branch autodetection および Branch auto-disconnection を有効化し、 Branch autodetection – patterns に検知したいパターンを入力します。
Branch autodetection を有効化することで指定したパターンに一致するブランチが Git リポジトリ上に作成された場合に Amplify が自動的に接続し、デプロイを行います。
また、 Branch auto-disconnection も有効化しておくことで、指定したパターンに一致するブランチが削除された場合に自動的に接続を解除し、紐づくリソースを削除します。
今回、検知するパターンとしては feature* (featureから始まるブランチ名) を指定しています。
入力が終わったら 保存 ボタンをクリックしましょう。

これで設定が完了したので、はじめにフォークした GitHub リポジトリ上で feature1 ブランチを作成してみます。

Amplify コンソールに戻ると、 feature1 ブランチのデプロイが開始されています。

デプロイが終わったので、確認してみましょう。

サブドメイン以外特に変わりはありません (内容は特に変えていないので当然) が、きちんとデプロイされていました。

Step3: カスタムドメインのセットアップ

続いてカスタムドメインのセットアップを行っていきます。
今回は Route53 で購入した serverworks.info を利用します。
アプリの設定ドメイン管理 を選択します。

カスタムドメインの追加 ボタンをクリックします。

ドメイン欄から対象のドメインを選択し、以下のように設定します。

保存 ボタンをクリックすると、Amplify 側で SSL 証明書を発行し、 CNAME レコードを作成します。
めっちゃ便利ですね。

しばらく経つと設定が完了するので、それぞれのサイトに改めてアクセスしてみましょう。

  • https://master.serverworks.info/

  • https://feature1.serverworks.info/

    きちんとそれぞれカスタムドメインでホスティングされています。

Step4: サブドメイン自動作成/削除の設定

今、手動でサブドメインの設定を行いました。
次の設定にてブランチ名に合わせてサブドメインを自動で作成するようにします。
先ほどのドメイン管理の画面から、 サブドメインの管理 ボタンをクリックします。

Subdomain auto-detection にチェックを入れ、パターンの入力欄はデフォルトのままにしておきます。
デフォルト設定だと、 Amplify コンソールに接続されるすべてのブランチに対してサブドメインを作成します。
もし任意のブランチだけにサブドメインを持たせたいような場合は、 feature/* のようにこの項目をカスタマイズしてください。
今回はこのまま 更新 ボタンをクリックします。

早速 GitHub リポジトリに feature2 ブランチを作成し、動作をお確認してみましょう。

ブランチの作成とほぼ同時に、 Amplify コンソールにて feature2 ブランチのデプロイが開始されました。

デプロイが完了したので、左の画像をクリックしてサイトにアクセスしてみます。

https://feature2.serverworks.info でアクセスできています!

Step5: デプロイ済みブランチの自動削除

今度は、 GitHub リポジトリからブランチを削除し、 Amplify にてデプロイ済みのブランチが削除されることを確認してみます。
feature2 ブランチを削除してみましょう。

そうするとすぐに先ほどデプロイした feature2 ブランチのリソースが削除されています。

おわりに

これまで AWS CodePipeline や AWS CodeBuild で CI/CD のフローを作っていたのですが、Amplify めちゃめちゃ便利ですね!
どんどんこれから使っていきたいです!

また、この内容は 2020/7/1(水) 18:00 よりYouTube にて配信する「30分でわかる AWS UPDATE!」で取り上げますので、是非ご覧ください!
チャンネル登録よろしくおねがいします!!
サーバーワークス チャンネル – YouTube

参考

AWS運用自動化サービス「Cloud Automator」