SvelteKit の SSR を AWS 環境でサーバーレスに動かす

mkdir -p adapter-aws-apigw/files
curl https://raw.githubusercontent.com/sveltejs/kit/6221e6a5758cd1e6cc0f99ccd2ae0e260b97ce3b/packages/adapter-netlify/index.js > adapter-aws-apigw/index.js
curl https://raw.githubusercontent.com/sveltejs/kit/6221e6a5758cd1e6cc0f99ccd2ae0e260b97ce3b/packages/adapter-netlify/files/entry.js > adapter-aws-apigw/files/entry.js
curl https://raw.githubusercontent.com/sveltejs/kit/6221e6a5758cd1e6cc0f99ccd2ae0e260b97ce3b/packages/adapter-netlify/files/shims.js > adapter-aws-apigw/files/shims.js

import { writeFileSync } from 'fs';
import { join } from 'path';
import { fileURLToPath } from 'url';
import esbuild from 'esbuild';

/**
 * @typedef {import('esbuild').BuildOptions} BuildOptions
 */

/** @type {import('.')} */
export default function (options) {
  return {
    name: '@sveltejs/adapter-aws-apigw',

    async adapt({ utils }) {
      const publish = 'build';

      utils.log.minor(`Publishing to "${publish}"`);

      utils.rimraf(publish);

      const files = fileURLToPath(new URL('./files', import.meta.url));

      utils.log.minor('Generating serverless function...');
      utils.copy(join(files, 'entry.js'), '.svelte-kit/aws-apigw/entry.js');

      /** @type {BuildOptions} */
      const default_options = {
        entryPoints: ['.svelte-kit/aws-apigw/entry.js'],
        outfile: '.aws-apigw/functions-internal/__render.js',
        bundle: true,
        inject: [join(files, 'shims.js')],
        platform: 'node',
        minify: true
      };

      const build_options =
        options && options.esbuild ? await options.esbuild(default_options) : default_options;

      await esbuild.build(build_options);

      writeFileSync(join('.aws-apigw', 'package.json'), JSON.stringify({ type: 'commonjs' }));

      utils.log.minor('Prerendering static pages...');
      await utils.prerender({
        dest: publish
      });

      utils.log.minor('Copying assets...');
      utils.copy_static_files(publish);
      utils.copy_client_files(publish);
    }
  };
}

export async function handler(event) {
  const { rawPath, requestContext, headers, rawQueryString, body, isBase64Encoded, cookies } = event;

  const query = new URLSearchParams(rawQueryString);

  const encoding = isBase64Encoded ? 'base64' : headers['content-encoding'] || 'utf-8';
  const rawBody = typeof body === 'string' ? Buffer.from(body, encoding) : body;

  headers.cookie = cookies ? cookies.join('; ') : '';

  const rendered = await render({
    method: requestContext.http.method,
    headers,
    path: rawPath,
    query,
    rawBody
  });
  // ...(省略)

import adapter from './adapter-aws-apigw/index.js';
// ...(省略)

npm i -D serverless ts-node @types/serverless  

npm i -D serverless-s3-deploy

  plugins: [
    'serverless-s3-deploy'
  ],

  custom: {
    assets: {
      auto: true,
      targets: [{
        bucket: { Ref: 'SvelteKitStaticContentsBucket' },
        empty: true,
        files: [{
          source: 'build',
          globs: '**'
        }]
      }]
    }
  },

  package: {
    individually: true,
    patterns: [
      '!**',
      '.aws-apigw/**'
    ]
  },

  functions: {
    sveltekit: {
      handler: '.aws-apigw/functions-internal/__render.handler',
      events: [
        { httpApi: { method: '*', path: '*' }}
      ]
    }
  },

      SvelteKitStaticContentsBucket: {
        Type: 'AWS::S3::Bucket', Properties: {}
      },

      SvelteKitStaticContentsBucketPolicy: {
        Type: 'AWS::S3::BucketPolicy',
        Properties: {
          Bucket: { Ref: 'SvelteKitStaticContentsBucket' },
          PolicyDocument: {
            Statement: [{
              Effect: 'Allow',
              Action: [ 's3:GetObject' ],
              Resource: { 'Fn::Join': [ '/', [{ 'Fn::GetAtt': [ 'SvelteKitStaticContentsBucket', 'Arn' ]}, '*' ]]},
              Principal: {
                CanonicalUser: { 'Fn::GetAtt': [ 'SvelteKitCloudFrontOriginAccessIdentity', 'S3CanonicalUserId' ]}
              }
            }]
          }
        }
      },

      SvelteKitCloudFrontOriginAccessIdentity: {
        Type: 'AWS::CloudFront::CloudFrontOriginAccessIdentity',
        Properties: {
          CloudFrontOriginAccessIdentityConfig: { Comment: name }
        }
      },

      SvelteKitSsrApiGatewayOriginRequestPolicy: {
        Type: "AWS::CloudFront::OriginRequestPolicy",
        Properties: {
          OriginRequestPolicyConfig: {
            Name: 'SvelteKitSsrApiGatewayOriginRequestPolicy',
            HeadersConfig: { HeaderBehavior : 'none' },
            QueryStringsConfig: { QueryStringBehavior: 'all' },
            CookiesConfig: { CookieBehavior: 'all' }
          }
        }
      },

      SvelteKitDistribution: {
        Type: 'AWS::CloudFront::Distribution',
        Properties: {
          DistributionConfig: {
            Comment: name,
            Enabled: true,
            HttpVersion: 'http2',
            PriceClass: 'PriceClass_200',
            DefaultCacheBehavior: {
              TargetOriginId: 'SvelteKitSsrApiGatewayOrigin',
              Compress: true,
              ViewerProtocolPolicy: 'redirect-to-https',
              AllowedMethods: [ 'GET', 'HEAD', 'OPTIONS', 'PUT', 'PATCH', 'POST', 'DELETE' ],
              CachePolicyId: '4135ea2d-6df8-44a3-9df3-4b5a84be39ad', // Managed-CachingDisabled
              OriginRequestPolicyId: { Ref: 'SvelteKitSsrApiGatewayOriginRequestPolicy' }
            },
            CacheBehaviors: [
              {
                TargetOriginId: 'SvelteKitStaticContentsBucketOrigin',
                PathPattern: '/_app/*',
                Compress: true,
                ViewerProtocolPolicy: 'redirect-to-https',
                AllowedMethods: [ 'GET', 'HEAD' ],
                CachePolicyId: '658327ea-f89d-4fab-a63d-7e88639e58f6' // Managed-CachingOptimized
              }
            ],
            Origins: [
              {
                Id: 'SvelteKitSsrApiGatewayOrigin',
                DomainName: { "Fn::Join": [ ".", [{ Ref: 'HttpApi' }, 'execute-api', { Ref: 'AWS::Region' }, { Ref: 'AWS::URLSuffix' }]]},
                CustomOriginConfig: {
                  OriginProtocolPolicy: 'https-only'
                }
              },
              {
                Id: 'SvelteKitStaticContentsBucketOrigin',
                DomainName: { 'Fn::GetAtt': [ 'SvelteKitStaticContentsBucket', 'DomainName' ]},
                S3OriginConfig: {
                  OriginAccessIdentity: { 'Fn::Join': [ '/', [ 'origin-access-identity/cloudfront', { Ref: 'SvelteKitCloudFrontOriginAccessIdentity' }]]}
                }
              }
            ]
          }
        }

{
  ...省略
  "ts-node": {
    "moduleTypes": {
      "serverless-config.ts": "cjs"
    }
  },
  "include": ["serverless-config.ts", "src/**/*.d.ts", "src/**/*.js", "src/**/*.ts", "src/**/*.svelte"]
}

import { Providers, SvelteKitAuth } from 'sk-auth';

export const auth = new SvelteKitAuth({
  jwtSecret: import.meta.env.VITE_JWT_SECRET,
  providers: [
    new class extends Providers.GoogleOAuth2Provider {

      constructor() {
        super({
          clientId: import.meta.env.VITE_GOOGLE_OAUTH_CLIENT_ID,
          clientSecret: import.meta.env.VITE_GOOGLE_OAUTH_CLIENT_SECRET,
          profile(profile) {
            return { ...profile, provider: 'google' };
          }
        });
      }

      getCallbackUri(): string {
        return import.meta.env.VITE_CALLBACK_URI_FOR_CLOUDFRONT;
      }
    }()
  ]
});

/// <reference types="@sveltejs/kit" />

interface ImportMetaEnv {
  VITE_JWT_SECRET: string;
  VITE_GOOGLE_OAUTH_CLIENT_ID: string;
  VITE_GOOGLE_OAUTH_CLIENT_SECRET: string;
  VITE_CALLBACK_URI_FOR_CLOUDFRONT: string;
}

# JWT secret used to sign and verify the cookies (256-bits or more)
VITE_JWT_SECRET=[your-jwt-secret-over-256-bit]

# Client ID for Google OAuth
VITE_GOOGLE_OAUTH_CLIENT_ID=[your-google-oauth-client-id]

# Client Secret for Google OAuth
VITE_GOOGLE_OAUTH_CLIENT_SECRET=[your-google-oauth-client-secret]

# Callback URI for CloudFront with CloudFront/API Gateway integration
VITE_CALLBACK_URI_FOR_CLOUDFRONT=https://[your-cloudfront-domain]/api/auth/callback/google

{
  ...(省略)
  "scripts": {
    ...(省略)
    "deploy": "serverless deploy --config serverless-config.ts --verbose"
  }
}

$ npm run deploy

> [email protected] deploy
> serverless deploy --config serverless-config.ts --verbose

Serverless: Packaging service...
...(省略)

Stack Outputs
SvelteKitDistribution: a10qz7j3ikaaXX.cloudfront.net
HttpApiId: a1rpa7y7XX
ServerlessDeploymentBucketName: sveltekit-google-auth-aw-serverlessdeploymentbuck-a23ajz9jgnidXX
HttpApiUrl: https://a2rpad7y7XX.execute-api.us-east-1.amazonaws.com

Serverless: Emptying bucket: sveltekit-google-auth-aw-sveltekitstaticcontentsb-a1zds7ivdsyjXX
Serverless: Sync bucket: sveltekit-google-auth-aw-sveltekitstaticcontentsb-a1zds7ivdsyjXX
Serverless: Path: build
Serverless:     File:  _app/assets/start-61d1577b.css (text/css)
...(省略)