chore: #2519 deploy pipeline for web-components

reapit · Sep 3, 2020 · 358e656 · 358e656
1 parent 14f3984
commit 358e656
Show file tree

Hide file tree

Showing 7 changed files with 197 additions and 271 deletions.
diff --git a/packages/web-components/package.json b/packages/web-components/package.json
@@ -73,8 +73,10 @@
     "lint:fix": "eslint --cache --ext=ts,tsx,js src --fix",
     "svelte:check": "npx svelte-check",
     "fetch-config": "yarn config-manager --namespace cloud --entity web-components --name local --mode fetch",
-    "release:development": "node ./scripts/release-serverless.js --stage dev",
-    "release:production": "node ./scripts/release-serverless.js --stage prod",
+    "release:development": "serverless deploy --stage dev",
+    "release:production": "serverless deploy --stage prod",
+    "release:serverless:development": "node ./scripts/release-serverless.js --stage dev",
+    "release:serverless:production": "node ./scripts/release-serverless.js --stage prod",
     "remove:development": "serverless remove --stage dev",
     "remove:production": "serverless remove --stage dev",
     "snyk-protect": "snyk protect",

diff --git a/packages/web-components/scripts/release-serverless.js b/packages/web-components/scripts/release-serverless.js
@@ -1,5 +1,6 @@
 const yargs = require('yargs')
 const { spawn } = require('child_process')
+const { runCommand } = require('../../../scripts/release/utils')
 
 const stage = yargs.argv.stage
 const name = yargs.argv.name
@@ -22,20 +23,7 @@ const listServerless = [
 const deployServerlessList = () => {
   // This will run when run particular widget by yarn release:development --name <widget_name> in web-components folder
   if (name) {
-    const deploy = spawn('serverless', ['deploy', '--config', `src/${name}/server/serverless.yml`, '--stage', stage])
-
-    deploy.stderr.on('data', function(data) {
-      console.error('stderr: ' + data.toString())
-    })
-
-    deploy.on('exit', function(code) {
-      console.info(`Deploying ${name} exited with code ${code.toString()}`)
-    })
-
-    deploy.on('error', function(err) {
-      console.error(`An error happened \n${err}`)
-      process.exit(1)
-    })
+    runCommand('serverless', ['deploy', '--config', `src/${name}/server/serverless.yml`, '--stage', stage])
     return
   }
 

diff --git a/packages/web-components/serverless.example.yml b/packages/web-components/serverless.example.yml
diff --git a/packages/web-components/serverless.yml b/packages/web-components/serverless.yml
@@ -0,0 +1,127 @@
+# https://www.npmjs.com/package/serverless-single-page-app-plugin
+service: cloud-web-components
+
+plugins:
+  - serverless-single-page-app-plugin
+  - serverless-plugin-ifelse
+  - serverless-deployment-bucket
+  - serverless-s3-remover
+  - serverless-s3-deploy
+
+custom:
+  s3WebAppBucket: cloud-web-components-web-app-${opt:stage, 'dev'}
+  s3CloudFormBucket: cloud-deployment-cloudform-templates-${opt:stage, 'dev'}
+  remover:
+     buckets:
+       - ${self:custom.s3WebAppBucket}
+  assets:
+    auto: true
+    targets:
+      - bucket: ${self:custom.s3WebAppBucket}
+        files:
+          - source: ./public/dist/
+            globs: '**/*'
+
+provider:
+  name: aws
+  runtime: nodejs12.x
+  stage: ${opt:stage, 'dev'}
+  region: eu-west-2
+  deploymentBucket:
+    name: ${self:custom.s3CloudFormBucket}
+
+resources:
+  Resources:
+    ## Specifying the S3 Bucket
+    WebAppS3Bucket:
+      Type: AWS::S3::Bucket
+      Properties:
+        BucketName: ${self:custom.s3WebAppBucket}
+        AccessControl: PublicRead
+        WebsiteConfiguration:
+          IndexDocument: index.html
+          ErrorDocument: error.html
+
+    ## Specifying the policies to make sure all files inside the Bucket are available to CloudFront
+    WebAppS3BucketPolicy:
+      Type: AWS::S3::BucketPolicy
+      Properties:
+        Bucket:
+          Ref: WebAppS3Bucket
+        PolicyDocument:
+          Statement:
+            - Sid: PublicReadGetObject
+              Effect: Allow
+              Principal: "*"
+              Action:
+              - s3:GetObject
+              Resource:
+                Fn::Join: [
+                  "", [
+                    "arn:aws:s3:::",
+                    { "Ref": "WebAppS3Bucket" },
+                    "/*"
+                  ]
+                ]
+
+    ## Specifying the CloudFront Distribution to server your Web Application
+    WebAppCloudFrontDistribution:
+      Type: AWS::CloudFront::Distribution
+      Properties:
+        DistributionConfig:
+          Origins:
+            - DomainName:
+                Fn::Join: [
+                  "", [
+                    { "Ref": "WebAppS3Bucket" },
+                    ".s3.amazonaws.com"
+                  ]
+                ]
+              Id: S3-${self:custom.s3WebAppBucket}
+              CustomOriginConfig:
+                HTTPPort: 80
+                HTTPSPort: 443
+                OriginProtocolPolicy: https-only
+              ## In case you want to restrict the bucket access use S3OriginConfig and remove CustomOriginConfig
+              # S3OriginConfig:
+              #   OriginAccessIdentity: origin-access-identity/cloudfront/E127EXAMPLE51Z
+          Enabled: 'true'
+          ## Uncomment the following section in case you are using a custom domain
+          # Aliases:
+          #   If: '"${opt:stage, 'dev'}" == "dev"'
+          #   Set:
+          #     - dev.admin-portal.reapit.cloud
+          #   ElseSet:
+          #     - admin-portal.reapit.cloud
+          DefaultRootObject: index.html
+          CustomErrorResponses:
+            - ErrorCode: 404
+              ResponseCode: 200
+              ResponsePagePath: /index.html
+            - ErrorCode: 403
+              ResponseCode: 200
+              ResponsePagePath: /index.html
+            - ErrorCode: 400
+              ResponseCode: 200
+              ResponsePagePath: /index.html
+          DefaultCacheBehavior:
+            AllowedMethods:
+              - GET
+              - HEAD
+              - OPTIONS
+            TargetOriginId: S3-${self:custom.s3WebAppBucket}
+            ForwardedValues:
+              QueryString: 'false'
+              Cookies:
+                Forward: none
+            ViewerProtocolPolicy: redirect-to-https
+          ViewerCertificate:
+            CloudFrontDefaultCertificate: 'true'
+          # Logging:
+          #   IncludeCookies: 'false'
+          #   Bucket: mylogs.s3.amazonaws.com
+          #   Prefix: myprefix
+  Outputs:
+    WebAppCloudFrontDistributionOutput:
+      Value:
+        'Fn::GetAtt': [ WebAppCloudFrontDistribution, DomainName ]
diff --git a/scripts/release/fetch-artifact.js b/scripts/release/fetch-artifact.js
@@ -1,5 +1,5 @@
 const { WEB_APPS, sendMessageToSlack } = require('./utils')
-const execSync = require('child_process').execSync
+const { runCommand } = require('./utils')
 
 const fetchCachedTarFile = async () => {
   const [, , ...args] = process.argv
@@ -12,10 +12,12 @@ const fetchCachedTarFile = async () => {
       await sendMessageToSlack(
         `Pulling the artifact \`${currentTag}\` from S3 bucket \`cloud-deployments-releases-cache-prod\``,
       )
-      const copyArtifactResult = execSync(
-        `aws s3 cp s3://cloud-deployments-releases-cache-prod/${fileName} ./packages/${packageName}/public`,
-      ).toString()
-      console.info(copyArtifactResult)
+      runCommand('aws', [
+        's3',
+        'cp',
+        `s3://cloud-deployments-releases-cache-prod/${fileName}`,
+        `./packages/${packageName}/public`,
+      ])
     } catch (err) {
       console.error('fetchArtifact', err)
       throw new Error(err)