Level 100
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.
Requirements:
- IntelliJ IDEA 2022.2.1 (Community Edition)
- Node v18.2.0
- Nx
- Sonarlint plugin
- AWS CLI
- Amplify ClI
AWS Services
- 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.
Hands On
Create application
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:
create-nx-workspace@14.7.3
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
Install Amplify ClI and deploy
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
Init Amplify project
Now, create amplify app using command line options in our workspace path and setting the options for the project.
$ amplify init
? Initialize the project with the above configuration? No
? Enter a name for the environment dev
? Choose your default editor: IntelliJ IDEA
? Choose the type of app that you're building javascript
Please tell us about your project
? What javascript framework are you using angular
? Source Directory Path: apps/labvelsite/src
? Distribution Directory Path: dist/apps/labvelsite
? Build Command: npm run-script build
? Start Command: ng serve
Using default provider awscloudformation
? Select the authentication method you want to use: AWS profile
For more information on AWS Profiles, see:
https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-profiles.html
? Please choose the profile you want to use labvel-blogs
Adding backend environment dev to AWS Amplify app: d1lgh1wbiy5tnx
Deployment completed.
Deployed root stack labvel [ ======================================== ] 4/4
amplify-labvel-dev-154600 AWS::CloudFormation::Stack CREATE_COMPLETE Sun Sep 11 2022 15:46:39…
DeploymentBucket AWS::S3::Bucket CREATE_COMPLETE Sun Sep 11 2022 15:46:37…
AuthRole AWS::IAM::Role CREATE_COMPLETE Sun Sep 11 2022 15:46:32…
UnauthRole AWS::IAM::Role CREATE_COMPLETE Sun Sep 11 2022 15:46:32…
✔ Help improve Amplify CLI by sharing non sensitive configurations on failures (y/N) · no
Deployment bucket fetched.
✔ Initialized provider successfully.
✅ Initialized your environment successfully.
Your project has been successfully initialized and connected to the cloud!
...
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.
Publish website
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
Finally, run 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
> labvel@0.0.0 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.
Clean Up
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…
Top comments (0)