hidekazu-konishi.com
AWS Amplify Features Focusing on Static Website Hosting - Relationship and Differences between AWS Amplify Hosting and AWS Amplify CLI
First Published:
Last Updated:
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.
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
- 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.
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.
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.
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. |
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:
Tech Blog with curated related content
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.
Written by Hidekazu Konishi
Copyright © Hidekazu Konishi ( hidekazu-konishi.com ) All Rights Reserved.