I built a unique domain hosting environment with AWS Amplify 🎉

In my previous article, "Build a Unique Domain Hosting Environment with Amazon Route 53, AWS WAF, Amazon CloudFront, and Amazon S3", I tried to implement the contents of that article with AWS Amplify.

This article will show you how to build three unique domain hosting environment patterns.

How to build

Build a unique domain hosting environment from AWS console
- Publish using GitHub with Amplify Console
- Set up a unique domain with Amplify Console
Build a unique domain hosting environment from Amplify CLI
- Publish using GitHub with Amplify Console(Amplify CLI)
- Set up a unique domain with Amplify Console
Custom hosting environment for a unique domain built from Amplify CLI
- Custom publishing(Amplify CLI)

Build a Unique Domain Hosting Environment from the AWS Console

First, we will build a unique domain hosting environment from the AWS console using the Amplify Console.

This hosting environment is designed to be automatically built and deployed in conjunction with GitHub. Although it is not shown on the console, Amazon S3 and Amazon CloudFront are used internally for deployment. Also, it appears that AWS WAF cannot be configured additionally.

Publishing Using GitHub with Amplify Console

This is how to publish using GitHub with the Amplify Console.

Advance Preparation

Create a repository on GitHub and reflect your code
Add a Vue.js project as a sample

Click AWS Console → AWS Amplify.

Click "Start using" under Amplify Hosting.

Click on "GitHub."

Click "Authorize" when the GitHub authentication screen appears.

Select the repository and branch you have prepared in advance. → Click "Next."

Set an arbitrary application name, and click "Next."

Click "Save and Deploy."

A URL will be issued in the AWS console when the automatic deployment is finished, so access it.

The deployed WebSite will be displayed.

Set Up a Unique Domain with Amplify Console

This is how to set up a unique domain with the Amplify Console.

Advance Preparation

Get a unique domain using Amazon Route 53

Amazon Route 53 #001 - Purchase and register your domain name

Click on "Manage Domains."

Click on "Add Domain."

Select the target domain → Click "Configure Domain."

Confirm the target domain and branch → Click "Save."

After the settings are complete, access a unique domain.

Your website will appear on your domain.

Build a Unique Domain Hosting Environment from Amplify CLI

The next step is to build a unique domain hosting environment from the Amplify CLI using the Amplify Console.

This will be the same hosting environment as described in "Publishing using GitHub with Amplify Console."

Publish Using GitHub with Amplify Console (Amplify CLI)

This is how to use Amplify CLI to publish using GitHub on Amplify Console.

Advance Preparation

Build AWS Amplify environment

AWS Amplify #002 - Building Environment [Vue.js Version]

Execution environment

node v16.10.0
npm v7.24.0

Set up the hosting environment. Select "Hosting with Amplify Console" and "Continuous deployment (Git-based deployments)" at runtime.

amplify add hosting

The AWS console will automatically appear. Click on "GitHub."

Click "Authorize" when the GitHub authentication screen appears.

Select the target repository and branch you prepared in advance → Click "Next."

Select the target application and environment. If there is no existing role, click "Create New Role."

Select "AWS Service" as the entity type. Select "Amplify" as the use case → Click "Next."

Click "Next."

Set any role name → Click "Create Role."

Select the role you created → Click "Next."

Click "Save and Deploy."

After completing the settings in the AWS console, return to the command and execute Enter.

A URL will be issued in the AWS console when the automatic deployment is finished, so access it.

The deployed WebSite will be displayed.

Set Up a Unique Domain with Amplify Console

This is how to set up a unique domain with the Amplify Console.

Advance Preparation

Get a unique domain using Amazon Route 53

Amazon Route 53 #001 - Purchase and register your domain name

Click on "Manage Domains."

Click on "Add Domain."

Select the target domain → Click "Configure Domain."

Confirm the target domain and branch → Click "Save."

After the settings are complete, access a unique domain.

Your website will appear on your domain.

Custom Hosting Environment for a Unique Domain Built from Amplify CLI

Finally, we will build a unique domain hosting environment using Amazon CloudFront and Amazon S3 directly from the Amplify CLI.

Custom Publishing (Amplify CLI)

This is a custom publishing method using Amplify CLI.

Advance Preparation

Build AWS Amplify environment

AWS Amplify #002 - Building Environment [Vue.js Version]

Execution environment

node v16.10.0
npm v7.24.0

Set up the hosting environment. Select "Amazon CloudFront and S3" at runtime.

amplify add hosting

Confirm the configuration.

amplify status

Automatically build and deploy your application to the cloud.

amplify publish

Confirm that the application is not deployed in the AWS Amplify Console.

Make sure it is automatically deployed to Amazon S3.

Make sure it is automatically deployed to Amazon CloudFront. Access the URL that was created.

When you access the deployed URL, you may not be able to see it immediately depending on your region. According to "Amplify Docs - Hosting," it should appear in 24 hours. If you want to see it right away, you can use the following settings.

Origin → Select the target origin → Click "Edit."

Select the same origin domain again (a region will be added to the domain), and click "Save Changes."

The deployed WebSite will be displayed.

If you want to use a unique domain setting or AWS WAF for custom publishing, refer to the following article for additional settings. Alternatively, edit the AWS CloudFormation configuration file in the project.

Build a Unique Domain Hosting Environment with Amazon Route 53, AWS WAF, Amazon CloudFront, and Amazon S3

Using AWS Amplify, you can build various unique domain hosting environments and automatically build and deploy them in conjunction with GitHub 💡

In the future, I'd like to experiment with AWS CloudFormation, AWS CDK, etc. to see how far each service configuration can be defined.