feat: add ssr with lambda@edge

Author: eelayoubi

.gitignore

@@ -10,6 +10,8 @@
 # dependencies
 /node_modules
 
+.serverless
+
 # profiling files
 chrome-profiler-events*.json
 speed-measure-plugin*.json

angular.json

@@ -17,7 +17,7 @@
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
-            "outputPath": "dist/angular-lambda-ssr",
+            "outputPath": "dist/angular-lambda-ssr/browser",
             "index": "src/index.html",
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
@@ -102,7 +102,8 @@
             "tsConfig": [
               "tsconfig.app.json",
               "tsconfig.spec.json",
-              "e2e/tsconfig.json"
+              "e2e/tsconfig.json",
+              "tsconfig.server.json"
             ],
             "exclude": [
               "**/node_modules/**"
@@ -120,6 +121,74 @@
               "devServerTarget": "angular-lambda-ssr:serve:production"
             }
           }
+        },
+        "serverless": {
+          "builder": "@angular-devkit/build-angular:server",
+          "options": {
+            "outputPath": "dist/angular-lambda-ssr/serverless",
+            "main": "serverless.ts",
+            "tsConfig": "tsconfig.serverless.json"
+          },
+          "configurations": {
+            "production": {
+              "outputHashing": "media",
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "sourceMap": false,
+              "optimization": true
+            }
+          }
+        },
+        "server": {
+          "builder": "@angular-devkit/build-angular:server",
+          "options": {
+            "outputPath": "dist/angular-lambda-ssr/server",
+            "main": "server.ts",
+            "tsConfig": "tsconfig.server.json"
+          },
+          "configurations": {
+            "production": {
+              "outputHashing": "media",
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "sourceMap": false,
+              "optimization": true
+            }
+          }
+        },
+        "serve-ssr": {
+          "builder": "@nguniversal/builders:ssr-dev-server",
+          "options": {
+            "browserTarget": "angular-lambda-ssr:build",
+            "serverTarget": "angular-lambda-ssr:server"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "angular-lambda-ssr:build:production",
+              "serverTarget": "angular-lambda-ssr:server:production"
+            }
+          }
+        },
+        "prerender": {
+          "builder": "@nguniversal/builders:prerender",
+          "options": {
+            "browserTarget": "angular-lambda-ssr:build:production",
+            "serverTarget": "angular-lambda-ssr:server:production",
+            "routes": [
+              "/"
+            ]
+          },
+          "configurations": {
+            "production": {}
+          }
         }
       }
     }

event.json

@@ -0,0 +1,62 @@
+{
+  "Records": [
+    {
+      "cf": {
+        "config": {
+          "distributionDomainName": "d123.cloudfront.net",
+          "distributionId": "EDFDVBD6EXAMPLE",
+          "eventType": "viewer-request",
+          "requestId": "MRVMF7KydIvxMWfJIglgwHQwZsbG2IhRJ07sn9AkKUFSHS9EXAMPLE=="
+        },
+        "request": {
+          "body": {
+            "action": "read-only",
+            "data": "eyJ1c2VybmFtZSI6IkxhbWJkYUBFZGdlIiwiY29tbWVudCI6IlRoaXMgaXMgcmVxdWVzdCBib2R5In0=",
+            "encoding": "base64",
+            "inputTruncated": false
+          },
+          "clientIp": "2001:0db8:85a3:0:0:8a2e:0370:7334",
+          "querystring": "size=large",
+          "uri": "/",
+          "method": "GET",
+          "headers": {
+            "host": [
+              {
+                "key": "Host",
+                "value": "d111111abcdef8.cloudfront.net"
+              }
+            ],
+            "user-agent": [
+              {
+                "key": "User-Agent",
+                "value": "curl/7.51.0"
+              }
+            ]
+          },
+          "origin": {
+            "custom": {
+              "customHeaders": {
+                "my-origin-custom-header": [
+                  {
+                    "key": "My-Origin-Custom-Header",
+                    "value": "Test"
+                  }
+                ]
+              },
+              "domainName": "example.com",
+              "keepaliveTimeout": 5,
+              "path": "/custom_path",
+              "port": 443,
+              "protocol": "https",
+              "readTimeout": 5,
+              "sslProtocols": [
+                "TLSv1",
+                "TLSv1.1"
+              ]
+            }
+          }
+        }
+      }
+    }
+  ]
+}

instructions.txt

@@ -0,0 +1,33 @@
+
+- prerequisites:
+    - aws account
+    - aws cli configure
+    - serverless framework installed
+    
+- install ng add @nguniversal/express-engine
+- add serverless.ts (to keep things clean)
+- add serverless in angular.json (to keep things clean)
+- add ServerTransferStateModule in app.server.module.ts
+- add TransferHttpCacheModule in app.module.ts
+- add lambda.js file
+- run yarn add html-minifier
+- add in package.json:
+    "build:sls": "ng build --prod && ng run angular-lambda-ssr:serverless:production"
+- deploy serverless distribution:
+    serverless deploy --config serverless-distribution.yml
+- replace the url in search.servicee with the cloudfront endpoint
+- build:
+    yarn build:sls
+- upload dist to s3:
+      aws s3 sync . s3://eelayoubi-ssr-test --profile A4L-MASTER
+- deploy lambda stack
+    serverless deploy
+- attach lambda to cloudfront origin request
+
+# cleanup
+- empty the bucket that contains the dist (if not empty, cannot be deleted)
+- delete distribution stack:
+     serverless remove --config serverless-distribution.yml
+- wait for a while then delete lambda stack
+    serverless remove
+    

lambda.js

@@ -0,0 +1,43 @@
+
+const path = require('path')
+const serverless = require('serverless-http');
+const minify = require('html-minifier').minify;
+
+const { app } = require("./dist/angular-lambda-ssr/serverless/main");
+
+const handle = serverless(app, {
+    provider: 'aws',
+    type: 'lambda-edge-origin-request'
+});
+
+const handler = async (event, context, callback) => {
+    const request = event.Records[0].cf.request;
+
+
+    if ((!path.extname(request.uri)) || (request.uri === '/index.html')) {
+        const response = await handle(event, context);
+        let minified = minify(response.body, {
+            caseSensitive: true,
+            collapseWhitespace: true,
+            preserveLineBreaks: true,
+            removeAttributeQuotes: true,
+            removeComments: true
+        });
+        console.log('response: ', response)
+        callback(null, {
+            status: response.status,
+            statusDescription: response.statusDescription,
+            headers: {
+                ...response.headers,
+            },
+            body: minified,
+            bodyEncoding: response.bodyEncoding
+        });
+    } else {
+        console.log(`${request.uri} directly served from S3`)
+        return request;
+    }
+
+}
+
+exports.handler = handler;