Giter Club home page Giter Club logo

vercel-clone's Introduction

Vercel Clone

YouTube Video Link: https://youtu.be/0A_JpLYG7hM

Whiteboard Diagram: https://app.eraser.io/workspace/0f8XnDF61iGcatypPqIR?origin=share

Prerequisite

Setup Guide

This Project contains following services and folders:

  • api-server: HTTP API Server for REST API's
  • build-server: Docker Image code which clones, builds and pushes the build to S3
  • s3-reverse-proxy: Reverse Proxy the subdomains and domains to s3 bucket static assets

Local Setup

  1. Run npm install in all the 3 services i.e. api-server, build-server and s3-reverse-proxy
  2. Docker build the build-server and push the image to AWS ECR.
  3. Setup the api-server by providing all the required config such as TASK ARN and CLUSTER arn.
  4. Run node index.js in api-server and s3-reverse-proxy

At this point following services would be up and running:

S.No Service PORT
1 api-server :9000
2 socket.io-server :9002
3 s3-reverse-proxy :8000

Demo

Watch The Demo Video

Architecture

Vercel Clone Architecture

vercel-clone's People

Contributors

piyushgarg-dev avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

vercel-clone's Issues

Feat: Deploy ECS Cluster Separately Using AWS CDK

I've been exploring the project and its deployment setup. After reviewing the infrastructure and considering the potential for scalability and modularity, I believe there's an opportunity to enhance the deployment process.

Proposal:
Instead of deploying the ECS cluster directly within the project setup, I suggest deploying it separately using AWS CDK. This approach would offer several benefits:

  • Improved scalability and flexibility: Decoupling the ECS cluster deployment allows for independent scaling and management.
  • Simplified updates: With the ECS cluster managed separately, updates to the task ARN or other configurations can be performed more seamlessly without affecting the main project deployment.
  • Better resource management: Separating the ECS cluster deployment enables more granular control over resources and configurations, optimizing performance and cost-effectiveness.

Steps:

  1. Utilize AWS CDK to define and deploy the ECS cluster infrastructure.
  2. Integrate the deployed ECS cluster with the main project setup by updating the necessary configurations (e.g., task ARN).
  3. Ensure seamless communication and interaction between the deployed ECS cluster and other project components.

Not dynamic for all build

This project is completely for Vite Project. But as we all know that while building React projects, instead of dist folder we get build folder. This issue has to be resolved if anyone notices.

New Features

Add custom CMDs
To install
To run
To build

Front-end or back-end code

Containers are still running

Problem : Containers are still running even after the build process completed
Solution : Need to add publisher.disconnect(); on line 70 in /build-server/script.js
This will ensure the docker shutdown after the upload process is completed. ๐Ÿ’ฏ

  • publisher.disconnect() will revoke the connection with redis server.

Unable to access resource from S3 public server using reverse proxy

output

image

Code

const express = require("express");
const httpProxy = require("http-proxy");

const app = express();
const PORT = 8000;

const BASE_PATH =
    "https://faucet-client-deployments.s3.amazonaws.com/__outputs";

const proxy = httpProxy.createProxy();

app.use((req, res) => {
    const hostname = req.hostname;
    const subdomain = hostname.split(".")[0];

    // Custom Domain - DB Query

    const resolvesTo = `${BASE_PATH}/${subdomain}`;

    return proxy.web(req, res, { target: resolvesTo, changeOrigin: true });
});

proxy.on("proxyReq", (proxyReq, req, res) => {
    const url = req.url;
    console.log("url", url);
    console.log("proxyReq.path", proxyReq.path);
    if (url === "/") proxyReq.path += "index.html";
});

app.listen(PORT, () => console.log(`Reverse Proxy Running..${PORT}`));

S3 Bucket policy

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject",
                "s3:GetObjectVersion"
            ],
            "Resource": "arn:aws:s3:::faucet-client-deployments/*"
        },
        {
            "Sid": "AllowWebAccess",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject",
                "s3:GetObjectVersion"
            ],
            "Resource": "arn:aws:s3:::faucet-client-deployments/*"
        }
    ]
}

Possibly to add support for server functions?

I'm trying to come up with ways to support server functions, and my thought is to use a tool like this
aws-lambda-web-adapter, or maybe even SST. My idea is to deploy a static build just like it's currently doing, but deploy the project to a lambda function as well and somehow (haven't figured it out yet) get the static build to understand that API routes and serverless functions are running else where.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.