Introduction to Amplify with CloudFormation

2023-06-172024-04-27

Introduction to Amplify with CloudFormation

Amplify is taken up.

AWS Amplify is a set of purpose-built tools and features that enables frontend web and mobile developers to quickly and easily build full-stack applications on AWS.
Welcome to AWS Amplify Hosting

This page is an introduction to Amplify, so we will create a simple Amplify application using CloudFormation.

Environment

Diagram of introduction to Amplify with CloudFormation.

Create a CodeCommit repository.
When the HTML is pushed to the repository, Amplify will start the build.
When the build is complete, the HTML file will be hosted.

CloudFormation template files

The above configuration is built with CloudFormation.
The CloudFormation templates are placed at the following URL

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

Explanation of key points of template files

CodeCommit

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

Create a CodeCommit repository.

No special settings are required.

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 application and branch.

The key point is the Repository property.
Specify the CodeCommit repository mentioned earlier.

Default values are set for other properties.

The following is the IAM role for the Amplify application.

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)

Default permissions are also granted here.

Architecting

Use CloudFormation to build this environment and check its actual behavior.

Create CloudFormation stacks and check the resources in the stacks

Create CloudFormation stacks.
For information on how to create stacks and check each stack, please see the following page.

After reviewing the resources in each stack, information on the main resources created in this case is as follows

CodeCommit repository: fa-133
Amplify application: fa-133

Check the CodeCommit repository.

The repository has been successfully created.

Check the trigger settings.

Trigger information is automatically set.
The trigger is set to run whenever some event occurs.
Notifications are automatically created for SNS topics.

Check this SNS topic.

Indeed, an SNS topic is generated.
The subscriber for this topic has a given API Gateway endpoint set up with HTTPS.

Check Amplify.

The Amplify app branch has been successfully created.
You can see that it is linked to the aforementioned CodeCommit repository.

Operation Check

Now that you are ready, push the HTML file to the CodeCommit repository.

First, pull 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)

An empty repository has been pulled.

Add HTML files to the repository.

$ 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)

Push the HTML file to 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)

I was able to push successfully.

Check CodeCommit again.

Indeed, HTML files are pushed.

Check the Amplify application again.

The application build has started.

After a short wait, the build is complete.

Access the domain of the generated app.

$ 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)

The HTML file that was pushed to the CodeCommit repository has been returned.
You have indeed hosted the HTML file in the Amplify app.

Summary

As an introduction to Amplify, we created a simple Amplify application using CloudFormation.