srijanmukherjee/frontend-deployment-platform

Basically vercel clone

Frontend Deployment Platform

🚧 work in progress 🚧

A vercel clone. Deploy SPAs directly from a git repository.

Setup

DISCLAIMER

I am not an AWS expert, any vulnerability and cost that comes with the below setup is not within my responsibility.

ECS Fargate is not under AWS free tier. Consider using EC2 instead.

Note: Select your desired region in the AWS console before proceeding with any of these.

Setting up IAM Role

1. Go to IAM > Roles in your AWS console
2. Create a new role with the following settings

Trusted Entity Type: AWS Service

Use Case: Elastic Container service > Elastic Container Service Task

Permission Policies: AmazonECS_FullAccess, AmazonS3FullAccess, AWSAppRunnerServicePolicyForECRAccess, CloudWatchLogsFullAccess

Role Name: <your choice>

Setting up S3

1. Go to Console > S3
2. Create a new bucket

Bucket name: <your choice>

Uncheck "Block all public access" and check "I acknowledge that the current settings might result in this bucket and the objects within becoming public."

3. Go to Permissions tab and click on the Edit button under the Bucket Policy section.

4. Add the following policy

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AllowWebAccess",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::<bucket name>/deployments/*"
        }
    ]
}

Change <bucket name> with your bucket name.

5. Click on Save Changes

Setting up ECR

This is where we will upload our build docker images.

1. Go to Console > Elastic Container Registry
2. Create a new repository

Visiblity Settings: Private

Repository Name: <your choice>

3. Open builder/deploy-docker.sh and configure your registry url and the repository name (see the configuration section for more details)

Example:

REGISTRY=xxxxxxxx.xxx.xxx.ap-south-1.amazonaws.com
REPOSITORY_NAME=frontend-builder

4. cd into builder/ and run the deploy-docker.sh script.

This will push the builder image into the ECR you just created.

Note: It may take some time for the first run. Subsequent runs will be faster.

Setting up ECS

1. Go to Console > Elastic Container Service > Task Definition
2. Create a new task definition

Task definition family: <your choice>

Launch Type: AWS Fargate (not free under free tier)

Task role: select the IAM role you created

Task execution role: select the IAM role you create

Container - 1 > Name: <your choice>

Container - 1 > Image URI: copy the image uri from elastic container registry you just created

click on Copy URI to copy your image uri

Container - 1 > Environment variables:

S3_BUCKET="srijan-frontend-deployments"

# Path path inside your s3 bucket where deployments will be uploaded
S3_DEPLOYMENT_DIRECTORY="deployments"

AWS_REGION="ap-south-1"

3. Click on Create

4. Go to Console > Elastic Container Service > Clusters

5. Create new cluster

Cluster name: <your choice>

[WARNING] AWS Fargate is not free under AWS Free Tier
Infrastructure: AWS Fargate (serverless)

Setting up Redis

Any online service will do. I used aiven.io to spin up a free redis service.

Note: The redis needs to be online, since the builder containers push logs to it. You may even use ngrok to expose your local redis server online (I have not tested this).

Configurations

Environment variable options. Also refer to .env.example file for a particular module.

api

# api details (required)
AWS_ACCESS_KEY_ID
AWS_SECRET_ACCESS_KEY
AWS_DEFAULT_REGION

# ARN of the ECS cluster (required)
AWS_DEPLOYMENT_CLUSTER_ARN

# ARN of the task definition (required)
AWS_DEPLOYMENT_TASK_DEFINITION_ARN

# task launch type (required)
AWS_DEPLOYMENT_LAUNCH_TYPE=FARGATE

# name of the builder docker image (required)
AWS_DEPLOYMENT_TASK_DEFINITION_IMAGE_NAME

# comma separated list of subnets (required)
AWS_DEPLOYMENT_VPC_CONFIGURATION_SUBNETS

# comma separated list of security groups (Required)
AWS_DEPLOYMENT_VPC_CONFIGURATION_SECURITY_GROUPS=

# Redis uri (used for logs) (required)
REDIS_URI=

# Server port (optional) 
PORT=8000

builder

In deploy-docker.sh, set your ECR docker registry url in the REGISTRY variable.

Set your repository name in the REPOSITORY_NAME variable

reverse-proxy

# path to the s3 deployment folder
BASE_PATH=