AWS: Deploying Angular App in Cloudfront with SSL

Deployment Architecture

We will learn how to deploy an Angular App in AWS S3 via CloudFront (With SSL). Will also deploy a REST backend in EC2 exposed via ALB.

AWS Service

• EC2: We will host our spring boot app in EC2.
• ALB: Since we need to enable SSL in the frontend, we need the backend also to have SSL. We will use ALB( since it very easy to set SSL)
• S3: We use static website hosting in S3 to host our angular app.
• Cloudfront: We use this to enable SSL & re-route rule for our S3 static website.
• Certificate Manager: Used to issue self-signed SSL certificates via AWS.

Hosting Spring Boot in EC2

1. Let's build our spring boot project.
2. Once build, we take the fat jar from /targetfolder and upload it to EC2. You can use FileZilla for the same.

3. Now you have to run your .jar as a job inside ec2. You have to use nohup .

$ nohup java -jar resource-server.jar >resource-server-log.txt

4. Once running, you can log out of the machine and hit the health check endpoint to validate the same.

Note: Once .jar is executed as a job and logged out, we need to use the below commands to find & stop the app.

ps -A |grep java
kill -9 PID
tail -100f resource-server-log.txt

Create Self Signed Certificate for ALB

1. Install OpenSSL in windows.
2. Go to the OpenSSL /bindirectory, and run the below commands in Admin cmd.

> openssl genrsa 2048 > my-private-key.pem
> openssl req -new -x509 -nodes -sha256 -days 365 -key my-private-key.pem -outform PEM -out my-certificate.pem

These commands will create a private key and a certificate for the specified domain.

Enter the details accordingly.

Note: Self-signed certificate is only recommended for testing purposes.

Enable SSL for EC2 Service

There are multiple ways to do the same. AWS Certificate Manager can enable SSL on AWS Managed services like

• API Gateway
• ALB

We will go with ALB approach for simplicity.

1. Create an ALB with https listener.

2. In the next screen select, select upload certificate to ACM. Copy Paste the contents of private key and certificate to the input fields. Make sure you don’t have any extra newline etc.

3. Create a target group, specifying health check endpoint.

5. Register the target EC2 in the ALB.

6. If everything goes well, you will see healthy targets in the Target group. ( It takes around 2 mins to change the initial status to healthy)

7. Try accessing the health check endpoint.

Hosting your front end in S3

1. Build your Angular app

ng build --prod --aot

2. Once you have built the angular app, copy the contents from /dist folder to S3 bucket.

3. Make the S3 bucket as public by providing the below configurations

3.a Disable “Block all public access”

Block Public Access

3.b Bucket Policy update

4. Enable CORS policy

5. Enable static website hosting.

Once completed, you will able to access the website via the URL mentioned in the static web hosting.

Note: You can add redirection rules in S3, for files that exist in S3. In case of SPA, a URL /dashboarddoesn’t point to a dashboard.htmlpage. It points to a route within the SPA. If it had pointed to a dashboard.htmlpage, we could use the redirection rule.

The above page routing might work for static HTML website, but not for SPA. So, how do we solve this path issue in AWS? We use Cloudfront for that.

Deploy S3 Site in Cloudfront

1. Create CloudFront for your S3 bucket.

Select the s3 bucket in Origin Domain

2. Enable SSL.

Enable Default Certificate

3. Enable Headers in Distribution Settings. If you don’t enable you might get the CORS issue.

Note 1: In your frontend, you will face issue fetching response from backend. This is because, we have used self-signed cert for ALB. Chrome/Firefox doesn’t trust these certificates. You can whitelist these by directly opening the backend url directly. You will be prompted with “Potential Risk Ahead” warning. Accept it and proceed. Once accpeted, it will be whitelisted in the browser and you will be able see backend response in frontend.

Note 2: Set Allowed HTTP Methods as mentioned in the image below.

4. To enable path routing, create error re-route rule to redirect the path to index.html in CloudFront.

Note:

1. If in case, you change the S3 content, you can clear the cache from CloudFront, to reload the content.

input * for clearing all the cache

2. The first 1,000 invalidation paths each month are provided at no additional charge and above this level, there is a $0.005 charge per invalidation path.

Once everything is done, deploy the app. It takes around 20mins for deployment. After deployment just check if your path based routing works or not.

Hurray, you have deployed your complete project in AWS.

Found it Interesting?
Please show your support by 👏.