Task 2 | Module Task 2

.gitignore

@@ -45,3 +45,6 @@ testem.log
 # System Files
 .DS_Store
 Thumbs.db
+
+# Serverless directories
+.serverless/

README.md

@@ -1,3 +1,8 @@
+# App URLs
+
+- CloudFront [https://d5kpdkb1yzolb.cloudfront.net/](https://d5kpdkb1yzolb.cloudfront.net/)
+- S3 [https://js-cc-shop-angular-cloudfront.s3.amazonaws.com/index.html](https://js-cc-shop-angular-cloudfront.s3.amazonaws.com/index.html) (not available. to access the app use cloudfront url that is above)
+
 # Shop Angular Cloudfront
 
 Angular version: ~12.

package.json

@@ -9,7 +9,18 @@
     "lint": "ng lint",
     "e2e": "ng e2e",
     "prepare": "husky install",
-    "lint:format": "npx --no-install lint-staged && npx --no-install pretty-quick --staged"
+    "lint:format": "npx --no-install lint-staged && npx --no-install pretty-quick --staged",
+    "client:deploy": "sls client deploy --no-config-change --no-policy-change --no-cors-change",
+    "client:deploy:nc": "npm run client:deploy -- --no-confirm",
+    "client:build:deploy": "npm run build && npm run client:deploy",
+    "client:build:deploy:nc": "npm run build && npm run client:deploy:nc",
+    "cloudfront:setup": "sls deploy",
+    "cloudfront:domainInfo": "sls domainInfo",
+    "cloudfront:invalidateCache": "sls invalidateCloudFrontCache",
+    "cloudfront:build:deploy": "npm run client:build:deploy && npm run cloudfront:invalidateCache",
+    "cloudfront:build:deploy:nc": "npm run client:build:deploy:nc && npm run cloudfront:invalidateCache",
+    "cloudfront:update:build:deploy": "npm run cloudfront:setup && npm run cloudfront:build:deploy",
+    "cloudfront:update:build:deploy:nc": "npm run cloudfront:setup && npm run cloudfront:build:deploy:nc"
   },
   "private": true,
   "dependencies": {
@@ -25,6 +36,9 @@
     "@angular/router": "^15.1.4",
     "bootstrap": "^4.6.0",
     "rxjs": "^7.8.0",
+    "serverless": "^3.35.2",
+    "serverless-finch": "^4.0.3",
+    "serverless-single-page-app-plugin": "file:./serverless-single-page-app-plugin",
     "tslib": "^2.5.0",
     "zone.js": "^0.12.0"
   },

serverless-single-page-app-plugin/index.js

@@ -0,0 +1,137 @@
+"use strict";
+
+const spawnSync = require("child_process").spawnSync;
+
+class ServerlessPlugin {
+  constructor(serverless, options) {
+    this.serverless = serverless;
+    this.options = options;
+    this.commands = {
+      syncToS3: {
+        usage: "Deploys the `app` directory to your bucket",
+        lifecycleEvents: ["sync"],
+      },
+      domainInfo: {
+        usage: "Fetches and prints out the deployed CloudFront domain names",
+        lifecycleEvents: ["domainInfo"],
+      },
+      invalidateCloudFrontCache: {
+        usage: "Invalidates CloudFront cache",
+        lifecycleEvents: ["invalidateCache"],
+      },
+    };
+
+    this.hooks = {
+      "syncToS3:sync": this.syncDirectory.bind(this),
+      "domainInfo:domainInfo": this.domainInfo.bind(this),
+      "invalidateCloudFrontCache:invalidateCache":
+        this.invalidateCache.bind(this),
+    };
+  }
+
+  runAwsCommand(args) {
+    let command = "aws";
+    if (this.serverless.variables.service.provider.region) {
+      command = `${command} --region ${this.serverless.variables.service.provider.region}`;
+    }
+    if (this.serverless.variables.service.provider.profile) {
+      command = `${command} --profile ${this.serverless.variables.service.provider.profile}`;
+    }
+    const result = spawnSync(command, args, { shell: true });
+    const stdout = result.stdout.toString();
+    const sterr = result.stderr.toString();
+    if (stdout) {
+      this.serverless.cli.log(stdout);
+    }
+    if (sterr) {
+      this.serverless.cli.log(sterr);
+    }
+
+    return { stdout, sterr };
+  }
+
+  // syncs the `app` directory to the provided bucket
+  syncDirectory() {
+    const s3Bucket = this.serverless.variables.service.custom.s3Bucket;
+    const args = ["s3", "sync", "app/", `s3://${s3Bucket}/`, "--delete"];
+    const { sterr } = this.runAwsCommand(args);
+    if (!sterr) {
+      this.serverless.cli.log("Successfully synced to the S3 bucket");
+    } else {
+      throw new Error("Failed syncing to the S3 bucket");
+    }
+  }
+
+  // fetches the domain name from the CloudFront outputs and prints it out
+  async domainInfo() {
+    const provider = this.serverless.getProvider("aws");
+    const stackName = provider.naming.getStackName(this.options.stage);
+    const result = await provider.request(
+      "CloudFormation",
+      "describeStacks",
+      { StackName: stackName },
+      this.options.stage,
+      this.options.region
+    );
+
+    const outputs = result.Stacks[0].Outputs;
+    const output = outputs.find(
+      (entry) => entry.OutputKey === "WebAppCloudFrontDistributionOutput"
+    );
+
+    if (output && output.OutputValue) {
+      this.serverless.cli.log(`Web App Domain: ${output.OutputValue}`);
+      return output.OutputValue;
+    }
+
+    this.serverless.cli.log("Web App Domain: Not Found");
+    const error = new Error("Could not extract Web App Domain");
+    throw error;
+  }
+
+  async invalidateCache() {
+    const provider = this.serverless.getProvider("aws");
+
+    const domain = await this.domainInfo();
+
+    const result = await provider.request(
+      "CloudFront",
+      "listDistributions",
+      {},
+      this.options.stage,
+      this.options.region
+    );
+
+    const distributions = result.DistributionList.Items;
+    const distribution = distributions.find(
+      (entry) => entry.DomainName === domain
+    );
+
+    if (distribution) {
+      this.serverless.cli.log(
+        `Invalidating CloudFront distribution with id: ${distribution.Id}`
+      );
+      const args = [
+        "cloudfront",
+        "create-invalidation",
+        "--distribution-id",
+        distribution.Id,
+        "--paths",
+        "/*",
+      ];
+      const { sterr } = this.runAwsCommand(args);
+      if (!sterr) {
+        this.serverless.cli.log("Successfully invalidated CloudFront cache");
+      } else {
+        throw new Error("Failed invalidating CloudFront cache");
+      }
+    } else {
+      const message = `Could not find distribution with domain ${domain}`;
+      const error = new Error(message);
+      this.serverless.cli.log(message);
+      throw error;
+    }
+  }
+}
+
+module.exports = ServerlessPlugin;

serverless-single-page-app-plugin/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "serverless-single-page-app-plugin",
+  "version": "1.0.1",
+  "description": "A plugin to simplify deploying Single Page Application using S3 and CloudFront",
+  "author": "",
+  "license": "MIT"
+}