DEV Community

Cover image for Trying Out Various Settings for AWS Amplify Publishing
Yasunori Kirimoto for AWS Community Builders

Posted on

Trying Out Various Settings for AWS Amplify Publishing

img

I've been experimenting with various settings for AWS Amplify publishing πŸŽ‰

There are three main ways to publish to AWS Amplify.

  1. Publish via the Amplify Console using the AWS console
  2. Publish via the Amplify Console using the Amplify CLI
  3. Custom publishing using the Amplify CLI

The following is a detailed explanation.

  • Publish with Amplify Console
  • Publish Basic Authentication in Amplify Console
  • How to support routing in Amplify Console
  • Publish with Amplify Console (Amplify CLI)
  • Custom Publishing (Amplify CLI)
  • Deleting Public Settings (Amplify CLI)

Publish with Amplify Console

This is how to publish in the Amplify Console.

AWS Console β†’ Click β€œAWS Amplify.”
img

Click on "Start Using" under Amplify Hosting.
img

Click on "Deploy without a Git provider" to keep it simple this time.
img

Set the application name and environment name as desired. Drag and drop the set of files you want to publish, and click "Save and Deploy." As a sample, we will use a manually built application built with Vue.js.
img

The files to be uploaded are zipped using the following command; if they are compressed using the standard Mac GUI, they cannot be displayed even after deployment.

zip -r xxxxx.zip *
Enter fullscreen mode Exit fullscreen mode

img

When the upload is finished, the URL will be issued.
img

The uploaded WebSite will be displayed.
img

Although it does not appear on the console, it seems that the deployment is being done internally using Amazon S3 and Amazon CloudFront.

Publish Basic Authentication in Amplify Console

This is how to publish Basic Authentication in Amplify Console.

As a preliminary preparation, display your WebSite in Amplify Console.

Click Access Control β†’ Click "Manage Access."
img

Set Access Settings to Restricted. Set the user and password β†’ Click "Save."
img

Confirm the settings.
img

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

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

How to support routing in Amplify Console

This is how to handle routing in the Amplify Console.

In advance, display your WebSite in the Amplify Console.

Rewrite the redirect β†’ Click "Edit."
img

Set the source address, target address, and input β†’ Click "Edit." Enter the setting values referring to the AWS Amplify User Guide.

Original address

</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|woff2|ttf|map|json)$)([^.]+$)/>
Enter fullscreen mode Exit fullscreen mode

Destination Address

/index.html
Enter fullscreen mode Exit fullscreen mode

Redirect Type

200
Enter fullscreen mode Exit fullscreen mode

img

Check the configuration.
img

You should now see the routing page.
img

Publish with Amplify Console (Amplify CLI)

This is how to publish with Amplify Console using Amplify CLI. This hosting environment will be the same as "Publish with Amplify Console."

As a preliminary preparation, build the AWS Amplify environment.
AWS Amplify #002 - Build Environment [Vue.js Version]

Execution environment

  • node v16.10.0
  • npm v7.24.0

Set up the hosting environment. Select "Hosting with Amplify Console" at runtime.

amplify add hosting
Enter fullscreen mode Exit fullscreen mode

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

When the deployment is complete, a URL will be issued in the AWS console, which you can access.
img

The deployed WebSite will be displayed.

Custom Publishing (Amplify CLI)

This is a custom publishing method using Amplify CLI.

As a preliminary preparation, build the AWS Amplify environment.
AWS Amplify #002 - Build 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 set IP restrictions and Basic authentication for custom publishing, refer to the following article for additional settings. Alternatively, edit the AWS CloudFormation configuration file in the project.

Deleting public settings (Amplify CLI)

This is how to delete the publish settings using Amplify CLI. In the case of custom publishing, Amazon CloudFront will be deleted automatically, but Amazon S3 buckets will not be deleted, so you will need to delete them separately.

Configure the removal of the hosting environment.

amplify remove hosting
Enter fullscreen mode Exit fullscreen mode

img

Check the configuration.

amplify status
Enter fullscreen mode Exit fullscreen mode

img

Remove the hosting environment.

amplify push
Enter fullscreen mode Exit fullscreen mode

img

Confirm that the hosting environment has been automatically removed from the AWS console.
img

AWS Amplify allows you to publish in the Amplify Console, custom publishing, and Basic authentication πŸ’‘

In the next article, I hope to show you how to build your unique domain hosting environment for AWS Amplify.

Related Articles

Top comments (0)