Serverless Frameworkでwebページを作る #JavaScript

「Serverlessでwebサイト」っていうと大体「S3にHTMLを置いて、APIでやりとりしよう」という構成の話が出てきますよね。
でもそれだとSPAでは良いのですが、通常のwebサイトのような動的にコンテンツやmetaタグを出したいサイトでは、都度都度S3にHTMLをアップロードしないといけなくなっちゃいます。

ということでLambda + API Gatewayで動的にコンテンツ配信やっちゃいましょう。

Serverless Frameworkでプロジェクトを作る

なにはともかくプロジェクト作りましょう。
以下のコマンドでプロジェクト雛形が作れます。

$ npm install serverless -g
$ serverless create --template aws-nodejs --path sample
$ cd sample

API / Lambdaの設定をする

続いてAPI Gatewayの設定をします。

serverless.yml

functions:
  hello:
    handler: handler.hello
    description: Index Page
    events:
      - http:
          method: get
          path: index
          response:
            headers:
              Content-Type: "'text/html'"
            template: $input.path('$')

Response.headersのContent-Typeを"'text/html'"に設定することで、API GatewayからHTMLを配信することが可能になります。

LambdaからHTMLを返す

あとはLambdaからHTMLを返せばOKです。

'use strict';

// Your first function handler
module.exports.hello = (event, context, cb) => {
    var renderedPage = renderFullPage( 'Go Serverless v1.0! Your function executed successfully!');
  cb(null, renderedPage );
};

// You can add more handlers here, and reference them in serverless.yml

function renderFullPage(renderedContent) {
  return `<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <div id="container">${renderedContent}</div>
    </body>
</html>`;
}

デプロイ・動作確認

sls deploy
Serverless: Packaging service...
Serverless: Removing old service versions...
Serverless: Uploading CloudFormation file to S3...
Serverless: Uploading service .zip file to S3...
Serverless: Updating Stack...
Serverless: Checking Stack update progress...

..........
Serverless: Stack update finished...

Service Information
service: serverless-react
stage: dev
region: us-east-1
api keys:
  None
endpoints:
  GET - https://xxxxxxxxx.execute-api.us-east-1.amazonaws.com/dev/index
functions:
  serverless-react-dev-hello: arn:aws:lambda:us-east-1:xxxxxxxxxxxx:function:serverless-react-dev-hello

デプロイが成功すれば、endpointsにURLが表示されます。
アクセスすると、このようにHTMLが表示されます。

最後に

今回はとりあえずHTML返すだけにしましたが、APIのクエリを動的にしたりReactあたりを使ってSSRしていくとより良い感じになるかなと思います。