[AWS]Lambda + API Gatewayで動的にHTMLを作成する

2022年12月24日プログラミング

「テスト公開など、まずは初期費用をかけずにWebページを公開したい。」
そんなときにはGCP「Cloud Functions」やAWS「Lambda」などのサーバレス技術を活用すれば、基本的に固定費はかからず、アクセス数に応じた課金だけでWebページを配信することができます。

サーバレスで固定のHTMLを配信する方法はよく見かけますが、動的にWebページを作成する方法はあまり見かけなかったので、この記事では AWS Lambda(node.js) ＋ API Gateway を使って、アクセス時のパラメータでWebページの内容を動的に変更する方法を紹介します。

※ここではLambda、API Gatewayをデプロイするまでの「手順」の説明となります。AWS、node.jsに関する技術的な内容はご自身で学習してください。

GCPのCloud Functionsを使って実現する方法はこちらで紹介しています。

[GCP]Cloud Functions + Flaskで動的にHTMLを作成する

GCPのサービスを使い、パラメータでレスポンスが変わる動的なWebページの公開方法を紹介します。GCPな ...

https://majipon.jp/blog/?p=2903

1. 対象読者
2. AWS Lambdaの作成
3. API Gatewayを作成する
4. さいごに

対象読者

動的なWebコンテンツ（Webアプリ）を、費用を抑えながら公開したい
AWSに関して多少の知識があるのが望ましい

AWS Lambdaの作成

①AWS Lambdaのページへアクセスし、「関数の作成」をクリックする。

②以下の内容に設定し、「関数の作成」をクリックする。

関数名：（任意）　例)myfunction
ランタイム：Node.js 18.x
アーキテクチャ：arm64

③作成した関数の「コード」タブで「index.mjs」を開き、内容を後述のものに書き換える（実際のファイルが必要な場合はこちらを右クリックして保存してください）。書き換え後、「Deploy」をクリックする。

以下の内容に書き換える

export const handler = async(event) => {
    // TODO implement
    
  // パラメータ(id)を取得
  let id = '未指定';
  if(event.queryStringParameters !== null && event.queryStringParameters !== undefined) {
    if(event.queryStringParameters.id !== null && event.queryStringParameters.id !== undefined) {
      id = event.queryStringParameters.id;
    }
   }

  // レスポンスで返すhtmlを記述
  let html = `
<html>
<head>
  <meta charset="UTF-8">
  <title>testpage</title>
</head>

<body>
<h1>テンプレートファイル２</h1>
  受け取ったidは` + id + `です。
</body>
</html>`;

  // レスポンスデータを生成
  const response = {
    statusCode: 200,
    headers: {
      'Content-Type': 'text/html',
    },
    body: html,
  };

  // レスポンスを返す
    return response;
};

④「テスト」タブで「テスト」をクリックし、実行結果が成功になることを確認する。
成功しない場合はこれまでの手順を見直す。