DEV Community

loading...
AWS Community ASEAN

Deploying Single Page App with AWS CDK V2

jaypeeig profile image Jaypee Ignacio ・4 min read

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.

DEV.to SPA CDK

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

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
Enter fullscreen mode Exit fullscreen mode

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

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


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
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

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
  }
}

Enter fullscreen mode Exit fullscreen mode

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',"
});
Enter fullscreen mode Exit fullscreen mode

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
    })
    ]
});

Enter fullscreen mode Exit fullscreen mode

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
    })
  ]
});

Enter fullscreen mode Exit fullscreen mode

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

image

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 :)

Repositories


Discussion (2)

Collapse
raphael_jambalos profile image
Raphael Jambalos

Hi Jaypee! Great work on this! Last year, I had to create a similar project but I only knew CloudFormation back then. It took me hundreds of YAML to write what you were able to write in ~20-30 lines.

Just an aside, do you have a preference between CDK and Terraform?

Collapse
jaypeeig profile image
Jaypee Ignacio Author

Thanks Jamby, both are great IaC tools (and community) but I prefer to use CDK on my projects, maybe because of language preference and code reusability.

I've also seen this CDK support for TF, but haven't tried yet
aws.amazon.com/blogs/developer/int...

Forem Open with the Forem app