feat: simple implementation to trigger an optional AWS CloudFront invalidation after files have been uploaded to AWS S3. (#393)

Resolves: #392

Co-authored-by: Matthias Sefrin <[email protected]>
Co-authored-by: Jeffrey Bosch <[email protected]>

Author: 3 people

README.md

@@ -49,13 +49,20 @@
        "options": {}
    }
    ```
+
 5. Due to security risk we have made the decision to never add any options to the `angular.json`. You should set the environments variable during the `ng deploy` command. Below is an example on how you could do this.
 
 ```bash
 npx cross-env NG_DEPLOY_AWS_ACCESS_KEY_ID=1234 NG_DEPLOY_AWS_SECRET_ACCESS_KEY=321ACCESS NG_DEPLOY_AWS_BUCKET=mys3bucket NG_DEPLOY_AWS_REGION=eu-1-region NG_DEPLOY_AWS_SUB_FOLDER=path/on/bucker ng deploy
 ```
 
-6. Run `ng deploy` to deploy your application to Amazon S3.
+6. To trigger an optional invalidation of the files in an AWS CloudFront distribution, add these parameters to the above command line:
+
+```
+npx cross-env ... NG_DEPLOY_AWS_CF_DISTRIBUTION_ID=1234 ... ng deploy
+```
+
+7. Run `ng deploy` to deploy your application to Amazon S3.
 
 🚀**_Happy deploying!_** 🚀
 

libs/ngx-aws-deploy/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@jefiozie/ngx-aws-deploy",
   "version": "4.0.0",
-  "description": "Deploy rou Angular app to Amazon S3 directly from the Angular CLI",
+  "description": "Deploy an Angular app to Amazon S3 directly from the Angular CLI",
   "main": "index.js",
   "builders": "./builders.json",
   "schematics": "./collection.json",

libs/ngx-aws-deploy/src/lib/deploy/cloudfront.ts

@@ -0,0 +1,76 @@
+import { BuilderContext } from '@angular-devkit/architect';
+import * as AWS from 'aws-sdk';
+import { CreateInvalidationRequest } from 'aws-sdk/clients/cloudfront';
+import { Schema } from './schema';
+import {
+  getAccessKeyId,
+  getSecretAccessKey,
+  getRegion,
+  getSubFolder,
+  getCfDistributionId
+} from './config';
+
+export class CloudFront {
+  private _builderConfig: Schema;
+  private _context: BuilderContext;
+
+  private _cloudFront: AWS.CloudFront;
+
+  private _cfDistributionId: string;
+  private _subFolder: string;
+  private _region: string;
+
+  constructor(context: BuilderContext, builderConfig: Schema) {
+    this._context = context;
+    this._builderConfig = builderConfig;
+
+    this._region = getRegion(this._builderConfig);
+    this._cfDistributionId = getCfDistributionId(this._builderConfig);
+    this._subFolder = getSubFolder(this._builderConfig);
+
+    AWS.config.update({ region: this._region });
+    this._cloudFront = new AWS.CloudFront({
+      apiVersion: 'latest',
+      secretAccessKey: getSecretAccessKey(),
+      accessKeyId: getAccessKeyId()
+    });
+  }
+
+  public async invalidate(): Promise<boolean> {
+    if (!this._cfDistributionId) {
+      this._context.logger.info('⚠️  Skipping invalidation of CloudFront distribution');
+      return true;
+    }
+
+    const cf_path = this._subFolder ? `/${this._subFolder}/*` : '/*';
+    const reference = `ngx-aws-deploy-${new Date().getTime()}`;
+
+    const params : CreateInvalidationRequest = {
+      DistributionId: this._cfDistributionId,
+      InvalidationBatch: {
+        CallerReference: reference,
+        Paths: {
+          Quantity: 1,
+          Items: [
+            cf_path
+          ]
+        }
+      }
+    };
+
+    this._context.logger.info(`Triggering invalidation of '${cf_path}' from CloudFront distribution ${this._cfDistributionId}`);
+
+    await this._cloudFront
+      .createInvalidation(params)
+      .promise()
+      .then((data) => {
+        this._context.logger.info(`Successfully triggered invalidation of '${cf_path}' from CloudFront distribution ${this._cfDistributionId}: current status is '${data.Invalidation.Status}'`);
+      })
+      .catch((error) => {
+        this._context.logger.error(`❌  The following error was found during CloudFront invalidation ${error}`);
+        throw error;
+      });
+
+    return true;
+  }
+}

libs/ngx-aws-deploy/src/lib/deploy/config.ts

@@ -19,3 +19,7 @@ export const getRegion = (builderConfig: Schema): string => {
 export const getSubFolder = (builderConfig: Schema): string => {
   return process.env.NG_DEPLOY_AWS_SUB_FOLDER || (builderConfig.subFolder as string);
 };
+
+export const getCfDistributionId = (builderConfig: Schema): string => {
+  return process.env.NG_DEPLOY_AWS_CF_DISTRIBUTION_ID || (builderConfig.cfDistributionId as string);
+};

libs/ngx-aws-deploy/src/lib/deploy/index.ts

@@ -6,6 +6,7 @@ import {
 } from '@angular-devkit/architect';
 import * as glob from 'glob';
 import { getAccessKeyId, getSecretAccessKey } from './config';
+import { CloudFront } from './cloudfront';
 import { Schema } from './schema';
 import { Uploader } from './uploader';
 
@@ -95,14 +96,28 @@ export default createBuilder(
         const success = await uploader.upload(files, filesPath);
         if (success) {
           context.logger.info('✔ Finished uploading files...');
-          return { success: true };
+
+          context.logger.info('Start CloudFront invalidation...');
+          const cloudFront = new CloudFront(context, deployConfig);
+          const success = await cloudFront.invalidate();
+          if (success) {
+            context.logger.info('✔ Finished CloudFront invalidation...');
+            return { success: true };
+          } else {
+            context.logger.error(`❌  Error during CloudFront invalidation`);
+            return {
+              error: `❌  Error during CloudFront invalidation`,
+              success: false,
+            };
+          }
         } else {
           return {
             error: `❌  Error during files upload`,
             success: false,
           };
         }
       } else {
+        context.logger.error(`❌  Missing authentication settings for AWS`);
         return {
           error: `❌  Missing authentication settings for AWS`,
           success: false,

libs/ngx-aws-deploy/src/lib/deploy/schema.d.ts

@@ -8,4 +8,5 @@ export interface Schema {
   region?: string;
   bucket?: string;
   subFolder?: string;
+  cfDistributionId?: string;
 }

libs/ngx-aws-deploy/src/lib/deploy/schema.json

@@ -42,6 +42,10 @@
       "type": "string",
       "description": "Subfolder from AWS bucket."
     },
+    "cfDistributionId": {
+      "type": "string",
+      "description": "Optional AWS CloudFront distribution id to create an invalidation."
+    },
     "buildTarget": {
       "type": "string",
       "description": "A named build target, as specified in the `configurations` section of angular.json . Each named target is accompanied by a configuration of option defaults for that target. This is equivalent as calling the command `ng build --configuration=XXX`."

libs/ngx-aws-deploy/src/lib/deploy/uploader.ts

@@ -39,7 +39,7 @@ export class Uploader {
     try {
       if (!this._region || !this._bucket) {
         this._context.logger.error(
-          `❌  Looks like you are missing some configuration`
+          `❌  Looks like you are missing some upload configuration (need region, bucket)`
         );
         return false;
       }

libs/ngx-aws-deploy/src/lib/ng-add/schema.d.ts

@@ -3,4 +3,5 @@ export interface Schema {
   region?: string;
   bucket?: string;
   subFolder?: string;
-}
+  cfDistributionId?: string;
+}

package.json

@@ -27,7 +27,8 @@
     "help": "nx help",
     "symlinks": "npx symlink-dir ./dist/libs ./node_modules/@jefiozie",
     "workspace-generator": "nx workspace-generator",
-    "generate:changelog": "npx standard-version"
+    "generate:changelog": "npx standard-version",
+    "deploy": "nx deploy"
   },
   "private": true,
   "dependencies": {