Web App Promo Page - ATNSAYSDONT

Developed by Etienne Jacquot (2024)

Overview

• Web app promo page for Soundcloud content, etc: http://saysdont.ejacquot.com, or really whatever event I want to celebrate with a vanity domain single-page application 🥳🥳
• > Some additional testing & promo stuff!

Getting Started

Use Terraform to deploy the simple web app infrastructure, and git and eb to version & deploy the latest promo page ideas all to AWS.

⚠️ Update Terraform with Your AWS Named Profile:

• 🚨 Edit the main.tf for your specific aws required-provider resources, including the named profile value configured at ~/.aws/credentials (see here). For details on Elastic Beanstalk policies generally, see here.

Infrastructure Deploy

• Try the following for a simple eb deployment IaC deployment. This spins out a simple AWS Elastic Beanstalk environment using NodeJS on Linux:

  # clone the simple web app repo
  git clone atnsaysdont
  cd atnsaysdont/
  
  ## deploy your eb infra
  # create your environment on AWS
  terraform init
  terraform apply

Application Deployment

• When your terraform apply is finished with, proceed to deploy a new app version to eb. This will update the live promo page with the latest changes commited to git on the current branch:

  ## deploy your eb code
  # check configs
  eb init -i --profile=atn-developer
  
  # confirm configs
  eb status --profile=atn-developer
  
  # deploy to environment
  eb deploy --profile=atn-developer

  if you get an error about certificate, run to check the value associated w your domain name (i.e. saysdont.com) aws acm list-certificates --region=us-east-1 --profile=atn-developer | jq -r '.CertificateSummaryList[] | select(.DomainName=="*.saysdont.com") | .CertificateArn' -- this guide assumes you have the ACM already created!

Tear Down (Optional but Recommended)

• When you want take down the live promo page (to save money, of course 💸):

  # tear down environment
  terraform destroy

Hosting on AWS with HTTPS

🥳 Your simple web app soundcloud promo page: https://saysdont.com

Manual Steps on AWS Console

1. Deploy the app to EB (here), per instructions above 🤗
2. Load balancer listener needs :443 for *.saysdont.com forwarding to HTTP LB, see here
3. ALB security group needs inbound rule, I set public via :443 on 0.0.0.0/0, but really just for inbound from cloudfront serving the app, see (here)
4. cloudfront distribution takes some time to point to origin, update origin with Elastic Beanstalk CNAME
5. A Route53 hosted zone for *.saysdont.com (here)& ACM certificate for *.saysdont.com (here) linking to cloudfront CDN
6. Continue to think about how to accomplish most of all this using terraform!

Development

• Demo for a simple React single-page app

  • To test local npm changes (http://localhost:3000):

    npm run start-local

Notes

• Deployed on AWS Elastic Beanstalk

⚠️ Use an AWS IAM Role (see here) for AWS ElasticBeanstalkAdminister & Route53FullAccess as named profile [atn-developer] in ~/.aws/credentials config.

some errors for npm install on ec2 t4g.nano or t4g.micro, cheapest is t4g.small. See details at https://aws.amazon.com/ec2/instance-types/t4/