Zenn
✨

S3静的ウェブサイト×API Gateway&lambda(TypeScript)で簡易サービス構築

に公開
TypeScript
Lambda
S3
Cursor
生成 AI
tech

作ったサービス

AWS上で下記構成の簡易的なSPAのサービスを構築しました。

  • 機能概要

    • 複数の天気予報サイトから1週間分の予報を取得して比較できるサービス
      • ※実際のサイトからデータ取得はしておらずダミーのデータを取得しています。

  • フロントエンド

    • HTML&JavaScript
    • tailwind.css
    • S3を使用して静的ウェブサイトをホスティング

  • バックエンド

    • API Gateway
    • lambda
      • TypeScript

※詳細はREADMEを参照ください。
https://github.com/ajimiq/weather-aggregator

ローカル環境で動作確認

ローカル環境で確認できます。

cd backend
npm run dev

ローカル環境でサーバレスAPIの確認もできます。

cd backend
npm run lambda:dev

本番デプロイ

cd backend
npm run lambda:deploy

実行するとServerless FrameworkがCloudFormationテンプレートを自動生成してAWSインフラを自動で構築してくれます。

実行ログ
$ npm run lambda:deploy

> weather-aggregator-backend@1.0.0 lambda:deploy
> npx serverless deploy

Deploying weather-aggregator-api to stage dev (ap-northeast-1)
Package lock found - Using locked versions
Packing external modules: cors@^2.8.5, express@^4.18.2, node-cache@^5.1.2, serverless-http@^3.2.0
Warning: Function (api) timeout setting (30) may not provide enough room to process an HTTP API request (of which timeout is limited to 30s). This may introduce a situation where endpoint times out for a successful lambda invocation.
> weather-aggregator-backend@1.0.0 lambda:deploy
> npx serverless deploy

Deploying weather-aggregator-api to stage dev (ap-northeast-1)
Package lock found - Using locked versions
Packing external modules: cors@^2.8.5, express@^4.18.2, node-cache@^5.1.2, serverless-http@^3.2.0
Warning: Function (api) timeout setting (30) may not provide enough room to process an HTTP API request (of which timeout is limited to 30s). This may introduce a situation where endpoint times out for a successful lambda invocation.
Package lock found - Using locked versions
Packing external modules: cors@^2.8.5, express@^4.18.2, node-cache@^5.1.2, serverless-http@^3.2.0
Warning: Function (api) timeout setting (30) may not provide enough room to process an HTTP API request (of which timeout is limited to 30s). This may introduce a situation where endpoint times out for a successful lambda invocation.
Warning: Function (api) timeout setting (30) may not provide enough room to process an HTTP API request (of which timeout is limited to 30s). This may introduce a situation where endpoint times out for a successful lambda invocation.
duce a situation where endpoint times out for a successful lambda invocation.

✔ Service deployed to stack weather-aggregator-api-dev (89s)

endpoints:
  ANY - https://XXXXXXX.execute-api.ap-northeast-1.amazonaws.com/api/{proxy+}
  ANY - https://XXXXXXX.execute-api.ap-northeast-1.amazonaws.com/
functions:
  api: weather-aggregator-api-dev-api (1.2 MB)

Serverless Framework V4 is now available.
- Learn more in our README: https://github.com/serverless/serverless
- Run "npm i serverless -g" to update

Warningになっているのは、Lambda関数のタイムアウトが30秒に設定されているが、APIリクエストも30秒でタイムアウトする設定になっているので、この場合、処理が完了してもAPIがタイムアウトする可能性があるという警告です。
デプロイの所要時間は89秒でした。

デプロイ完了後、AWS上にlambda関数が作成されました。

lambda

AWS上にAPI Gatewayが作成されました。

API Gateway

S3にフロントエンドのファイルを配置して静的ウェブサイトをホスティング

  1. 任意のバケットを作成
  2. パブリックアクセスブロックのチェックを外す
  3. バケットポリシーを編集して、アクセス許可する
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadForGetBucketObjects",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::{バケット名}/*"
        }
    ]
}
  1. S3静的ウェブサイトホスティングを有効にする。
  2. フロントエンドのファイルをアップロードする
  3. index.htmlのオブジェクトURLをアクセスすると画面が開きます。APIでダミーデータを取得しています。

画面
※ダミーデータのためランダムで適当な天気予報データを生成しています。

さいごに

ほぼCursorのエージェントモードで作成しました。 　　
AWSへのデプロイ方法も作成してくれました。
昨今の生成AIの能力には驚かされるばかりです…！

実際の天気予報乗法を各サイトから取得する部分は未実装です。
この部分もCursorを使って作成したいですが、各サイトごとにデータの構成（地域など）が異なるのでそれを合わせるのが大変な印象です。

※ちなみに同じようなサービスはありました。
https://staldia.com/forecast-comparison-app/

最後までお読みいただき、ありがとうございました。
この記事がわずかでも役に立てば幸いです。

Discussion