CloudFormationでAmplify入門

2023-06-172024-04-27

CloudFormationでAmplify入門

Amplifyを取り上げます。

AWS Amplifyは、フロントエンドのウェブおよびモバイルデベロッパーがAWSで迅速かつ簡単にフルスタックアプリケーションを構築できるようにする専用のツールと機能のセットです。
AWS Amplifyホスティングへようこそ

本ページはAmplify入門ということで、CloudFormationを使用して、シンプルなAmplifyアプリを作成します。

構築する環境

Diagram of introduction to Amplify with CloudFormation.

CodeCommitリポジトリを作成します。
リポジトリにHTMLがプッシュされると、Amplifyでのビルドが開始されます。
ビルドが完了すると、HTMLファイルがホスティングされます。

CloudFormationテンプレートファイル

上記の構成をCloudFormationで構築します。
以下のURLにCloudFormationテンプレートを配置しています。

https://github.com/awstut-an-r/awstut-fa/tree/main/133

テンプレートファイルのポイント解説

CodeCommit

Resources:
  CodeCommitRepository:
    Type: AWS::CodeCommit::Repository
    Properties:
      RepositoryName: !Ref Prefix
Code language: YAML (yaml)

CodeCommitリポジトリを作成します。

特別な設定は不要です。

Amplify

Resources:
  App:
    Type: AWS::Amplify::App
    Properties:
      BuildSpec: |
        version: 1
        frontend:
          phases:
            # IMPORTANT - Please verify your build commands
            build:
              commands: []
          artifacts:
            # IMPORTANT - Please verify your build output directory
            baseDirectory: /
            files:
              - '**/*'
          cache:
            paths: []
      CustomRules:
        - Source: /<*>
          Status: 404-200
          Target: /index.html
      EnableBranchAutoDeletion: false
      IAMServiceRole: !GetAtt AppRole.Arn
      Name: !Ref Prefix
      Platform: WEB
      Repository: !Ref CodeCommitRepositoryCloneUrlHttp

  Branch:
    Type: AWS::Amplify::Branch
    Properties:
      AppId: !GetAtt App.AppId
      BranchName: !Ref BranchName
      EnableAutoBuild: true
      EnablePerformanceMode: false
      EnablePullRequestPreview: false
      Framework: Web
      Stage: PRODUCTION
Code language: YAML (yaml)

Amplifyアプリとブランチです。

ポイントはRepositoryプロパティです。
先述のCodeCommitリポジトリを指定します。

他のプロパティについては、デフォルトの値を設定しています。

以下がAmplifyアプリ用のIAMロールです。

Resources:
  AppRole:
    Type: AWS::IAM::Role
    DeletionPolicy: Delete
    Properties:
      AssumeRolePolicyDocument:
        Version: 2012-10-17
        Statement:
          - Effect: Allow
            Principal:
              Service:
                - amplify.amazonaws.com
            Action:
              - sts:AssumeRole
      Policies:
        - PolicyName: CloudFormationDeployPolicy
          PolicyDocument:
            Version: 2012-10-17
            Statement:
              - Effect: Allow
                Action:
                  - logs:CreateLogStream
                  - logs:PutLogEvents
                Resource: !Sub "arn:aws:logs:${AWS::Region}:${AWS::AccountId}:log-group:/aws/amplify/*:log-stream:*"
              - Effect: Allow
                Action:
                  - logs:CreateLogGroup
                Resource: !Sub "arn:aws:logs:${AWS::Region}:${AWS::AccountId}:log-group:/aws/amplify/*"
              - Effect: Allow
                Action:
                  - codecommit:GitPull
                Resource: !Ref CodeCommitRepositoryArn
Code language: YAML (yaml)

こちらもデフォルトの権限を付与しています。

環境構築

CloudFormationを使用して、本環境を構築し、実際の挙動を確認します。

CloudFormationスタックを作成し、スタック内のリソースを確認する

CloudFormationスタックを作成します。
スタックの作成および各スタックの確認方法については、以下のページをご確認ください。

各スタックのリソースを確認した結果、今回作成された主要リソースの情報は以下の通りです。

CodeCommitリポジトリ：fa-133
Amplifyアプリ：fa-133

CodeCommitリポジトリを確認します。

正常にリポジトリが作成されています。

トリガー設定を確認します。

自動的にトリガー情報が設定されています。
何らかのイベントが発生するたびに、トリガーが実行されるように設定されています。
通知は自動的に作成されたSNSトピック宛です。

このSNSトピックを確認します。

確かにSNSトピックが生成されています。
このトピックのサブスクライバーには、HTTPSで所定のAPI Gatewayエンドポイントが設定されています。

Amplifyを確認します。

Amplifyアプリ・ブランチが正常に作成されています。
先述のCodeCommitリポジトリと連携できていることがわかります。

動作確認

準備が整いましたので、CodeCommitリポジトリにHTMLファイルをプッシュします。

まずCodeCommitをプルします。

$ git clone https://git-codecommit.ap-northeast-1.amazonaws.com/v1/repos/fa-133
Cloning into 'fa-133'...
warning: You appear to have cloned an empty repository.
Code language: Bash (bash)

空のリポジトリがプルされました。

リポジトリにHTMLファイルを加えます。

$ cat << EOF > ./fa-133/index.html
> <!DOCTYPE html>
> <html lang="en">
>   <head>
>     <title>index.html</title>
>   </head>
>   <body>
>     <h1>fa-133</h1>
>   </body>
> </html>
> EOF
Code language: Bash (bash)

HTMLファイルをCodeCommitにプッシュします。

(master) $ git add .

(master) $ git commit -m "first commit"
[master (root-commit) 5a16cf1] first commit
...
 1 file changed, 9 insertions(+)
 create mode 100644 index.html

(master) $ git push
...
 * [new branch]      master -> master
Code language: Bash (bash)

正常にプッシュできました。

改めてCodeCommitを確認します。

確かにHTMLファイルがプッシュされています。

改めてAmplifyアプリを確認します。

アプリのビルドが開始されました。

しばらく待つと、ビルドが完了します。

生成されたアプリのドメインにアクセスします。

$ curl https://master.djirgnets96mz.amplifyapp.com/
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>index.html</title>
  </head>
  <body>
    <h1>fa-133</h1>
  </body>
</html>
Code language: Bash (bash)

CodeCommitリポジトリにプッシュしたHTMLファイルが返ってきました。
確かにAmplifyアプリでHTMLファイルがホスティングされました。

まとめ

Amplify入門ということで、CloudFormationを使用して、シンプルなAmplifyアプリを作成しました。