hidekazu-konishi.com

AWS Amplify Features Focusing on Static Website Hosting - Relationship and Differences between AWS Amplify Hosting and AWS Amplify CLI

First Published: 2023-07-13
Last Updated: 2023-07-13

In previous articles, "Host a Static Website using AWS Amplify Hosting in the AWS Amplify Console" and "Host a Static Website configured with Amazon S3 and Amazon CloudFront using AWS Amplify CLI", I introduced how to build static website hosting using AWS Amplify Hosting and AWS Amplify CLI, respectively.
However, the capabilities of AWS Amplify are not limited to that. I would like to introduce the overall features and categories (functions) of AWS Amplify, and summarize the relationship and differences between AWS Amplify Hosting and AWS Amplify CLI, with a focus on static website hosting.

What is AWS Amplify?

In previous articles, I introduced how to build static website hosting using AWS Amplify Hosting and AWS Amplify CLI, but I will explain the overall picture of what AWS Amplify is.

AWS Amplify is a set of tools and services that support rapid web and mobile development by modeling an architecture that uses typical AWS serverless services.
With AWS Amplify, you add and use functions in units called categories, such as hosting, authentication, and storage.
Therefore, even if you say "Use AWS Amplify" in a word, it has a broad meaning, so it is easy to imagine what part you are talking about if you grasp the configuration outline of AWS Amplify's tools and categories (functions) when speaking or listening.

As of the time of writing this article, AWS Amplify consists of the following tools:

• Amplify Libraries: Provides client libraries that allow easy access to a backend composed of AWS resources such as authentication, data, and file storage from frameworks such as JavaScript, Swift, Android, Flutter, React Native.
• Amplify CLI: Generates AWS CloudFormation templates interactively from the command line to build the backend of a typical architecture.
• Amplify UI Components: Provides a UI toolkit to easily create a unified user interface for common sign-ins, sign-ups, etc. in frontend frameworks such as React, React Native, Angular, Vue, Flutter.
• Amplify Studio: A visual development environment for building full-stack web and mobile applications, based on the existing backend building features of AWS Amplify, such as the previous Amplify Admin UI that managed the backend.
• Amplify Hosting: Creates an AWS-managed static website hosting environment using the Amplify Console, and a Git-based CI/CD environment to deploy static content.

As mentioned earlier, functions of the backend composed of AWS resources such as authentication, data, and file storage that are built with the Amplify CLI and accessed from Amplify Libraries are called "categories".
The categories that can be handled with AWS Amplify and the AWS services that make up the categories are as follows, based on the command options of Amplify CLI:

List of AWS Amplify categories based on AWS Amplify CLI options

• analytics (Analysis): Amazon Pinpoint, Amazon Kinesis, Amazon Personalize
• api (GraphQL API/REST API): AWS AppSync, Amazon API Gateway
• auth (Authentication): Amazon Cognito
• function (Functions): AWS Lambda
• geo (Geolocation): Amazon Location Service
• hosting (Static Website Hosting): Managed Hosting (Amplify Hosting), Amazon S3 + Amazon CloudFront
• interactions (Interactive Interface): Amazon Lex
• notifications (Push Notifications): Amazon Pinpoint
• predictions (AI/ML Predictions): Amazon Rekognition, Amazon Polly, Amazon Comprehend, Amazon Translate, Amazon Transcribe, Amazon Textract
• storage (Storage): Amazon S3, DynamoDB

In addition, the categories that can be used as Amplify Libraries other than the command options of Amplify CLI are as follows:

• PubSub: AWS IoT, MQTT over WebSockets
• DataStore: Amplify DataStore
  * A library that provides a client-side data storage that can synchronize and manage versions with AWS AppSync using GraphQL, and a synchronization function with the cloud.

So far, I have summarized the features of AWS Amplify as of the time of writing this article, but as AWS Amplify is frequently updated, I recommend checking the latest tools and categories in the Amplify Framework Docs.

Features related to static website hosting provided by AWS Amplify

Next, let's look at the differences and relationships between AWS Amplify Hosting and AWS Amplify CLI (hosting category) introduced in previous articles, "Host a Static Website using AWS Amplify Hosting in the AWS Amplify Console", "Host a Static Website configured with Amazon S3 and Amazon CloudFront using AWS Amplify CLI".

AWS Amplify Hosting in the AWS Amplify Console not only provides a static website hosting environment, but also provides a Git-based workflow for building and deploying web applications that include both frontend and backend.

On the other hand, AWS Amplify CLI is a tool that generates and runs AWS CloudFormation templates interactively by selecting a category that constructs typical architectures according to the use case, and it can also configure static website hosting with Amazon S3 and Amazon CloudFront managed by the user.

The table below organizes the features of AWS Amplify Hosting and AWS Amplify CLI related to static website hosting.
* The yellow and pink background parts of this table are features related to static website hosting.

Tool	Category	Overview
AWS Amplify Hosting in the AWS Amplify Console	Integration with Amplify Studio	Enable Amplify Studio from Amplify Console and use visual development environment for building backend and UI components and managing apps.
	Hosting (Managed Hosting)	Deploy AWS managed static website hosting environment from Amplify Console, which allows the use of custom domains and SSL/TLS certificates and setting up basic authentication style access control.
AWS Amplify CLI		Managed Hosting (AWS Amplify Hosting) can be selected from interactive options of Amplify CLI, and transitions to AWS Amplify Console.
	Hosting (S3 + CloudFront)	User-managed Amazon S3 and Amazon CloudFront hosting environment can be selected from interactive options of Amplify CLI, and AWS CloudFormation templates are generated and deployed by Amplify CLI.
	Other categories that can be handled with Amplify CLI	Deploy backend categories introduced in the aforementioned "List of AWS Amplify categories based on AWS Amplify CLI options".

Summary of Static Website Hosting with AWS Amplify Hosting in the AWS Amplify Console

Based on what I explained in "Host a Static Website using AWS Amplify Hosting in the AWS Amplify Console", static website hosting with AWS Amplify Hosting in the AWS Amplify Console has the following characteristics.

• Provides a static website hosting environment managed by AWS.
  * Unlike static website hosting with Amazon S3 and Amazon CloudFront managed by the user, AWS Amplify Hosting does not allow users to directly set up Amazon S3, Amazon CloudFront, and others.
• Provides a CI/CD pipeline to deploy static content (HTML, CSS, JavaScript, images, videos, etc.) from a Git provider's (GitHub, BitBucket, GitLab, AWS CodeCommit, etc.) repository to the static website hosting environment managed by AWS.
• Deployment can also be made from sources other than Git providers, such as drag and drop (local upload), Amazon S3, and Any URL.
• There are optional features such as separation of stages and environments (development, staging, production, etc.), association with custom domains, basic authentication style access control, setting of Rewrites and redirects, setting of Custom headers, and so on.
• Develop, integrate, and manage backend (categories that can also be handled from the Amplify CLI) and UI components in a GUI using the Amplify Studio activated from the Amplify Console.

The architecture example of AWS Amplify Hosting and the backend built using AWS Amplify Console and Amplify Studio is illustrated as follows:

Building AWS Amplify Hosting and Backend using Amplify Console, Amplify CLI, and Amplify Studio

Summary of Static Website Hosting with AWS Amplify CLI

Based on what I explained in "Host a Static Website configured with Amazon S3 and Amazon CloudFront using AWS Amplify CLI", static website hosting with AWS Amplify CLI has the following characteristics.

• Typical architectures are modeled and provided as categories I previously mentioned in "List of AWS Amplify categories based on AWS Amplify CLI options".
• The configuration of the category specified with the Amplify CLI command is interactively set in CUI, and AWS CloudFormation templates are generated in the background to deploy the backend environment by AWS resources.
• It is possible to customize or add Custom AWS resources to the AWS resources deployed with AWS Amplify CLI using AWS CloudFormation and AWS Cloud Development Kit (AWS CDK).
• The AWS resources deployed with AWS Amplify CLI can be exported to an AWS CDK project and incorporated into AWS CDK deployment pipelines using AWS CodePipeline.

AWS Amplify CLI basically installs the package on the OS you use and operates by executing commands in CUI. The commands of Amplify CLI are used in the form of amplify [command] [subcommand] [flags], and the types of commands (excluding categories) are as follows.
AWS Amplify CLI Command List

Command	Description
amplify configure	Set authentication information of the IAM user operating AWS, default region, and specify the IAM user profile used with Amplify CLI.
amplify init	Initialize the project, create an AWS CloudFormation template, and set up resources to be deployed on the AWS cloud.
amplify push	Provision AWS resources with an AWS CloudFormation template reflecting local modifications.
amplify pull	Obtain changes in the backend environment from the AWS cloud and update the local environment based on the environment definition.
amplify publish	Execute the aforementioned "amplify push" command, and build & deploy the front-end application and hosting environment.
amplify serve	Execute the aforementioned "amplify push" command, and test the front-end application by executing the project's start command.
amplify status	Display the state of local resources that have not been pushed to the AWS cloud in the project, such as creation, update, deletion.
amplify build	Build all resources associated with the project.
amplify delete	Delete all resources associated with the project from the cloud.
amplify add [Category]	Add the specified Amplify category to the backend of the local environment.
amplify update [Category]	Update the backend of the local environment for the specified Amplify category.
amplify push [Category]	Provision AWS resources with an AWS CloudFormation template reflecting local modifications for the specified Amplify category.
amplify remove [Category]	Remove the specified Amplify category from the backend of the local environment.
amplify console [Category]	Open the AWS Management Console to manage resources of the specified Amplify category in the browser.
amplify mock	Run a mock server to test the category in the local environment.
amplify codegen	Automatically generate GraphQL statements (queries, mutations, subscriptions) and types.
amplify env	Display and manage the environment settings of the project.
amplify plugin	Set up plugins to add commands and features to the existing AWS Amplify CLI.
amplify import	Import existing AWS resources within the AWS account to the Amplify project.
amplify diagnose	Capture non-sensitive Amplify backend metadata for debugging purposes.
amplify override	Override and customize backend AWS resources generated by the Amplify CLI with the AWS Cloud Development Kit (AWS CDK).
amplify export	Export the backend generated by the Amplify CLI as an AWS Cloud Development Kit (AWS CDK) stack.
amplify logout	Remove authentication information related to specific apps such as the Amplify Admin UI from the local and log out.
amplify upgrade	Download and install the latest version of the Amplify CLI.
amplify uninstall	Uninstall Amplify configuration files and the Amplify CLI without deleting the project.
amplify -h amplify --help	Display help for the overall Amplify CLI.
amplify [Category] -h amplify [Category] --help	Display help for the Amplify CLI Category.

* The [Category] requires the input of one of the categories introduced in "List of AWS Amplify categories based on AWS Amplify CLI options", such as
analytics, api, auth, function, geo, hosting, interactions, notifications, predictions, storage.

To set up a static website hosting environment with AWS Amplify CLI, you use the 'hosting' category. When you choose 'Hosting with Amplify Console' with the Amplify CLI's amplify add hosting command, you'll be transitioned to the AWS Amplify Console and you will set up a static website hosting using AWS Amplify Hosting (You can't modify individual services like Amazon S3 or Amazon CloudFront as AWS Amplify Hosting is Managed Hosting).

On the other hand, when you choose 'Amazon CloudFront and S3' with the Amplify CLI's amplify add hosting command to set up a static website hosting environment, it appears on the AWS Management Console as user-managed Amazon CloudFront and Amazon S3. Thus, you can customize and extend it using AWS CloudFormation or AWS CDK.

The architecture example of static website hosting built using the Amplify CLI's amplify add hosting command is illustrated as follows:

Building a Static Website Hosting environment using the amplify add hosting command in the Amplify CLI

References:
Amplify Framework Docs
Welcome to AWS Amplify Hosting - AWS Amplify Hosting
Override Amplify-generated backend resources using CDK | Front-End Web & Mobile
Extend Amplify backend with custom AWS resources using AWS CDK or CloudFormation | Front-End Web & Mobile
Export Amplify backends to CDK and use with existing deployment pipelines | Front-End Web & Mobile
CDK Pipelines: Continuous delivery for AWS CDK applications | AWS Developer Tools Blog

Summary

This time, I summarized the features of AWS Amplify tools and categories, as well as the relationship and differences between AWS Amplify Console and AWS Amplify CLI, focusing on static website hosting.

With AWS Amplify, you can quickly deploy AWS infrastructure with minimal configuration using a modelled architecture known as categories.
Particularly with AWS Amplify CLI, it generates AWS CloudFormation templates from minimal input, and builds AWS resources with typical architectures, allowing for even more abstracted and easier serverless architecture deployment than AWS CloudFormation or AWS CDK.
Also, AWS Amplify projects generated with the AWS Amplify CLI can be customized and expanded by overriding with AWS CDK and creating custom resources, and can also be exported as AWS CDK projects.

It seems that the method of configuration management of modeled architecture as code, such as AWS Amplify and AWS CDK, is called "Architecture as Code (AaC)".
* The concept of AaC is systematically explained in the AWS Blog article, "Containers and infrastructure as code, like peanut butter and jelly | Containers".

On the other hand, AWS Amplify is not perfect, and is not suited for patterns that require a lot of unique customization, such as complex architectures or detailed configuration for each AWS service or resource.
As it has always been and will continue to be, there is no change to the style of adopting configuration management methods according to the requirements and use cases, capturing the features of AWS services.