DEV Community

Cover image for Build a Unique Domain Hosting Environment with AWS Amplify
Yasunori Kirimoto for AWS Community Builders

Posted on • Updated on

Build a Unique Domain Hosting Environment with AWS Amplify

img

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

  1. Build a unique domain hosting environment from AWS console
    • Publish using GitHub with Amplify Console
    • Set up a unique domain with Amplify Console
  2. 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
  3. 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

img

Click AWS Console β†’ AWS Amplify.
img

Click "Start using" under Amplify Hosting.
img

Click on "GitHub."
img

Click "Authorize" when the GitHub authentication screen appears.
img

Select the repository and branch you have prepared in advance. β†’ Click "Next."
img

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

Click "Save and Deploy."
img

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

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

img

Click on "Manage Domains."
img

Click on "Add Domain."
img

Select the target domain β†’ Click "Configure Domain."
img

Confirm the target domain and branch β†’ Click "Save."
img

After the settings are complete, access a unique domain.
img

Your website will appear on your domain.
img

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
Enter fullscreen mode Exit fullscreen mode

img

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

Click "Authorize" when the GitHub authentication screen appears.
img

Select the target repository and branch you prepared in advance β†’ Click "Next."
img

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

Select "AWS Service" as the entity type. Select "Amplify" as the use case β†’ Click "Next."
img

Click "Next."
img

Set any role name β†’ Click "Create Role."
img

Select the role you created β†’ Click "Next."
img

Click "Save and Deploy."
img

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

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

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

img

Click on "Manage Domains."
img

Click on "Add Domain."
img

Select the target domain β†’ Click "Configure Domain."
img

Confirm the target domain and branch β†’ Click "Save."
img

After the settings are complete, access a unique domain.
img

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
Enter fullscreen mode Exit fullscreen mode

img

img

Confirm the configuration.

amplify status
Enter fullscreen mode Exit fullscreen mode

img

Automatically build and deploy your application to the cloud.

amplify publish
Enter fullscreen mode Exit fullscreen mode

img

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

Make sure it is automatically deployed to Amazon S3.
img

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

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.
img

Origin β†’ Select the target origin β†’ Click "Edit."
img

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

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.

Related Articles

Discussion (0)