これまで色んなイベントで紹介されてきた AWS Amplify の機能である Amplify Console を、重い腰を上げて試してみることにしました。先日開催された 24時間の技術イベント JAWS SONIC 2020 でもいくつかのセッションで取り上げられていたので、それも後押しになっています。

イベントページはこちら。

JAWS SONIC 2020 & MIDNIGHT JAWS 2020

目次

JAWS SONIC 2020 での関連セッション

JAWS SONIC 2020 では下記のセッションで Amplify Console について触れられていました。(私が視聴していた分に限ります🙇🏻‍♂️)

やること

今回は、 Amplify Console を使って Hugo で作ったサイトをデプロイしてみます。また、普通にデプロイするだけでなく、 カスタムドメイン設定プルリクエストのプレビュー も試してみます。

Hugo サイトを作成

まずは Hugo でサイトを作ります。基本的には Hugo 公式のクイックスタート通りです。

Quick Start | Hugo

Hugo は現時点で最新の 0.75.1 を使います。

$ hugo version
Hugo Static Site Generator v0.75.1/extended darwin/amd64 BuildDate: unknown

今回は hugo-amplify-console という名前のサイトを作成します。

$ hugo new site hugo-amplify-console
$ cd hugo-amplify-console

Hugo のテーマは、チュートリアルと同じ ananke を使います。

$ git init
$ git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
$ echo '\ntheme = "ananke"' >> config.toml

これで最低限のサイトは完成したので、 GitHub のリポジトリに Push しておきます。

$ git add .
$ git commit -m "initial commit"
$ git remote add origin git@github.com:michimani/hugo-amplify-console.git
$ git push origin master:master

Amplify Console でアプリ作成

今回はマネジメントコンソールでポチポチやっていきます。

アプリの作成

アプリの作成 ボタンをクリックして作成手順を進めます。

ステップ 1 : リポジトリの設定

まず最初に接続する Git リポジトリを選択します。今回は GitHub なので、 GitHub を選択して次へ。

Create a Amplify App 1

GitHub と Amplify の連携認証画面に遷移するので、認証して続けます。

GitHub との認証が成功したら、接続する対象のリポジトリとブランチを選択します。今回は michimani/hugo-amplify-console と接続し、対象のブランチは master とします。

Create a Amplify App 2

ステップ 2 : ビルド設定

次のステップはビルド設定の構成で、 ビルド設定 (ビルドするためのコマンド等) を記述します。 CodeBuild の buildspec.yml みたいな感じです。

Create a Amplify App 3

ここで凄いなと思ったのが、ビルド設定は接続したリポジトリの内容から自動検出されるという点です。今回であれば Hugo のサイトなので、ビルドには hugo コマンドを実行し、成果物は public ディレクトリに生成されます。

自動検出されたビルド設定はそれらを考慮した内容になっており、特に変更する必要もなくそのまま次へ進みます。

ステップ 3 : 確認

最後に内容を確認して、アプリを保存します。

Create a Amplify App 4

保存後は初回のデプロイが始まるので、見守ります。

Create a Amplify App 5

失敗しました

初回のデプロイは失敗しました。

Failed to deploy a Amplify App

メッセージを見ると、どうやら記事が 1 つもないことでエラーになっているようです。とはいえ、順番にポチポチしていくだけでアプリの設定ができたのは、なんというか、あっけないですね。

Hugo に記事を追加して再ビルド

エラーを解消するべく、 Hugo に記事を追加してみます。

$ hugo new posts/initial-post.md

draftfalse に変更します。

  ---
  title: "Initial Post"
  date: 2020-09-17T07:20:57+09:00
- draft: true
+ draft: false
  ---

作成した記事を Push すると再度ビルドが実行され、今回は無事にデプロイが完了しました。

Deploy Amplify App 1

デプロイ後の URL にアクセスして確認してみます。

Deploy Amplify App 1

めちゃくちゃ簡単ですね。

カスタムドメイン設定

デフォルトで生成される URL は https://{ブランチ名}.{ハッシュ}.amplify.com という形式になっているので、カスタムドメインを設定してみます。

Amplify Console のアプリ画面には次のキャプチャのようなリストが表示されているので、この中から Add a custom domain with a free SSL certificate をクリックしてカスタムドメインの設定を進めます。

Custom setting for Amplify App

右上の カスタムドメインの追加 をクリックしてドメイン追加に進みます。

Add custom domain for Amplify App 1

今回は既に Route 53 で管理しているドメインを使います。ドメインの入力フォームにフォーカスを当てると Route 53 で管理しているドメインが候補に出てくるので、選択して ドメインを検索 をクリックします。

Add custom domain for Amplify App 2

michimani.net は既にこのブログで使っているドメインなので、 Exclude root をクリックして無効化しておきます。そして、今回は hugo-amplify.michimani.net というサブドメインを設定します。

ちなみに、 追加 をクリックしてドメイン設定を追加することができるので、例えば develop ブランチに dev.*** のサブドメインを設定することもできます。

Add custom domain for Amplify App 3

設定を保存すると、ドメイン管理画面に設定の進行状況が表示されます。

Add custom domain for Amplify App 4

設定の順番としては、

  1. SSL creation
  2. SSL configuration
  3. Domain activation

となっており、最後の 3. Domain activation までは約 5 分くらいで完了しました。 3. Domain activation フェーズに移行すると Status details に下記のようなメッセージが表示されます。

We verified domain ownership. We are propagating your custom domain to our global content delivery network which could take up to 30 minutes.

ドメインの有効化には最大 30 分かかると書かれていますが、30 分経たずとも設定したドメインでアクセスできることが確認できました。

View on custom domain for Amplify App

めちゃくちゃ簡単ですね。

プルリクエスト環境の有効化

今回の最後は、プルリクエストが作成された際にプルリクエストの内容でデプロイをするという設定です。

カスタムドメインのときと同様に、アプリ画面のトップに表示された Enable pull request previews から設定を進めます。

Enable pull request previews for Amplify App 1

GitHub app をインストールするようダイアログが表示されるので、 Install GitHub app をクリックして進みます。

Enable pull request previews for Amplify App 1.1

別タブで GitHub 側の設定画面が開くので、諸々設定をしてマネジメントコンソール側に戻ります。すると、 Previews が表示されているので、対象のブランチを選択して Preview StratusEnabled に変更します。

Enable pull request previews for Amplify App 2
Enable pull request previews for Amplify App 2.1

プルリクエストを作成してみる

では、早速 master へのプルリクエストを作成してみます。変更内容は、先ほど作成した記事のタイトル変更です。

  ---
- title: "Initial Post"
+ title: "Initial Post - Pull Request"
  date: 2020-09-17T07:20:57+09:00
  draft: false
  ---

PR を作成すると、キャプチャ画像のように GitHub 側でも Amplify Console のステータスが表示されます。

Create pull request for mater branch of Amplify App 1

チェックが完了すると、マネジメントコンソール側でも Previews に PR の内容が Preview URL とともに表示されています。

Create pull request for mater branch of Amplify App 2

アクセスすると、 PR の内容を確認することができます。

Create pull request for mater branch of Amplify App 3

めちゃくちゃ簡単ですね。

まとめ

Amplify Console を使って Hugo で作ったサイトをデプロイしてみた話でした。

Amplify に関しては AWS のハンズオンで Amplify Framework の方だけは触ったことがありました (もしかしたら Amplify Console にも触れていたかも…)。ただ、手順を追うので精いっぱいで、それ以降全く触れていませんでした。

先日の JAWS SONIC 2020 でも Amplify Console に触れられていたセッションがいくつかあったので、今回 重い腰を上げて試してみたわけです。感想としては、諸々のことがめちゃくちゃ簡単でビックリ、です。

このブログも Hugo で作っており、デプロイは CodeBuild で、ドメインは Route 53 と ACM を使ってポチポチと設定しました。それに比べると Amplify Console ではそれぞれの設定を数ステップで完了することができるので、これだけでいいの?って思ってしまうくらいでした。

Amplify と一口に言っても Amplify Framework と Amplify Console は別物なので、 Amplify Console だけサクッと使ってみるのもいいな〜と思いました。


以上、よっしー (michimani) でした。

Share to ...

0

Follow on Feedly