feat(nextjs-component): add build.postBuildCommands input to execute any command or script post-build (#772)

Author: dphang

README.md

@@ -438,6 +438,7 @@ The fourth cache behaviour handles next API requests `api/*`.
 | build.cwd                | `string`          | `./`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | Override the current working directory                                                                                                                                                                                                                                                                                                                                                                                             |
 | build.enabled            | `boolean`         | `true`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | Same as passing `build:false` but from within the config                                                                                                                                                                                                                                                                                                                                                                           |
 | build.env                | `object`          | `{}`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | Add additional environment variables to the script                                                                                                                                                                                                                                                                                                                                                                                 |
+| build.postBuildCommands  | `Array`           | `[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | Any commands to run post-build and pre-deploy. For example, you can run any custom code on the `.serverless_nextjs` directory. Only applies during execution of the `serverless` command.                                                                                                                                                                                                                                          |
 | cloudfront               | `object`          | `{}`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | Inputs to be passed to [aws-cloudfront](https://github.com/serverless-components/aws-cloudfront)                                                                                                                                                                                                                                                                                                                                   |
 | certificateArn           | `string`          | `` | Specific certificate ARN to use for CloudFront distribution. Helpful if you have a wildcard SSL cert you wish to use. This currently works only in tandem with the `domain` input. Please check [custom CloudFront configuration](https://github.com/serverless-nextjs/serverless-next.js#custom-cloudfront-configuration) for how to specify `certificate` without needing to use the `domain` input (note that doing so will override any certificate due to the domain input). |
 | domainType               | `string`          | `"both"`                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | Can be one of: `"apex"` - apex domain only, don't create a www subdomain. `"www"` - www domain only, don't create an apex subdomain.`"both"` - create both www and apex domains when either one is provided.                                                                                                                                                                                                                       |
@@ -629,6 +630,7 @@ In summary, you will have to create a new S3 bucket and set it up with static we
 To allow your app to access the defined environment variables, you need to expose them via the `next.config.js` as outlined [here](https://nextjs.org/docs/api-reference/next.config.js/environment-variables).
 
 Given a `serverless.yml` like this
+
 ```yml
 myApp:
   inputs:
@@ -642,9 +644,9 @@ your next.config.js should look like that:
 ```js
 module.exports = {
   env: {
-    API_HOST: process.env.API_HOST,
-  },
-}
+    API_HOST: process.env.API_HOST
+  }
+};
 ```
 
 ## Contributing

packages/e2e-tests/next-app/scripts/post-build-test.js

@@ -0,0 +1 @@
+console.log("Successfully run a post-build command script.");

packages/e2e-tests/next-app/serverless.yml

@@ -1,2 +1,5 @@
 next-app:
   component: "../../serverless-components/nextjs-component"
+  inputs:
+    build:
+      postBuildCommands: ["node scripts/post-build-test.js"]

packages/serverless-components/nextjs-component/__tests__/post-build.test.ts

@@ -0,0 +1,29 @@
+import NextjsComponent from "../src/component";
+import { BuildOptions } from "../types";
+
+describe("Post-build tests", () => {
+  let component: NextjsComponent;
+  let buildOptions: BuildOptions;
+
+  beforeEach(async () => {
+    component = new NextjsComponent();
+    buildOptions = {
+      cmd: "true",
+      args: []
+    };
+  });
+
+  it("executes post-build command successfully", async () => {
+    buildOptions.postBuildCommands = ["true"];
+
+    await component.postBuild({ build: buildOptions });
+  });
+
+  it("fails to execute post-build command", async () => {
+    buildOptions.postBuildCommands = ["false"];
+
+    await expect(
+      component.postBuild({ build: buildOptions })
+    ).rejects.toThrow();
+  });
+});

packages/serverless-components/nextjs-component/src/component.ts

@@ -21,6 +21,7 @@ import type {
   LambdaType,
   LambdaInput
 } from "../types";
+import { execSync } from "child_process";
 
 // Message when deployment is explicitly skipped
 const SKIPPED_DEPLOY = "SKIPPED_DEPLOY";
@@ -37,6 +38,7 @@ class NextjsComponent extends Component {
   ): Promise<DeploymentResult> {
     if (inputs.build !== false) {
       await this.build(inputs);
+      await this.postBuild(inputs);
     }
 
     return this.deploy(inputs);
@@ -210,6 +212,22 @@ class NextjsComponent extends Component {
     }
   }
 
+  /**
+   * Run any post-build steps.
+   * Useful to run any custom commands before deploying.
+   * @param inputs
+   */
+  async postBuild(inputs: ServerlessComponentInputs): Promise<void> {
+    const buildOptions = inputs.build;
+
+    const postBuildCommands =
+      (buildOptions as BuildOptions)?.postBuildCommands ?? [];
+
+    for (const command of postBuildCommands) {
+      execSync(command, { stdio: "inherit" });
+    }
+  }
+
   async deploy(
     inputs: ServerlessComponentInputs = {}
   ): Promise<DeploymentResult> {

packages/serverless-components/nextjs-component/types.d.ts

@@ -34,6 +34,7 @@ export type BuildOptions = {
   cmd: string;
   args: string[];
   env?: Record<string, string>;
+  postBuildCommands?: string[];
 };
 
 export type LambdaType = "defaultLambda" | "apiLambda";