DEV Community

Inhwa Son
Inhwa Son

Posted on • Edited on

AWS Deployment Best Practices: Let's make your own SPA web app! - (2)

Key Content (✅ is in this post)

  • AWS connects with GitHub
  • S3 UI web hosting
  • Store my SSL/TLS certification in AWS Certificate Manager ✅
  • Connect CloudFront with SSL enabled domain ✅
  • Authentication with AWS Cognito
  • Create RDS to store data
  • Create backend based on Lambdas and API Gateway
  • AWS Rekognition implementation
  • AWS Transcribe implementation

Series 1

Requirements

  • Domain name

Store my SSL/TLS certification in AWS Certificate Manager

Now, we deployed our webpage in S3, so let's publish it with SSL certified domain. I am a graduate student so I was provided free 2 domain names from name.com. I use name.com domain because they give you free SSL/TLS certification to protect your website securely.

Image description
After acquiring domain name, you can click Active SSL to issue certificate.

Image description

To issue SSL/TLS certificate, you need to issue CSR. I used this website to issue simply. Keep in mind that you should never lose this CSR private key.

Then after few minutes of verification, you will receive an email with .crt files with Certification.

Image description

Let's go to ACM.

Image description

Image description
You need to fill in this 3 parts.

  • Certification Body: you can find either from name.com or inside of email
  • Certificate private key: CSR that I put bold above
  • Certificate chain: Since we downloaded .crt files from email, I run this command to make a chain. Then, paste certificat_chain.crt in this section.
cat SectigoRSADomainValidationSecureServerCA.crt USERTrustRSAAAACA.crt > certificate_chain.crt
Enter fullscreen mode Exit fullscreen mode

After successfully imported, you can find your Certification is showing your domain properly.

Image description


Connect CloudFront with SSL enabled domain

Image description
We need to create distribution.

Image description
You can select your s3 bucket for origin, and click Use web endpoint, then it will change into

Image description
like this.

Image description
Since we imported custom certification above, we can check that it shows up under here. So select this to connect.

After successfully creation,
Image description
The blue box and red box are important. I had issue with missing Alternate domain names. After filling in, I could successfully connect my CloudFront.

When it's successfully deployed, we can see our website anywhere!

Image description

Top comments (0)