React + CDK で Serverless SPA を開発する手法について

{
  "Namespace": "/ReactCDKAppTemplate/",
  "Parameters": [
    {
      "Name": "CloudFrontAliasCertArn",
      "CLIFormat": "cloudfront-alias-cert-arn",
      "Description": "The ARN for the ACM certificate used for CloudFront destribution"
    },
    {
      "Name": "CloudFrontDomainName",
      "CLIFormat": "cloudfront-domain-name",
      "Description": "The domain name for CloudFront destribution"
    },
    {
      "Name": "HostedZoneName",
      "CLIFormat": "hosted-zone-name",
      "Description": "The name of Route 53 Hosted Zone"
    },
    {
      "Name": "HostedZoneId",
      "CLIFormat": "hosted-zone-id",
      "Description": "The ID of Route 53 Hosted Zone"
    }
  ],
  "DefaultOptions": [
    {
      "CLIFormat": "delete",
      "ShortCLIFormat": "d",
      "Action": "store_true",
      "Help": "delete all AWS SSM Parameters (after CDK stack was destroyed)"
    },
    {
      "CLIFormat": "interactive",
      "ShortCLIFormat": "i",
      "Action": "store_true",
      "Help": "run in interactive mode"
    },
    {
      "CLIFormat": "test",
      "ShortCLIFormat": "t",
      "Action": "store_true",
      "Help": "run in test mode (only creates config.cache.json, but does not store parameters to SSM Parameter Store)"
    }
  ]
}

import json

import aws_cdk as cdk
from constructs import Construct
from aws_cdk import (
  Stack,
  CfnOutput,
  aws_ssm as ssm,
  aws_s3 as s3,
  aws_certificatemanager as acm,
  aws_cloudfront as cloudfront,
  aws_route53 as route53,
  aws_route53_targets as targets,
)

config_params = json.load(open("config.params.json", "r"))
namespace = config_params["Namespace"]


class FrontendStack(Stack):

  @property
  def s3_bucket_name(self):
    return self._s3_bucket_name

  @property
  def app_url(self):
    return self._app_url

  def __init__(self, scope: Construct, construct_id: str, **kwargs) -> None:
    super().__init__(scope, construct_id, **kwargs)

    cloudfront_alias_cert_arn = ssm.StringParameter.value_for_string_parameter(self, namespace + "CloudFrontAliasCertArn")
    cloudfront_domain_name = ssm.StringParameter.value_for_string_parameter(self, namespace + "CloudFrontDomainName")
    hosted_zone_id = ssm.StringParameter.value_for_string_parameter(self, namespace + "HostedZoneId")    
    hosted_zone_name = ssm.StringParameter.value_for_string_parameter(self, namespace + "HostedZoneName")

    bucket = s3.Bucket(self, "ReactWebAppHostingBucket", )
    bucket.apply_removal_policy(cdk.RemovalPolicy.DESTROY)

    certificate = acm.Certificate.from_certificate_arn(self, "Certificate", certificate_arn=cloudfront_alias_cert_arn)

    cloudfront_oai = cloudfront.OriginAccessIdentity(self, "MyCfnCloudFrontOriginAccessIdentity")
    cloudfront_distribution = cloudfront.CloudFrontWebDistribution(self, "ReactWebbAppDistribution",
      comment="CloudFront Distribution for {}".format(namespace.replace("/", "")),
      default_root_object="index.html",
      viewer_certificate=cloudfront.ViewerCertificate.from_acm_certificate(certificate,
        aliases=[cloudfront_domain_name],
      ),
      origin_configs=[
        cloudfront.SourceConfiguration(
          s3_origin_source=cloudfront.S3OriginConfig(
            s3_bucket_source=bucket,
            origin_access_identity=cloudfront_oai
          ),
          behaviors=[cloudfront.Behavior(is_default_behavior=True)]
        )
      ],
      error_configurations=[
        cloudfront.CfnDistribution.CustomErrorResponseProperty(
          error_code=404,
          error_caching_min_ttl=0,
          response_code=200,
          response_page_path="/index.html"
        ) 
      ]
    )
    bucket.grant_read(cloudfront_oai.grant_principal)

    zone = route53.HostedZone.from_hosted_zone_attributes(self, "ZoneForApp",
      hosted_zone_id=hosted_zone_id,
      zone_name=hosted_zone_name
    )

    record = route53.ARecord(self, "AliasRecord", 
      zone=zone,
      target=route53.RecordTarget.from_alias(targets.CloudFrontTarget(cloudfront_distribution))
    )

    self._s3_bucket_name = CfnOutput(
      self, "S3BucketName",
      value=bucket.bucket_name
    )

    self._app_url = CfnOutput(
      self, "WebAppUrl",
      value="https://" + record.domain_name,
      description="The URL of the app"
    )

from constructs import Construct
from aws_cdk import (
  Stage
)
from frontend_stack import FrontendStack

class FrontendPipelineStage(Stage):

  @property
  def s3_bucket_name(self):
    return self._s3_bucket_name

  @property
  def app_url(self):
    return self._app_url

  def __init__(self, scope: Construct, id: str, **kwargs):
    super().__init__(scope, id, **kwargs)

    frontend = FrontendStack(self, "Frontend")
    self._app_url = frontend.app_url
    self._s3_bucket_name = frontend.s3_bucket_name

def handler(event, context):
  return {
    'statusCode': 200,
    'headers': {
      'Content-Type': 'text/plain'
    },
    'body': 'Hello'
  }

from constructs import Construct
from aws_cdk import (
  Stack,
  CfnOutput,
  aws_lambda as _lambda,
  aws_apigateway as apigw,
)

class BackendStack(Stack):

  @property
  def hello_api_endpoint(self):
    return self._hello_api_endpoint

  def __init__(self, scope: Construct, construct_id: str, **kwargs) -> None:
    super().__init__(scope, construct_id, **kwargs)

    hello_lambda = _lambda.Function(
      self, 'HelloHandler',
      runtime=_lambda.Runtime.PYTHON_3_9,
      code=_lambda.Code.from_asset('lib/lambda'),
      handler='hello.handler',
    )

    hello_api = apigw.LambdaRestApi(
      self, 'Endpoint',
      handler=hello_lambda
    )

    self._hello_api_endpoint = CfnOutput(
      self, 'HelloAPIEndpoint',
      value=hello_api.url
    )

from constructs import Construct
from aws_cdk import (
  Stage
)
from backend_stack import BackendStack

class BackendPipelineStage(Stage):

  @property
  def hello_api_endpoint(self):
    return self._hello_api_endpoint

  def __init__(self, scope: Construct, id: str, **kwargs):
    super().__init__(scope, id, **kwargs)

    backend = BackendStack(self, "Backend")
    self._hello_api_endpoint = backend.hello_api_endpoint

$ npx create-react-app frontend

from aws_cdk import (
  Stack,
  SecretValue,
  pipelines as pipelines,
  aws_iam as iam,
)
from constructs import Construct
from backend_pipeline_stage import BackendPipelineStage
from frontend_pipeline_stage import FrontendPipelineStage

class PipelineStack(Stack):

  def __init__(self, scope: Construct, construct_id: str, **kwargs) -> None:
    super().__init__(scope, construct_id, **kwargs)

    repository = "U-PIN/react-cdk-template"
    branch = "main"

    pipeline = pipelines.CodePipeline(
      self,
      "Pipeline",
      synth=pipelines.ShellStep(
        "Synth",
        input=pipelines.CodePipelineSource.git_hub(
          repository,
          branch,
          authentication=SecretValue.secrets_manager("GitHubOAuthToken")
        ),
        commands = [
          "npm install -g aws-cdk",
          "pip install -r requirements.txt",
          "npx cdk synth"
        ]
      )
    )

    backend = BackendPipelineStage(self, "DeployBackend")
    backend_stage = pipeline.add_stage(backend)

    frontend = FrontendPipelineStage(self, "DeployFrontend")
    frontend_stage = pipeline.add_stage(frontend)
    frontend_stage.add_post(
      pipelines.CodeBuildStep(
        "BuildAndDeployWebAppToS3",
        env_from_cfn_outputs={
          "S3_BUCKET": frontend.s3_bucket_name,
          "HELLO_API": backend.hello_api_endpoint
        },
        commands=[
          "cd frontend",
          'echo REACT_APP_HELLO_API="$HELLO_API" >> .env',
          "npm install",
          "npm run build",
          "aws s3 sync build s3://$S3_BUCKET/"
        ],
        role_policy_statements=[
          iam.PolicyStatement(
            actions=["s3:*"],
            resources=["*"]
          )
        ]
      )
    )

$ python3 -m venv .venv
$ source .venv/bin/activate

$ pip install -r requirements.txt
$ cd frontend
$ cd npm install

$ python configure.py -i

$ npx cdk synth
$ npx cdk deploy