[閉域網]AWS CDKを使用して、ALB+Lambda+S3でSPAなWebサイトを配信してみる

$ mkdir cdk-alb-lambda-s3 && cd cdk-alb-lambda-s3
$ cdk init app --language typescript

import * as cdk from 'aws-cdk-lib';
import { Construct } from 'constructs';
import * as s3 from 'aws-cdk-lib/aws-s3';
import * as aws_s3_deployment from 'aws-cdk-lib/aws-s3-deployment';
import * as ec2 from 'aws-cdk-lib/aws-ec2';
import * as elbv2 from "aws-cdk-lib/aws-elasticloadbalancingv2";
import * as lambda from "aws-cdk-lib/aws-lambda";
import * as elbv2Targets from 'aws-cdk-lib/aws-elasticloadbalancingv2-targets';
import * as route53 from 'aws-cdk-lib/aws-route53';
import * as route53Targets from 'aws-cdk-lib/aws-route53-targets';
import * as iam from 'aws-cdk-lib/aws-iam';

export class CdkAlbLambdaS3Stack extends cdk.Stack {
  constructor(scope: Construct, id: string, props?: cdk.StackProps) {
    super(scope, id, props);

    const bucket = new s3.Bucket(this, 'S3Bucket', {
      bucketName: '{任意のバケット名}',
      versioned: true,
      removalPolicy: cdk.RemovalPolicy.DESTROY,
    });

    new aws_s3_deployment.BucketDeployment(this, 'DeployWebsite', {
      sources: [aws_s3_deployment.Source.asset('./static-app/vue-project/dist')],
      destinationBucket: bucket,
    });

    const vpc = new ec2.Vpc(this, 'Vpc', {
      ipAddresses: ec2.IpAddresses.cidr('10.0.0.0/16'),
      vpcName: 'vpc',
      natGateways: 0,
      subnetConfiguration: [
        {
          name: 'Private',
          subnetType: ec2.SubnetType.PRIVATE_ISOLATED,
          cidrMask: 24,
        }
      ]
    });

    const securityGroup = new ec2.SecurityGroup(this, 'SecurityGroup', {
      vpc: vpc,
      allowAllOutbound: false,
    });
    securityGroup.addEgressRule(
      securityGroup,
      ec2.Port.HTTPS,
    )
    securityGroup.addIngressRule(
      securityGroup,
      ec2.Port.HTTPS,
    )

    const lambdaIamRole = new iam.Role(this, 'LambdaIamRole', {
      roleName: 'LambdaIamRole',
      assumedBy: new iam.ServicePrincipal('lambda.amazonaws.com'),
    });
    lambdaIamRole.addManagedPolicy(iam.ManagedPolicy.fromAwsManagedPolicyName('service-role/AWSLambdaBasicExecutionRole'));
    lambdaIamRole.addManagedPolicy(iam.ManagedPolicy.fromAwsManagedPolicyName('AmazonS3ReadOnlyAccess'));

    const staticSiteFunction = new lambda.Function(this, 'Lambda', {
      runtime: lambda.Runtime.NODEJS_20_X,
      handler: 'static-site.get',
      code: lambda.Code.fromAsset('./functions'),
      role: lambdaIamRole,
    });

    const alb = new elbv2.ApplicationLoadBalancer(this, 'Alb', {
      vpc: vpc,
      securityGroup: securityGroup,
    });

    const tagetGroup = new elbv2.ApplicationTargetGroup(this, 'TagetGroup', {
      targetType: elbv2.TargetType.LAMBDA,
      targets: [new elbv2Targets.LambdaTarget(staticSiteFunction)],
      vpc: vpc,
      healthCheck: {
        enabled: true,
      },
    });

    alb.addListener('AlbListener', {
      protocol: elbv2.ApplicationProtocol.HTTPS,
      port: 443,
      open: false,
      defaultTargetGroups: [tagetGroup],
      certificates: [elbv2.ListenerCertificate.fromArn('{事前に検証済みの証明書ARN}')],
    });

    const zone = new route53.PrivateHostedZone(this, 'PrivateHostedZone', {
      zoneName: '{閉域網内で名前解決させたいドメイン名}',
      vpc,
    });

    new route53.ARecord(this, 'AliasRecord', {
      zone,
      target: route53.RecordTarget.fromAlias(new route53Targets.LoadBalancerTarget(alb)),
    });
  }
}

$ mkdir functions && cd functions
$ npm init
$ npm install -D @types/aws-lambda esbuild @aws-sdk/client-s3

import { GetObjectCommand, S3Client } from '@aws-sdk/client-s3'
export const get = async function (event: any, context: any) {

const regexPatterns = [/^\/$/, /^\/about$/]

const key = regexPatterns.some((pattern) => pattern.test(event.path))
? 'index.html'
: event.path.replace(/^\//, '')

const client = new S3Client({
region: 'ap-northeast-1'
})
const cmd = new GetObjectCommand({
Bucket: '{任意のバケット名}',
Key: key
})
const data = await client.send(cmd)

let isBase64Encoded = false
let body = null
if (/.(png|ico|svg)$/.test(event.path)) {
body = await data.Body.transformToString('base64')
isBase64Encoded = true
} else {
body = await data.Body.transformToString('UTF-8')
}

const response = {
statusCode: 200,
statusDescription: 'OK',
headers: {
'Content-Type': data.ContentType,
'Cache-Control': 'no-cache'
},
body: body,
isBase64Encoded: isBase64Encoded
}

return response;
};

{
  "name": "functions",
  "version": "1.0.0",
  "main": "static-site.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "prebuild": "rm -rf dist",
    "build": "esbuild static-site.ts --bundle --minify --sourcemap --platform=node --target=es2020 --outfile=dist/static-site.js",
    "postbuild": "cd dist && zip -r static-site.zip static-site.js*"
  },
  "author": "",
  "license": "ISC",
  "description": "",
  "devDependencies": {
    "@aws-sdk/client-s3": "^3.637.0",
    "@types/aws-lambda": "^8.10.145",
    "esbuild": "^0.23.1"
  }
}

$ npm run build

$ mkdir static-app && cd static-app
$ npm create vue@latest

✔ Project name: …
✔ Add TypeScript? … Yes
✔ Add JSX Support? … No
✔ Add Vue Router for Single Page Application development? … Yes
✔ Add Pinia for state management? … No
✔ Add Vitest for Unit testing? … No
✔ Add an End-to-End Testing Solution? … No
✔ Add ESLint for code quality? … No
✔ Add Prettier for code formatting? … No
✔ Add Vue DevTools 7 extension for debugging? (experimental) … No

Scaffolding project in ./...
Done.

$ npm install
$ npm run build

$ cdk synth
$ cdk deploy