Deploying Single Page App with AWS CDK V2

Jaypee Ignacio — Mon, 10 May 2021 09:26:11 +0000

In this post, we will be developing a single-page application using Nuxt.js. A higher-level framework implementation built on top of Vue.js and has a bunch of production features that we can leverage on - like routing, code-splitting, full static implementation, and more.

We will be also using Github for our code repository and AWS CDK (Version 2) to create the development pipeline and S3 that will host static files for our SPA. Basically, the CDKv2 consolidates the construct libraries into a single package but at the time that I am writing this, it is still on developer preview.

To start, we need to make sure we have these items prepared in this development:

Node.js and package manager (npm, yarn or npx)
AWS CLI configured with the right access
Github Personal Access Token

Let's install CDK and bootstrap our nuxt spa application. My preference, I'll separate the repository for the CDK SPA pipeline (hello-cdk-infra) and nuxt application (hello-cdk) but placing the buildspec file on the nuxt app so that it will be easier to update once we add things like env configs, static code analysis and etc.

npm install -g aws-cdk@next

npm init nuxt-app hello-cdk
cd hello-cdk
mkdir codebuild && curl -L https://git.io/J3xII -o codebuild/builspec.yml

git checkout -b develop
git add . && git commit -m "Initialize spa repository"
git remote add origin git@github.com:username/hello-cdk
git push -u origin develop

Builspec details can be found in this gist and the screenshot below are the options I selected for our SPA.

Test the app by executing npm run dev, it should build the project and render our SPA in the browser.

Now we are done with the SPA part, let's create the pipeline and the S3 bucket that will host our application.

mkdir hello-cdk-infra && cd hello-cdk-infra
cdk init app --language typescript

Let's define our github config and region preference, update the file on the bin directory.

bin/hello-cdk-infra.ts

const app = new cdk.App();
const region : string = app.node.tryGetContext('region') || 'ap-northeast-1';
const config = {
  github: {
      owner: 'jaypeeig',
      repository: 'hello-cdk',
  },
  env: {
      region: region
  }
}

new HelloCdkInfraStack(app, 'HelloCdkInfraStack', config);
app.synth();

Next, we will define an interface for our Props and add the services we need for our spa pipeline, which by default is located in the lib directory.

lib/hello-cdk-infra-stack.ts

import { Stack, StackProps } from 'aws-cdk-lib';
import { Construct } from 'constructs';
export interface PipelineProps extends StackProps {
  github: {
    owner: string
    repository: string
  }
}
export class HelloCdkInfraStack extends Stack {
  constructor(scope: Construct, id: string, props?: PipelineProps) {
    super(scope, id, props);

    // The code that defines your stack goes here
  }
}

Let's import S3 from the construct library and add the bucket. Basically, this is the notable change on CDK v2, you don't have to manually install the libraries you need per service, you just have to pull it in aws-cdk-lib.

import { 
  Stack, 
  StackProps,
  RemovalPolicy,
  CfnOutput,
  aws_s3 as s3 
} from 'aws-cdk-lib';

...

const bucketWebsite = new S3.Bucket(this, 'websiteBucket', {
  websiteIndexDocument: 'index.html',
  websiteErrorDocument: 'index.html',
  publicReadAccess: true,
  removalPolicy: cdk.RemovalPolicy.DESTROY,
  cors: [
    {
       allowedOrigins: ['*'],
       allowedMethods: [S3.HttpMethods.GET],
    }
  ]
});

new CfnOutput(this, 'WebsiteURL', {
   value: bucketWebsite.bucketWebsiteUrl,
   description: "'Website URL',"
});

And then, let's initialize our pipeline and add our Github repository (hello-cdk) as the source stage of it. We will be needing the Github Access Token for this to work. To keep it secure, I will be using the SSM Paratemer store to keep the token and we will be pulling it once we deploy the infrastructure. It should be placed in the same region where you will deploy the CDK infrastructure.

SSM Parameter Key for our token: /Demo/Github/AccessToken

import { 
  ....
  SecretValue,
  aws_codepipeline as codepipeline,
  aws_ssm as ssm,
  aws_codepipeline_actions as codepipeline_actions
} from 'aws-cdk-lib';

const outputSources = new codepipeline.Artifact();
const outputBuilds = new codepipeline.Artifact();

const githubToken = ssm.StringParameter.fromStringParameterAttributes(this, 'AccessToken', {
    parameterName: '/Demo/Github/AccessToken'
}).stringValue;

const pipeline = new codepipeline.Pipeline(this, 'Pipeline', {
    pipelineName: `HelloCDK`,
    restartExecutionOnUpdate: true
});

pipeline.addStage({
    stageName: 'Source',
    actions: [
    new codepipeline_actions.GitHubSourceAction({
        actionName: 'Merged',
        owner: props.github.owner,
        repo: props.github.repository,
        oauthToken: SecretValue.plainText(githubToken),
        branch: 'develop',
        output: outputSources,
        trigger: codepipeline_actions.GitHubTrigger.WEBHOOK
    })
    ]
});

Now we have the codepipeline and the github source defined, let us add a stage to build the SPA using codebuild and deploy the generated artifact to S3 bucket.

import { 
  ....
  aws_codebuild as codebuild
} from 'aws-cdk-lib';

const buildProject = new codebuild.PipelineProject(this, 'Build Nuxt SPA', {
  projectName: `HelloCDK-Build`,
  buildSpec: codebuild.BuildSpec.fromSourceFilename('./codebuild/buildspec.yml'),
  environment: {
    buildImage: codebuild.LinuxBuildImage.STANDARD_4_0,
  },
});

pipeline.addStage({
  stageName: 'Build',
  actions: [
    new codepipeline_actions.CodeBuildAction({
      actionName: 'Build',
      project: buildProject,
      input: outputSources,
      outputs: [outputBuilds]
    })
  ]
});

pipeline.addStage({
  stageName: 'Deploy',
  actions: [
    new codepipeline_actions.S3DeployAction({
      actionName: 'Website',
      input: outputBuilds,
      bucket: bucketWebsite
    })
  ]
});

Lastly, we will deploy our CDK stack in cli. This will deploy our infrastructure using cloudformation under the hood, but first we can check our code using cdk synth, if no error found, it will emit a valid cloudformation template, meaning our code is valid.

Run cdk bootstrap first (required in version 2)
Run cdk deploy to provision our pipeline

When finished, the URL of S3 static website is returned in CLI. Now we have a complete pipeline that automatically builds our SPA once our develop branch is updated.

Thanks for reading and happy coding :)

Forem: Jaypee Ignacio

Deploying Single Page App with AWS CDK V2

Repositories