Create SSR and deploy on ECS

canopas · Apr 7, 2022 · ebdf151 · ebdf151
1 parent 2a8d2c0
commit ebdf151
Show file tree

Hide file tree

Showing 54 changed files with 4,619 additions and 1,287 deletions.
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -18,8 +18,8 @@ jobs:
 
       - uses: actions/setup-go@v2
         with:
-          go-version: '^1.17.5'
-          
+          go-version: "^1.17.5"
+
       - name: Run API test
         run: |
           go test jobs
@@ -45,11 +45,11 @@ jobs:
 
       - uses: actions/setup-go@v2
         with:
-          go-version: '^1.17.5'
+          go-version: "^1.17.5"
 
       - uses: actions/setup-node@v1
         with:
-          node-version: '16'
+          node-version: "17"
 
       - name: Build frontend
         run: |

diff --git a/.github/workflows/deploy-dev-backend.yml b/.github/workflows/deploy-dev-backend.yml
@@ -2,7 +2,7 @@ name: DeployDevBackend
 on:
   push:
     branches:
-      - 'master'
+      - "master"
 
 jobs:
   deploy-backend:
@@ -16,12 +16,12 @@ jobs:
 
       - uses: actions/setup-go@v2
         with:
-          go-version: '^1.17.5'
+          go-version: "^1.17.5"
 
       - name: Configure AWS credentials
         uses: aws-actions/configure-aws-credentials@v1
         with:
-          role-to-assume: arn:aws:iam::569704406482:role/github-actions-s3-access
+          role-to-assume: arn:aws:iam::569704406482:role/github-actions-backend-access
           aws-region: ap-south-1
       - name: Build backend
         run: |
@@ -61,5 +61,3 @@ jobs:
             DbHost=${{ secrets.DB_HOST }},
             DbPort=${{ secrets.DB_PORT }},
             DbName=${{ secrets.DB_NAME }}
-
-            
diff --git a/.github/workflows/deploy-dev-frontend.yml b/.github/workflows/deploy-dev-frontend.yml
@@ -2,7 +2,7 @@ name: DeployDevFrontend
 on:
   push:
     branches:
-      - 'master'
+      - "master"
 
 jobs:
   deploy-frontend:
@@ -16,36 +16,33 @@ jobs:
 
       - uses: actions/setup-node@v1
         with:
-          node-version: '16'
+          node-version: "17"
 
       - name: Configure AWS credentials
         uses: aws-actions/configure-aws-credentials@v1
         with:
-          role-to-assume: arn:aws:iam::569704406482:role/github-actions-s3-access
+          role-to-assume: arn:aws:iam::569704406482:role/github-actions-frontend-access
           aws-region: ap-south-1
 
-      - name: Deploy cloudfront
-        id: canopas-website-dev-frontend-stack
+      - name: Build frontend and push on ECR
+        run: |
+          cd vue-frontend
+          sh ./../deploy/generate-sitemap.sh https://dev-stack.canopas.com https://dev-stack-api.canopas.com && cd ..
+          sh ./deploy/deploy-ecr-image.sh 569704406482.dkr.ecr.$AWS_REGION.amazonaws.com/canopas-website-ssr-app
+
+      - name: Deploy cloudformation stack with cloudfront
+        id: canopas-website-dev-frontend-stack-ECS
         uses: aws-actions/aws-cloudformation-github-deploy@v1
         with:
-          name: canopas-website-dev-frontend-stack
+          name: canopas-website-dev-frontend-stack-ECS
           template: infrastructure/template-frontend.yml
           capabilities: CAPABILITY_IAM,CAPABILITY_NAMED_IAM
           timeout-in-minutes: "10"
           no-fail-on-empty-changeset: "1"
           parameter-overrides: >-
-            S3BucketName=dev-stack-canopas-v1-frontend,
-            CustomDomainName=dev-stack.canopas.com
-
-      - name: Build frontend
-        run: |
-          cd vue-frontend
-          npm ci
-          sh generate-sitemap.sh https://dev-stack.canopas.com https://dev-stack-api.canopas.com
-          npm run build
-
-      - name: Upload to S3
-        run: |
-          cd vue-frontend
-          aws s3 sync --delete --cache-control 'max-age=31536000' --exclude *.html --exclude sitemap.xml dist/ s3://dev-stack-canopas-v1-frontend/
-          aws s3 sync --cache-control 'no-cache' dist/ s3://dev-stack-canopas-v1-frontend/
+            LoadBalancerName=CanopasWebsiteALB-dev,
+            ClusterName=canopas-website-dev,
+            TargetGroupName=canopas-website-tg-dev,
+            SecurityGroupName=canopas-website-alb-sg-dev,
+            SecurityGroupContainerName=canopas-website-alb-to-farget-dev,
+            ImageTag=${{ github.sha }}
diff --git a/.github/workflows/deploy-prod-backend.yml b/.github/workflows/deploy-prod-backend.yml
@@ -2,8 +2,8 @@ name: DeployProdBackend
 on:
   push:
     branches:
-      - 'master'
-      
+      - "master"
+
 jobs:
   deploy-backend:
     runs-on: ubuntu-latest
@@ -16,12 +16,12 @@ jobs:
 
       - uses: actions/setup-go@v2
         with:
-          go-version: '^1.17.5'
+          go-version: "^1.17.5"
 
       - name: Configure AWS credentials
         uses: aws-actions/configure-aws-credentials@v1
         with:
-          role-to-assume: arn:aws:iam::569704406482:role/github-actions-s3-access
+          role-to-assume: arn:aws:iam::569704406482:role/github-actions-backend-access
           aws-region: ap-south-1
       - name: Build backend
         run: |
@@ -61,5 +61,3 @@ jobs:
             DbHost=${{ secrets.DB_HOST }},
             DbPort=${{ secrets.DB_PORT }},
             DbName=${{ secrets.DB_NAME }}
-
-            
diff --git a/.github/workflows/deploy-prod-frontend.yml b/.github/workflows/deploy-prod-frontend.yml
@@ -2,8 +2,8 @@ name: DeployProdFrontend
 on:
   push:
     branches:
-      - 'master'
-      
+      - "master"
+
 jobs:
   deploy-frontend:
     runs-on: ubuntu-latest
@@ -16,37 +16,33 @@ jobs:
 
       - uses: actions/setup-node@v1
         with:
-          node-version: '16'
+          node-version: "17"
 
       - name: Configure AWS credentials
         uses: aws-actions/configure-aws-credentials@v1
         with:
-          role-to-assume: arn:aws:iam::569704406482:role/github-actions-s3-access
+          role-to-assume: arn:aws:iam::569704406482:role/github-actions-frontend-access
           aws-region: ap-south-1
 
-      - name: Deploy cloudfront
-        id: canopas-website-prod-frontend-stack
+      - name: Build frontend and push on ECR
+        run: |
+          cd vue-frontend
+          sh ./../deploy/generate-sitemap.sh https://canopas.com https://prod-stack-api.canopas.com && cd ..
+          sh ./deploy/deploy-ecr-image.sh 569704406482.dkr.ecr.$AWS_REGION.amazonaws.com/canopas-website-ssr-app
+          
+      - name: Deploy cloudformation stack with cloudfront
+        id: canopas-website-prod-frontend-stack-ECS
         uses: aws-actions/aws-cloudformation-github-deploy@v1
         with:
-          name: canopas-website-prod-frontend-stack
+          name: canopas-website-prod-frontend-stack-ECS
           template: infrastructure/template-frontend.yml
           capabilities: CAPABILITY_IAM,CAPABILITY_NAMED_IAM
           timeout-in-minutes: "10"
           no-fail-on-empty-changeset: "1"
           parameter-overrides: >-
-            S3BucketName=prod-stack-canopas-v1-frontend,
-            CustomDomainName=canopas.com
-
-      - name: Build frontend
-        run: |
-          cd vue-frontend
-          npm ci
-          mv src/config.prod.js src/config.js
-          sh generate-sitemap.sh https://canopas.com https://prod-stack-api.canopas.com
-          npm run build
-
-      - name: Upload to S3
-        run: |
-          cd vue-frontend
-          aws s3 sync --delete --cache-control 'max-age=31536000' --exclude *.html --exclude sitemap.xml dist/ s3://prod-stack-canopas-v1-frontend/
-          aws s3 sync --cache-control 'no-cache' dist/ s3://prod-stack-canopas-v1-frontend/
+            LoadBalancerName=CanopasWebsiteALB-prod,
+            ClusterName=canopas-website-prod,
+            TargetGroupName=canopas-website-tg-prod,
+            SecurityGroupName=canopas-website-alb-sg-prod,
+            SecurityGroupContainerName=canopas-website-alb-to-farget-prod,
+            ImageTag=${{ github.sha }}
diff --git a/Dockerfile b/Dockerfile
@@ -0,0 +1,14 @@
+FROM node:17 AS ui-build
+WORKDIR /app
+COPY vue-frontend/ ./
+RUN npm install && npm run build
+
+FROM node:17 AS server-build
+WORKDIR /root/
+COPY --from=ui-build /app/dist ./dist
+COPY --from=ui-build /app/node_modules ./node_modules
+COPY --from=ui-build /app/server.js /app/package*.json ./
+
+EXPOSE 3080
+
+CMD ["npm", "run", "serve"]
diff --git a/README.md b/README.md
@@ -7,7 +7,7 @@ best practices.
 
 ## Requirements
 
-- Node16
+- Node17
 - Go 1.17
 
 ## To run front-end
@@ -21,7 +21,7 @@ best practices.
 - Run vue server
 
   ```
-  npm run serve
+  npm run dev
   ```
 
 - Compiles and minifies for production
@@ -30,6 +30,16 @@ best practices.
   npm run build
   ```
 
+- Server side rendering
+
+  ```
+  npm run build
+  ```
+
+  ```
+  npm run serve
+  ```
+
 You can access the page by pointing a web browser at http://localhost:8080.
 
 ## To run backend
@@ -102,6 +112,13 @@ You can access the page by pointing a web browser at http://localhost:8080.
 
   [Here](https://github.com/canopas/canopas-website/blob/master/api-doc.md) is APIs reference used in the website.
 
+
+## To enable pre-commit hook
+
+```
+git config core.hooksPath .githooks
+```
+
 ## Dependencies
 
 Following are dependencies used by the project
@@ -110,6 +127,10 @@ Following are dependencies used by the project
 
 - It is used to build web interfaces and one-page applications.
 
+#### [Vite](https://github.com/vitejs/vite)
+
+- It is frontend build tool that significantly improves the frontend development experience. We have used it for server side rendering. 
+
 #### [Bootstrap](https://github.com/twbs/bootstrap)
 
 - As it provides extra feature of css, it is easy for us to create enhance UI for better user experience.
@@ -134,12 +155,6 @@ Following are dependencies used by the project
 
 - Used for icons.
 
-## To enable pre-commit hook
-
-```
-git config core.hooksPath .githooks
-```
-
 ## LICENSE
 
 Canopas is released under the [GNU V3](https://github.com/canopas/canopas-website/blob/master/LICENSE.md).
diff --git a/deploy/deploy-ecr-image.sh b/deploy/deploy-ecr-image.sh
@@ -0,0 +1,22 @@
+#! /bin/bash
+
+set -e
+
+IMAGE_TAG="$GITHUB_SHA"
+IMAGE_ARN=$1
+
+aws ecr get-login-password --region ap-south-1 | docker login --username AWS --password-stdin 569704406482.dkr.ecr.ap-south-1.amazonaws.com
+
+docker build -t canopas-website-ssr-app:$IMAGE_TAG .
+
+docker tag canopas-website-ssr-app:$IMAGE_TAG $IMAGE_ARN:$IMAGE_TAG
+
+docker push $IMAGE_ARN:$IMAGE_TAG
+
+# delete untagged images
+aws ecr describe-repositories --output text | awk '{print $5}' | egrep -v '^$' | while read line; do
+    repo=$(echo $line | sed -e "s/arn:aws:ecr.*\///g")
+    aws ecr list-images --repository-name $repo --filter tagStatus=UNTAGGED --query 'imageIds[*]' --output text | while read imageId; do
+        aws ecr batch-delete-image --repository-name $repo --image-ids imageDigest=$imageId
+    done
+done
diff --git a/vue-frontend/generate-sitemap.sh → deploy/generate-sitemap.sh b/vue-frontend/generate-sitemap.sh → deploy/generate-sitemap.sh