As many know one of the most efficient options to publish our static websites safely and quickly in the AWS Cloud is through the integration of Amazon S3 and Cloudfront, however, when we come across these services it is important to know what are the best practices for their configuration and use. There are many alternatives to carry out this task from making use of the AWS console to implementing IaC with tools such as Terraform, Pulumi or CDK.
In this blog we will see an alternative using the Amplify CLI and exploring two options it offers us.
- IntelliJ IDEA 2022.2.1 (Community Edition)
- Node v18.2.0
- Sonarlint plugin
- AWS CLI
- Amplify ClI
- AWS Amplify is a complete solution that lets frontend web and mobile developers easily build, ship, and host full-stack applications on AWS, with the flexibility to leverage the breadth of AWS services as use cases evolve. No cloud expertise needed.
- Amazon CloudFront is a content delivery network (CDN) service built for high performance, security, and developer convenience.
- Amazon Simple Storage Service (Amazon S3) is an object storage service offering industry-leading scalability, data availability, security, and performance.
For this blog we use a simple app using Angular following the instructions in Angular Nx Tutorial
$ npx create-nx-workspace@latest Need to install the following packages: email@example.com Ok to proceed? (y) y ✔ Workspace name (e.g., org name) · labvel ? What to create in the new workspace … ? What to create in the new workspace … ? What to create in the new workspace … ? What to create in the new workspace … ? What to create in the new workspace … ✔ What to create in the new workspace · angular ✔ Application name · labvelsite ✔ Default stylesheet format · css ✔ Enable distributed caching to make your CI faster · Yes
Run app local
npx nx serve labvelsite
First we must install Amplify ClI- a unified toolchain to create, integrate, and manage the AWS cloud services for your app.
$ npm install -g @aws-amplify/cli $ amplify --version 10.0.0
Amplify Cli doesn't support SSO
Now, create amplify app using command line options in our workspace path and setting the options for the project.
Our environment is ready to publish, you can find more workflows in Typical workflows!
In the path project we find a new folder:
amplify, this folder has to amplify environment configurations and properties.
amplify/ ├── backend ├── cli.json ├── #current-cloud-backend ├── hooks ├── README.md └── team-provider-info.json 3 directories, 3 files
We can find multiple options for hosting web app, the next image shows the process using aws console.
The next step is publish our site, we need to create a new hosting with the command
amplify add hosting and select Amplify native or S3 more Amazon Cloudfront.
$ amplify add hosting amplify add hosting ? Select the plugin module to execute … (Use arrow keys or type to filter) ❯ Hosting with Amplify Console (Managed hosting with custom domains, Continuous deployment) Amazon CloudFront and S3
For this blog we are using Hosting with Amplify console.
✔ Select the plugin module to execute · Hosting with Amplify Console (Managed hosting with custom domains, Continuous deployment) ? Choose a type Manual deployment You can now publish your app using the following command: Command: amplify publish
amplify publish and follow the instructions
amplify publish ✔ Successfully pulled backend environment dev from the cloud. Current Environment: dev ┌──────────┬────────────────┬───────────┬───────────────────┐ │ Category │ Resource name │ Operation │ Provider plugin │ ├──────────┼────────────────┼───────────┼───────────────────┤ │ Hosting │ amplifyhosting │ No Change │ awscloudformation │ └──────────┴────────────────┴───────────┴───────────────────┘ No changes detected ? Do you still want to publish the frontend? Yes Publish started for amplifyhosting > firstname.lastname@example.org build > nx build > nx run labvelsite:build:production [existing outputs match the cache, left as is] Initial Chunk Files | Names | Raw Size | Estimated Transfer Size main.8fff4c92d8529583.js | main | 107.36 kB | 30.53 kB polyfills.954d50e1729d66f0.js | polyfills | 33.07 kB | 10.69 kB runtime.9a5f55b9d1d63084.js | runtime | 1.04 kB | 597 bytes styles.ef46db3751d8e999.css | styles | 0 bytes | - | Initial Total | 141.47 kB | 41.81 kB Build at: 2022-09-11T21:26:26.160Z - Hash: 5f2c7dce0ab87c06 - Time: 7148ms —————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————— > NX Successfully ran target build for project labvelsite (56ms) Nx read the output from the cache instead of running the command for 1 out of 1 tasks. See Nx Cloud run details at https://nx.app/runs/xJHzcroLaV ✔ Zipping artifacts completed. ✔ Deployment complete! https://dev.exampleabdskjep.amplifyapp.com
Now we have our site public in AWS Cloud.
To clean environment and cloud resources run
amplify remove hosting.
$ amplify remove hosting ? Are you sure you want to delete the resource? This action deletes all files related to this resource from the backend directory. Yes ✅ Successfully removed resource $ amplify push ✔ Successfully pulled backend environment dev from the cloud. Current Environment: dev ┌──────────┬────────────────┬───────────┬───────────────────┐ │ Category │ Resource name │ Operation │ Provider plugin │ ├──────────┼────────────────┼───────────┼───────────────────┤ │ Hosting │ amplifyhosting │ Delete │ awscloudformation │ └──────────┴────────────────┴───────────┴───────────────────┘ ? Are you sure you want to continue? Yes Deployment completed. Deployed root stack labvel [ ======================================== ] 1/1 amplify-labvel-dev-154600 AWS::CloudFormation::Stack UPDATE_COMPLETE Sun Sep 11 2022 16:53:17…