AWSの静的ウェブサイトホスティングで入門するAWS Amplify(Console、CLI) - 構築編(Amplify Console)

小西秀和です。
前回「AWSの静的ウェブサイトホスティングで入門するAWS Amplify(Console、CLI) - 概要編」の記事でサーバーレスな静的ウェブサイトホスティングを題材に概要を説明しました。
今回はその記事の続編としてAmplify Consoleを使用して実際にサーバーレスな静的ウェブサイトホスティングを構築する手順を見ていきたいと思います。
AWS Amplify(Console、CLI)の概要について知りたい場合は元記事を参照してください。

Amplify Consoleによる静的ウェブサイトホスティング(Managed Hosting)の構築例

Amplify ConsoleではGitHub、BitBucket、GitLab、AWS CodeCommitといったリポジトリやGitプロバイダーを使用しないローカルアップロード、Amazon S3、URLといった方法でビルド・デプロイするソースを指定することができます。
この記事ではリポジトリを使用する例としてGitHub、リポジトリを使用しない例としてローカルアップロード、Amazon S3、URLについて手順を見ていきたいと思います。
この構築例で実現しようとしているアーキテクチャは次の図のようになります。

■Amplify Consoleによるアーキテクチャ例とエンドユーザーアクセス

Amplify Consoleによるアーキテクチャ例とエンドユーザーアクセス
Amplify Consoleによるアーキテクチャ例とエンドユーザーアクセス

GitHubを使用した例についてはCI/CDとホスティング環境の作成に加えて、AWSマネージドなAWS Certificate Managerによる証明書発行、ベーシック認証設定もやってみました。
以降で使用するGitHubやAWSアカウントは全て私の個人環境になりますので、実際に試す場合はそれぞれご自身の環境情報に置き換えていただければと思います。
それでは、GitHub、ローカルアップロード、Amazon S3、URLの順に構築手順を見ていきましょう。

リポジトリを使う場合(GitHub)

最初にリポジトリとしてGitHubを使用した場合の手順をまとめてみます。

  1. まず、GitHubでリポジトリとブランチを作成しておきます。今回の例では「amplify-console-demo」というプライベートリポジトリのmainブランチを使用します。
    ※GitおよびGitHubの使い方はここでは省略します。GitおよびGitHubの使い方については次のGitHubドキュメントなどを参照してください。
    クイックスタート - GitHub Docs
  2. 次にGitHubで作成したリポジトリのブランチにデモ用のファイル「index.html」を作成してプッシュしておきます。

    [iam@h-o2k.com ~]$ git clone git@github.com:uio8/amplify-console-demo.git
    [iam@h-o2k.com ~]$ cd amplify-console-demo/
    [iam@h-o2k.com amplify-console-demo]$ vi index.html 
    [iam@h-o2k.com amplify-console-demo]$ cat index.html 
    <!DOCTYPE html>
    <html>
    <head>
    <title>AWS Amplify Console Demo</title>
    </head>
    <body>
    AWS Amplify Console Demo
    </body>
    </html>
    [iam@h-o2k.com amplify-console-demo]$ git add .
    [iam@h-o2k.com amplify-console-demo]$ git commit -m "first commit."
    [iam@h-o2k.com amplify-console-demo]$ git push
    
  3. まずはAWSマネジメントコンソールにログインしてAWS Amplify Console(https://console.aws.amazon.com/amplify/)に遷移します。必要であれば、画面右上のリージョンメニューから使用するリージョンを選択します。
  4. まだ、AWS Amplify Consoleで何もアプリを作成していない場合は「Fastest, easiest way to develop mobile and web apps that scale.」と表示されている画面で「Get started」ボタンを押下し、

    f:id:uio8:20210717162641p:plain
    一番下の右側にある「Host your web app」とタイトルがある「Get started」ボタンを押下します。
    f:id:uio8:20210717162844p:plain
    既にアプリを作成している場合は画面右上の「New App」から「Host web app」を選択します。

  5. 「Host your web app」画面では、今回使用する「GitHub」を選択して「Continue」を押下します。

    f:id:uio8:20210717164334p:plain
    次の画面でリポジトリを作成したGitHubアカウントにサインインして認証します。 f:id:uio8:20210717192431p:plain

  6. 認証が成功すると「リポジトリブランチの追加」画面に遷移します。AWS Amplify Consoleのビルド・デプロイの対象にする「リポジトリ」(ここではamplify-console-demo)と「ブランチ」(ここではmain)を選択して「次へ」進みます。

    f:id:uio8:20210717192535p:plain

    ※リポジトリをmonorepoで運用している場合は「Connecting a monorepo? Pick a folder.」をチェックして、ビルド・デプロイ対象のアプリケーションへのパスを入力することで指定したパス配下のソースコードがビルド・デプロイされます。(様々な定義がありますが、monorepoとは一つの同じリポジトリに多くのプロジェクトやモジュールのコードを格納する管理方法のことです。)

  7. 「ビルド設定の追加」画面ではYAML形式の設定ファイルでビルドの設定をすることができます。ここでは自動検出されたビルド設定をそのまま使用して「次へ」進みます。

    f:id:uio8:20210717192639p:plain

  8. 「確認」画面で設定内容を確認して「保存してデプロイ」します。

    f:id:uio8:20210717192716p:plain

  9. アプリ管理画面の「Frontend environments」タブでホスティング環境へのデプロイ進捗状況が表示され、全てチェックマークになれば初回デプロイは完了です。ページ1枚とはいえビルドが実行されるため、プロビジョンから検証完了まで今回の場合は2分程度かかりました。
    GitHubなどリポジトリを使用する場合はリポジトリのブランチ毎に環境(environment)が作成されます。

    f:id:uio8:20210717192758p:plain
    アプリ管理画面の作成されたアプリのURLに遷移するとGitHubにプッシュした内容が表示されていることが確認できます。

    f:id:uio8:20210717192842p:plain

  10. 初回デプロイが完了したので、2回目以降のデプロイを試してみます。
    2回目のデプロイ以降はAmplify Consoleで設定したリポジトリのブランチに修正をプッシュするだけでビルドとデプロイが実行されます。
    ここではmainブランチに直接プッシュしていますが、きちんと別ブランチで開発してプルリクエストを作成するような場合もmainブランチにマージしたタイミングでAmplify Consoleのビルドとデプロイが実行されます。
    次のようにファイルを修正してGitHubにpushします。

    [iam@h-o2k.com amplify-console-demo]$ vi index.html 
    [iam@h-o2k.com amplify-console-demo]$ cat index.html 
    <!DOCTYPE html>
    <html>
    <head>
    <title>AWS Amplify Console Demo</title>
    </head>
    <body>
    AWS Amplify Console Demo<br/>
    2nd deploy.
    </body>
    </html>
    [iam@h-o2k.com amplify-console-demo]$ git add index.html 
    [iam@h-o2k.com amplify-console-demo]$ git commit -m "2nd commit."
    [iam@h-o2k.com amplify-console-demo]$ git push
    
  11. 2回目のデプロイも2分程度で完了し、ページの表示変更が確認できました。

    f:id:uio8:20210717192937p:plain
    f:id:uio8:20210717193008p:plain

  12. Amplify Consoleではカスタムドメインの関連付けが簡単にできるため、ついでにやってみます。
    今回は予めAmazon Route 53に「h-o2k.com」というドメインをホストゾーンに追加している状態で「amplify-console-demo.h-o2k.com」というサブドメインをAmplify ConsoleのManaged Hosting環境に関連付けます。
    まず、Amplify Consoleの「ドメイン管理」画面で「カスタムドメインの追加」ボタンを押下します。

    f:id:uio8:20210717193036p:plain

  13. 「ドメイン管理」画面ではAmazon Route 53で管理しているドメインを検索して、Zone Apex(※1)、サブドメインの設定をします。 この画面ではサブドメインに加えてZone Apexにも環境(ブランチ)を関連付けることができ、Zone Apexから「www」ホスト名のサブドメインへリダイレクトするといった設定も追加できます。
    ただし、この例で関連付けたいのはサブドメインだけなので「Exclude root」を押下してZone Apexを除外し、「amplify-console-demo.h-o2k.com」というサブドメインのみ追加し「保存」します。
    ※1)Zone Apexとはサブドメインで使用するホスト名(wwwなど)を含まないドメイン名そのもののことです。Naked Domain、Root Domainと言われることもあります。

    f:id:uio8:20210717193103p:plain
    f:id:uio8:20210717193124p:plain

  14. SSL証明書設定とドメイン有効化のプロセスには20分ほどかかりました。設定が完了するとSSL証明書の発行と関連付けがされたManaged HostingのAmazon CloudFrontがAmazon Route 53のホストゾーンにCNAMEレコードとして追加され、カスタムドメインでも表示が確認できるようになります。

    f:id:uio8:20210717193153p:plain

  15. Amplify Consoleではベーシック認証の設定も簡単にできるため、こちらもついでにやってみます。まず、Amplify Consoleの「アクセスコントロール」画面で「アクセスの管理」ボタンを押下します。

    f:id:uio8:20210717193221p:plain

  16. 「アクセスコントロール」画面では環境全体にベーシック認証を設定する「Apply a global password」をONにするか、OFFにして環境(ブランチ)毎に設定するかが選択できます。ここではOFFにしてブランチ毎に認証を設定します。
    この例では「main」ブランチの「Access setting」を「制限 - パスワードが必須です」に選択し、「Username」を「Amplify」、「Password」を「will Amplify something in the 2020s.」で設定します。
    ※Passwordが7文字以上であること以外の制限については記載がありませんが、私が試した限りではUsernameが「:(コロン)」を除く半角英数字記号、Passwordは半角英数字記号が入力可能で、UsernameとPasswordの合計で1499文字まで入力可能でした。

    f:id:uio8:20210717193244p:plain
    f:id:uio8:20210717194436p:plain

  17. 再度、ドメインにアクセスすると実際にベーシック認証が設定されていることが確認できます。もちろん、設定したUsernameとPasswordでログインすることが可能です。

    f:id:uio8:20210717194503p:plain

  18. 続いてAmplify ConsoleでManaged Hostingのアクセスログを確認する方法も見ておきたいと思います。
    Amplify Consoleのアクセスログは2週間分保存され、「Monitoring」画面の「Access logs」タブで画面表示による確認できます。また、詳細な項目があるログ情報は「Download」ボタンでCSVファイル形式でダウンロードできます。
    ここで注意するべき点は、最新のログが表示されるまでに最大1時間かかる場合があること、アクセスログの保存期間は2週間までということです。

    f:id:uio8:20210719133343p:plain

    Amplify Consoleのアクセスログは画面からの表示とダウンロード以外にAWS CLI、AWS SDKなどAPIを使用したダウンロードも可能です。
    次に日本時間で指定した日付でAmplify Consoleのアクセスログを取得するAWS CLIシェルスクリプトを個人的に試してみたので記載しておきます。(ただし、ログに記載されている時間はUTCです。)

    #!/bin/bash
    #amplify_generate-access-logs_by_jst.sh
    #日本時間で指定した日付でAmplify Consoleのアクセスログを取得する。
    #使用例:bash ./amplify_generate-access-logs_by_jst.sh 20210718
    #GNU系のbash前提で書いてます。
    
    TARGET_DATE="${1}"
    LOG_DIR=<ログを保存するディレクトリパス>
    REGION=<AWSリージョン> # (例)ap-northeast-1などAWSリージョンの識別子
    APP_ID=<アプリID> #(例)「全般」画面にある「App ARN」の「/」より後の部分
    DOMAIN_NAME=<ドメイン名> #(例)環境のデフォルトドメインやh-o2k.comなど独自ドメイン
    
    #入力値が日付形式でなければ当日を指定
    if [ `date -d ${TARGET_DATE} > /dev/null 2>&1; echo $?` -ne 0 ] ; then
      TARGET_DATE=`date '+%Y%m%d'`
    fi
    
    #ここでは日本時間で指定した日付をUTCに戻すため、タイムスタンプを9時間前に設定しています。
    START_TIMESTAMP=`date -d "${TARGET_DATE} 9 hours ago" +%s`
    END_TIMESTAMP=`date -d "${TARGET_DATE} 23:59:59 9 hours ago" +%s`
    
    mkdir -p ${LOG_DIR}
    LOG_FILE=${LOG_DIR}/amplify_log_${REGION}_${APP_ID}_${DOMAIN_NAME}_${TARGET_DATE}.log
    
    #AWS CLIについてはhttps://docs.aws.amazon.com/cli/latest/reference/amplify/generate-access-logs.htmlを参照。
    echo "aws amplify generate-access-logs --region ${REGION} --app-id ${APP_ID} --domain-name ${DOMAIN_NAME} --start-time ${START_TIMESTAMP} --end-time ${END_TIMESTAMP} --query logUrl | xargs curl > ${LOG_FILE}"
    aws amplify generate-access-logs --region ${REGION} --app-id ${APP_ID} --domain-name ${DOMAIN_NAME} --start-time ${START_TIMESTAMP} --end-time ${END_TIMESTAMP} --query logUrl | xargs curl > ${LOG_FILE}
    
    一方で本記事執筆時点でAmplify ConsoleのアクセスログはAmazon S3へやAmazon CloudWatch Logsへの自動保存の機能はまだ統合されていないようです。そのため、アクセスログを長期間保存しておく場合などは別途前述のAWS CLIやAWS SDKを使うAWS Lambda関数などを定期的に実行するようにスケジューリングしてAmazon S3へやAmazon CloudWatch Logsなどに格納する必要があります。
    こちらは書くとさらに長くなりそうなので今回は省略します。

「リポジトリを使う場合(GitHub)」の例はここまでです。

リポジトリを使わない場合(Amazon S3)

次にリポジトリを使わないManual Deployの例としてAmazon S3を使用した場合の手順をまとめてみます。

  1. Amplify ConsoleのソースにAmazon S3を使用する場合はAmazon S3バケット上のzipファイルを指定する必要があります。
    そのため、まずデプロイするコードを作成し、ドキュメントルートに配置するファイル(ここではindex.html)の階層でzip圧縮します
    つまり、注意するべき点はAWS Lambdaなどと同じで、間違えてindex.htmlが入っている上位のディレクトリごと圧縮しないことです。
    (Windowsであれば上位のフォルダごと圧縮せず、デプロイ対象のファイルをすべて選択または複数選択して圧縮するようにします。)
    [iam@h-o2k.com ~]$ mkdir amplify-console-demo-s3
    [iam@h-o2k.com ~]$ cd amplify-console-demo-s3
    [iam@h-o2k.com amplify-console-demo-s3]$ vi index.html 
    [iam@h-o2k.com amplify-console-demo-s3]$ cat index.html 
    <!DOCTYPE html>
    <html>
    <head>
    <title>AWS Amplify Console Demo(Manual Deploy)</title>
    </head>
    <body>
    AWS Amplify Console Demo(Manual Deploy)
    </body>
    </html>
    [iam@h-o2k.com amplify-console-demo-s3]$ zip release-demo.zip *
    
  2. 次にこのzipファイルを管理するAmazon S3バケットを作成してzipファイルをアップロードします。ここではAmazon S3のコンソール(https://s3.console.aws.amazon.com/)で「amplify-console-demo-s3」というS3バケットを作成し、zipファイル「release-demo.zip」をアップロードします。

    f:id:uio8:20210717200829p:plain

  3. そして、AWS Amplify Console(https://console.aws.amazon.com/amplify/)で「New app」→「Host web app」を選択し、「Host your web app」画面で「Deploy without Git provider」を選択して「Continue」を押下します。

    f:id:uio8:20210717200850p:plain

  4. 「Manual deploy」画面で「App name」に任意のアプリ名(ここではamplify-console-demo-s3)、「Environment name」に任意の環境名(ここではtest)を入力し、「Method」に「Amazon S3」を選択してS3バケットとアップロードしたzipファイルを指定します。「Save and deploy」ボタンを押下するとビルドとデプロイが開始されます。

    f:id:uio8:20210717200930p:plain

  5. Manual deployではGitHubなどでリポジトリを使用する場合のビルドプロセスが無いため、わずか数秒程度でデプロイできます。 言い換えるとManual deployを使用する場合は必要であれば独自にビルドしておく必要があるということです。

    f:id:uio8:20210717201101p:plain
    ※↑Manual Deployによる初回デプロイ後のこの画面では、ドラッグアンドドロップや選択したファイルが確認画面無しに即座にデプロイされるようになっています。使用する際には気をつけたほうがよいでしょう。

  6. Manual DeployであるAmazon S3、URL、ローカルアップロード(Drag and drop)のどの方法で初回デプロイしても、次回以降のデプロイは「choose another method.」のリンクからManual DeployのAmazon S3、URL、ローカルアップロード(Drag and drop)のいずれかの方法を選択してデプロイできます。

    f:id:uio8:20210717201111p:plain

    ※Manual Deployを使用した場合の主な注意点として考えられるものを挙げておきます。
    • ビルドプロセスを含めることはできない(ビルドが必要な場合は独自にビルドしたものをzip化しておく必要がある)
    • 途中でGitHubなどのリポジトリを使用する方法に変更することはできない(新しいアプリとして作成する必要がある)
    • リポジトリを使用した方法のようにファイルのpushでデプロイ実行されるわけではない(例えばAmazon S3バケットに保存したオブジェクトを更新しても自動デプロイはされない)
    つまり、Manual Deployは初回も次回以降のデプロイもzipファイルを展開する機能に限定されるということです。

リポジトリを使わない場合(URL)

続いてManual DeployとしてURLを使用した場合の手順をまとめてみます。
ここでは、前述の「リポジトリを使わない場合(Amazon S3)」でS3バケットにアップロードしたzipファイル「release-demo.zip」を公開設定にして、URLからデプロイするケースを試します。
※当たり前ですがこのようにS3バケットのzipファイルを公開設定するとURLを知っていれば全ての人が見れるようになります。URLを指定してデプロイする方法はOSSなど公開されていても問題のないソースコードを使用する場合に限定した方がよいでしょう。

  1. Amazon S3の場合と同じように画面遷移して、「Manual deploy」画面で「App name」に任意のアプリ名(ここではamplify-console-demo-url)、「Environment name」に任意の環境名(ここではtest)を入力し、「Method」に「Any URL」を選択してzipファイルをアップロードしているURLを指定します。「Save and deploy」ボタンを押下するとビルドとデプロイが開始されます。

    f:id:uio8:20210717201151p:plain

  2. こちらもAmazon S3の場合と同様に数秒程度でデプロイできます。以降はAmazon S3と同様のため省略します。

リポジトリを使わない場合(ローカルアップロード)

最後にManual Deployとしてローカルアップロード(Drag and drop)を使用した場合の手順をまとめてみます。
ここでは、前述の「リポジトリを使わない場合(Amazon S3)」で作成したzipファイル「release-demo.zip」をローカルからデプロイするケースを試します。

  1. Amazon S3の場合と同じように画面遷移して、「Manual deploy」画面で「App name」に任意のアプリ名(ここではamplify-console-demo-local)、「Environment name」に任意の環境名(ここではtest)を入力し、「Method」に「Drag and drop」を選択してローカルのzipファイルを指定します。「Save and deploy」ボタンを押下するとビルドとデプロイが開始されます。

    f:id:uio8:20210717201215p:plain

  2. こちらもAmazon S3の場合と同様に数秒程度でデプロイできます。以降はAmazon S3と同様のため省略します。

まとめ

Amplify Consoleの静的ウェブサイトホスティング(Managed Hosting)に的を絞って構築方法を見てきましたが、非常に少ない手順で環境ができるようになっています。
また、GitHubをはじめとしたリポジトリで本格的にバージョン管理とビルドプロセスを要する場合に加えて、リポジトリ連携が不要な場合の選択肢としてAmazon S3、URL、ローカルアップロードといったビルドプロセス無しで迅速に手動デプロイする方法も用意されています。
Amplify Consoleを使うことでCI/CDを含めた典型的なサーバーレスアーキテクチャを構築しやすくなり、今までよりさらにフロントエンドとバックエンドのアプリケーション開発に集中できるようになった印象です。この簡易性によってAWSサーバーレスアプリケーションのホスティング環境を活用できる機会やユーザーをその名の通りAmplifyしていると感じました。

話は変わりますが、前回の「AWSの静的ウェブサイトホスティングで入門するAWS Amplify(Console、CLI) - 概要編」と今回の記事では静的ウェブサイトホスティングを題材にした入門をテーマにしていたため、基本的にSPA(Single Page Application)前提で説明してきました。
一方でAmplify ConsoleのManaged HostingはSSR(Server Side Rendering)もサポートしています。
SSRとはクライアントのブラウザでウェブページをレンダリングするのではなく、サーバー側でウェブページをレンダリングしてブラウザに渡すプロセスのことです。
Amplify Consoleを使用したSSRアプリの開発については「AWS Amplify ConsoleでSSRアプリの複数環境(Multi Environment)を作ってみよう - 前編」から始まるシリーズで紹介されていく予定です。

次回は「AWSの静的ウェブサイトホスティングで入門するAWS Amplify(Console、CLI) 」の続編として、Amplify CLIを使用した静的ウェブサイト(Amazon S3+Amazon CloudFront)の構築例を紹介しようと思います。

小西秀和

執筆者小西秀和

ALL AWS Certifications Engineer(AWS認定全取得)の知識をベースにAWSクラウドの活用に取り組んでいます。