week7.md

Week 7 — Solving CORS with a Load Balancer and Custom Domain

Custom Domains and Hosted Zones with Route 53

Link domain to Amazon Web Services

In order to link my domain I registered with namecheap I needed to created a hosted zone using AWS Route 53 service and then link the nameservers with my registered domain in namecheap as the Custom DNS

I read articles here and here to properly to complete this setup.

Create SSL Certificate and Create records in route 53

Use the cerificate manager to generate the SSL certificate and the create records in route 53.

Create hosted zone records

Create records that point to the load balancer listening to both backend and frontend

Update load balancer listeners

Add a listener to redirect HTTP request on port 80 to HTTPS on port 443

Modify listener rules

Modify backend task definition environments

Update the environments for both the frontend_url and backend_url in the backend-flask task definiton with the correct values.

{
    "name": "FRONTEND_URL",
    "value": "https://cruddurcorecodecmdsystems.website"
},
{
    "name": "BACKEND_URL",
    "value": "https://api.cruddurcorecodecmdsystems.website"
}

Re-build frontend Image with correct backend_url

This helps to resolve the connection error as seen below

export REACT_APP_BACKEND_URL="https://api.cruddurcorecodecmdsystems.website"
gp env REACT_APP_BACKEND_URL=$REACT_APP_BACKEND_URL

docker build \
  --build-arg REACT_APP_BACKEND_URL="$REACT_APP_BACKEND_URL" \
  --build-arg REACT_APP_AWS_PROJECT_REGION="$AWS_DEFAULT_REGION" \
  --build-arg REACT_APP_AWS_COGNITO_REGION="$AWS_DEFAULT_REGION" \
  --build-arg REACT_APP_AWS_USER_POOLS_ID="$AWS_USER_POOL_ID" \
  --build-arg REACT_APP_CLIENT_ID="$AWS_APP_CLIENT_ID" \
  -t frontend-react-js \
  -f frontend-react-js/Dockerfile.prod \
  ./frontend-react-js/

Re-tag Image

docker tag frontend-react-js:latest $ECR_FRONTEND_REACT_URL:latest

Re-push Image to ECR

docker push $ECR_FRONTEND_REACT_URL:latest

Register Task Defintions

aws ecs register-task-definition --cli-input-json file://aws/task-definitions/frontend-react-js.json

Update backend service deployment

Forcefully update the backend service deployment to used the latest revision of the backend task definition.

Run all commands at once

./bin/frontend/build
./bin/frontend/push
./bin/frontend/register
./bin/frontend/deploy

Error backend url concatenated to frontend host

I had this error for almost two days and made me not make progress because everything seemed to me that I had that it right. But after having conversions with my colleagues on the discord channel chat and making research, reading and finding solution from this stackoverflow question as explained below, I found out that I was simply passing my backend url without the protocol and was merely being passed on as a relative url which was ending up being concatenated to the current frontend host and hence resulting into a wrong request url thus not getting data being displayed.

Error pattern

This kind of error occurs when we send a request from the client-side to the server-side using a relative URL (/characters in this case). But the frontend app and the backend app run on 2 different ports. So on my side I was sending the backend url as api.cruddurcorecodecmdsystems.website and this was being concatenated to the frontend host https://cruddurcorecodecmdsystems.website forming a request url as https://cruddurcorecodecmdsystems.website/api.cruddurcorecodecmdsystems.website instead of https://api.cruddurcorecodecmdsystems.website meaning that I was not able to get the data from the backend.

Reason

When we use relative URLs, the URL will be concatenated with the current host (the frontend host, not the backend). Usually, we receive a 404 error because the resource doesn't exist.

Example

Backend app running on port 5000. React app running on port 3000 for development. In React app, if we send a request to /users, then the full URL is http://localhost:3000/users. The request goes to the React app, not the backend server. And we don't receive the desired output.

Action

You should use an absolute URL, something like: http://localhost:5000/users to send the request to your backend app. Consider saving the host part (http://localhost:5000) in a global variable in order to use it in multiple places in your frontend code. When you have different environments for the backend (DEV/STAGING/PRODUCTION), you can change the backend host in only 1 place. So I had to change my backend url from api.cruddurcorecodecmdsystems.website to https://api.cruddurcorecodecmdsystems.website

Securing Backend Flask

Some sample instructions to follow can be found in the flask documentation here

1. Modify the inbound rules of the security group of the load balancer to work for ports 443 and 80 using only the IP from the load Balancer.

From

To

Improve docker networking

Create docker network

docker network create cruddur-net

Update the docker-compose.yml file for all services to have the crudder-net network created above.

networks:
  - cruddur-net

Also change the network section to a user defined network.

networks: 
  cruddur-net:
    driver: bridge
    name: cruddur-net

Generate environment variables with ruby

Generate the env files for both backend and frontend

./bin/backend/generate-env
./bin/frontend/generate-env

Update both the backend and frontend services to use both the generated environment files in the docker-compose file.

backend-flask:
    env_file:
      - backend-flask.env

frontend-react-js:
    env_file:
      - frontend-react-js.env

Amazon Route53 - Security Best Practices - AWS

• Integration with ACM (Amazon Certificate Manager) for TLS
• Compliance standard is what your business requires for a DNS provider.
• Amazon Organizations SCP - to manage Route53 actions like creation, deletion, modification of production URIs etc.
• AWS CloudTrail is enabled and monitored to trigger alerts for malicious activities e.g Associate VPC with Hosted Zone, Change Resource Sets, Register Domain etc.
• GuardDuty is enabled for monitoring suspicious DNS comms (e.g Crypto-mining etc) and automated for auto-remediation.
• AWS Config Rules is enabled in the account and region of ECS.

Amazon Route53 - Security Best Practices - Application

• Access Control - Roles or IAM Users for making DNS changes in Amazon Route53.
• Public vs Private Hosted Zones.
• All Route53 records should point to an existing DNS, ELB, ALB or AWS S3.
  • Watch out for Dangling DNS domains.
• Hosted Zone Configuration Changes limited to small set of people.
• Enable Encryption in Transit using TLS/SSL certification e.g HTTPS Urls.
• Only use Trusted Domain Providers for requesting new DNSs.
• Set TTLs appropriately to afford to wait for a change to take effect.
• Ensure Root Domain Alias Record Points to ELB.
• Develop process for continuously verifying if DNS (& Hosted Zore) are all current and valid.