Trying Various Settings for AWS Amplify Gen2 Hosting

In 2024, AWS Amplify has evolved into Gen2.

Gen2 has evolved in many ways compared to Gen1, including TypeScript-first development, development in a separate per-developer sandbox environment, Git branch-based automated deployment, and AWS CDK-based integration of non-native Amplify features. Code-driven, full-stack development allows for seamless front-end and back-end integration and increased productivity.

I wrote an article on Hosting configuration for AWS Amplify Gen1 two years ago. This time, I will introduce Hosting settings for Amplify now in Gen2. I plan to try other features in the future.

Advance Preparation

Create a repository on GitHub and reflect your code.

Hosting Using GitHub with Amplify Console (Gen2)

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

Click AWS Management Console → AWS Amplify.

Click "Create new app."

Click "GitHub" → Click "Next."

Click "Authorize" when the GitHub authorization screen appears.

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

Click "Next."

Click "Save and deploy."

After deployment is complete, click "Visit deployed URL."

The deployed website will be displayed.

Publish Basic Authentication in Amplify Console (Gen2)

This is how to publish Basic Authentication in Amplify Console (Gen2).

Click Access control → Click "Manage access."

Set the access setting to Restricted. Set the username and password → Click "Save."

Confirm the settings.

When you access the URL, you will be prompted to enter the username and password.

Enter the user and password you set, and then the website will appear.

Amplify Console (Gen2) adds preview functionality

This is how to add a preview function in Amplify Console (Gen2).

Click Previews → Select a branch → Click "Edit settings."

Enable pull request preview → Click "Confirm."

Create a pull request with some changes to the file.

After creation, a preview link will be displayed.

You can also check the deployment environment for the preview in the Amplify Console.

Redeploy

The environment will be redeployed when the pull request is merged.

Click "Visit deployed URL" after deployment is complete.

The updated website will be displayed.

Related Articles

A Summary of My Activities in the 5 Years Since Discovering AWS Amplify

Yasunori Kirimoto for AWS Heroes ・ Jan 23

#amplify #aws #opensource

Contribute to AWS Amplify

Yasunori Kirimoto for AWS Heroes ・ Mar 2 '23

#amplify #amazonlocationservice #aws #opensource

Building a Map Application with Amazon Location Service, Leaflet, and AWS Amplify

Yasunori Kirimoto for AWS Heroes ・ Oct 17 '22

#amazonlocationservice #leaflet #amplify #aws

References
AWS Amplify