I've been experimenting with various settings for AWS Amplify publishing 🎉
There are three main ways to publish to AWS Amplify.
- Publish via the Amplify Console using the AWS console
- Publish via the Amplify Console using the Amplify CLI
- 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.”
Click on "Start Using" under Amplify Hosting.
Click on "Deploy without a Git provider" to keep it simple this time.
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.
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 *
When the upload is finished, the URL will be issued.
The uploaded WebSite will be displayed.
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."
Set Access Settings to Restricted. Set the user and password → Click "Save."
Confirm the settings.
When you access the URL, you will be prompted to enter the user and password.
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."
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)$)([^.]+$)/>
Destination Address
/index.html
Redirect Type
200
Check the configuration.
You should now see the routing page.
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
Confirm the configuration.
amplify status
Automatically build and deploy your application to the cloud.
amplify publish
When the deployment is complete, a URL will be issued in the AWS console, which you can access.
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
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 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
Check the configuration.
amplify status
Remove the hosting environment.
amplify push
Confirm that the hosting environment has been automatically removed from the AWS console.
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)