GithubHelp home page GithubHelp logo

ecommerce-store's Introduction

Running locally

  1. Clone the project from github

  2. open terminal and cd deployment/docker

  3. Setup the following services and get the corresponding keys

    • Create an account on mongodb atlas, create a cluster, db and get a mongo srv string
    • Setup cloudinary account and get your account name
    • Setup Strip developer account and get Strip secret key.
  4. Run the exports to set in the terminal

    export MONGO_SRV=<YOUR MONGO SRV>
    
    export JWT_SECRET="notsosecret"
    
    export CLOUDINARY_URL="https://api.cloudinary.com/v1_1/<YOUR ACCOUNT NAME>/image/upload"
    
    export  STRIPE_SECRET_KEY=<YOUR STRIPE SECRET KEY>
    
    export PORT=8080
    
    export NODE_ENV=production
    
    export CLOUDWATCH_GROUP_NAME=ecommerce-store
    
    export CLOUDWATCH_ACCESS_KEY=<ACCESS_KEY_ID>
    
    export CLOUDWATCH_SECRET_ACCESS_KEY=<ACCESS_KEY_SECRET>
    
    export CLOUDWATCH_REGION=us-east-1
    
    
  5. Run the docker compose build

docker-compose -f docker-compose-build.yaml build --parallel
  1. Run docker compose up command to start the containers.
docker-compose up

Running in Production

  1. Create a EKS Cluster in the AWS Console with name ecommerce-app. Create EKS Cluster

  2. Configure EKS Cluster using AWS cli and check as shown in image below.

  aws eks --region us-east-1 update-kubeconfig --name ecommerce-app

Configure EKS Cluster

  1. Check the cluster info using below command as shown in image above.
  kubectl cluster-info
  1. Add a nodegroup to the EKS cluster using the "Add Node Group" section in the "Compute" tab
  • Add Node Group 1
  • Add Node Group 2
  • Add Node Group 3
  • Add Node Group 4
  1. Refresh the AWS page to check the node group is created.
  2. Once node group is created check the status of nodes in cluster using following command
  kubectl get nodes

Get Nodes

  1. Create k8 Secrets and ConfigMap
  kubectl apply -f env-secret.yaml
  kubectl apply -f env-configmap.yaml

Create Secrets and ConfigMap

  1. Apply Backend Deployment and Service yaml
  kubectl apply -f backend-deployment.yaml
  kubectl apply -f backend-service-lb.yaml

Create Backend Containers

  1. Check the status of Backend pods
  kubectl get pods

Check Backend Pods

  1. Check the status of Backend services
  kubectl get services

Check Backend Pods

  1. Verify the backend api's are working fine using the loadbalancer host

Check Backend APIs

  1. Update the next.config.js file in the config with the loadbalanced backend service url.
// must restart server whenever you make changes in next.config
module.exports = {
  serverRuntimeConfig: {
    // Will only be available on the server side
    apiUrl: `http://a3827adb053c34a168d8755893c9e93e-283059086.us-east-1.elb.amazonaws.com:8080`,
  },
  publicRuntimeConfig: {
    // Will be available on both server and client
    apiUrl: `http://a3827adb053c34a168d8755893c9e93e-283059086.us-east-1.elb.amazonaws.com:8080`,
  },
};
  1. Commit the changes to trigger the new Frontend build and image creation.

Travis Build

  1. Check the Docker hub has the latest images.

Docker Hub latest images 14. Apply Frontend Deployment and Service yaml

  1. Create Deployment and Service for the frontend server.
  kubectl apply -f frontend-deployment.yaml
  kubectl apply -f frontend-service-lb.yaml

Create Frontend Containers

  1. Check the status of Frontend pods
  kubectl get pods

Check Frontend Pods

  1. Check the status of Frontend services
  kubectl get services

Check Frontend Services

  1. Check whether you are able to access the application in the browser using the frontend service url. Check Application
  2. Verify Logs Verify Logs Verify Logs

ecommerce-store's People

Watchers

James Cloos avatar Kapil Gupta avatar

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.