ChatGPT 4oと対話しながらwebサービスを個人開発する話 その②

# これまで
前回の記事でChatGPTと対話しながらフロントエンドとバックエンドの土台となるコードを作成しました。今回は、AWSにサーバーレスの環境を構築していきます。

[前回の記事]

https://qiita.com/travelclass0606/items/fceb85872620a418e8ab

# やること
Route53でドメイン取得
↓
Cloudfrontで配信
↓
S3でフロントエンドをホスティング
↓
APIGatewayを介してLambda関数を実行
↓
DyanmoDBでデータ管理

# Route53/CloudFront/S3の構築
以下の記事を見ながら環境を構築しました。
記事通り、進めて特に問題なく完了。

https://qiita.com/ushi_osushi/items/a32d7b710567c2313faa

# Lambda関数/API Gatewayの構築
まずは、Lambda関数を作成していきます。

AWSのLambda関数へ行き「関数の作成」をクリックします。
![スクリーンショット 2024-10-25 20.05.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3892822/63bd20a0-6ee9-7a24-8cdf-2c0c28d8c9f9.png)

任意の関数名を入力、ランタイムに「Node.js 18.x」を選択し、「関数の作成」をクリックします。
![スクリーンショット 2024-10-25 20.09.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3892822/7d247835-584a-26d4-9d15-690c46c5b4c9.png)
これでLambda関数の作成は完了しました。

次にAPI Gatewayを作成し、Lambda関数と連携していきます。
先ほど作成したLambda関数へいくと、以下の画面になっているので「トリガーを追加」を選択します。
![スクリーンショット 2024-10-25 20.21.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3892822/51684f3e-ae55-12ef-8d7b-97782877d6e7.png)

「API Gateway」「新規APIを作成」「REST API」を選択し、「追加」クリックします。
![スクリーンショット 2024-10-26 8.10.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3892822/7b354fa2-827d-097a-f428-fa6be254beaf.png)


Lamada関数の「設定」にAPIエンドポイントが作成され、Lambda関数とAPI Gatewayの連携ができました。
![スクリーンショット 2024-10-26 8.11.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3892822/a3a9b193-8ec4-dbf4-1d86-60465b539064.png)

今回のLambda関数は、以下のようなパスに基づいて処理を分岐する構造になっています。
※サンプルのコードです。
```javascript
export const handler = async (event) => {
  console.log('Event:', JSON.stringify(event, null, 2));

  // パスとHTTPメソッドに基づいてレスポンスを作成
  let message = 'Hello from Lambda!';
  
  if (event.httpMethod === 'GET' && event.path.startsWith('/lambda1')) {
    message = 'Hello Lambda1';
  } else if (event.httpMethod === 'GET' && event.path.startsWith('/lambda2')) {
    message = 'Hello Lambda2';
  }

  const response = {
    statusCode: 200,
    body: JSON.stringify({ message }),
  };

  return response;
};
```

ブラウザのURLにAPIエンドポイントを打ち込むと「Hello from Lambda!」と表示されたので、Lambda関数とAPI Gatewayの連携はできたと思ったら...
URLに「APIエンドポイント/lambda1」と打ち込むと{"message":"Missing Authentication Token"}と表示されてしまい、パス分岐後の処理がうまく実行できていないことが判明。。。

# 解決策
API Gatewayのリソースにワイルドカード{proxy+}を作れば解決するようなのでやってみます。

新たにAPI Gatewayを作成します。
「APIを作成」を選択します。
![スクリーンショット 2024-10-27 6.24.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3892822/322ac664-66d6-93d5-86b9-acb8f4128844.png)

REST APIの構築を選択します。
![スクリーンショット 2024-10-27 6.25.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3892822/67153917-2baf-bc55-e0e3-c1fce6c49e75.png)

「新しいAPI」、任意のAPI名を入力、APIエンドタイプに「リージョン」を選択し、「APIを作成」をクリックします。
![スクリーンショット 2024-10-27 6.26.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3892822/61a2b93a-a0c6-9da6-e910-ffc0d7d0635c.png)

API Gatewayが作成されたので「リソースを作成」をクリックします。
![スクリーンショット 2024-10-27 6.28.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3892822/3360eda2-4501-5f83-a524-6413dfd97e2c.png)

リソース名に「{proxy+}」、CORSにチェックを入れて「リソースを作成」をクリックします。
![スクリーンショット 2024-10-27 6.29.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3892822/238a0911-8e98-010f-0417-038916481a91.png)

{proxy+}のリソースを選択し、「メソッドを作成」をクリックします。
![スクリーンショット 2024-10-27 6.29.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3892822/364a52a3-712d-5d1e-930e-14d81f667be1.png)

メソッドタイプを「ANY」、統合タイプを「Lambda Proxy」、Lambda関数に自分が作成したLambda関数を選択し、メソッドを作成をクリックします。
![スクリーンショット 2024-10-27 6.31.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3892822/cfac60aa-767a-d965-9e3d-c096f43880b2.png)

「APIをデプロイ」をクリックします。
![スクリーンショット 2024-10-27 6.38.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3892822/5c89ce3d-9c82-bc10-c4e9-626cb320f272.png)

「新しいステージ」を選択、任意のステージ名を入力し、「デプロイ」をクリックします。
![スクリーンショット 2024-10-27 6.38.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3892822/14f14983-7952-5258-27bb-b85a20686d8d.png)

これで新しいAPI GatewayができたのでURLに「APIエンドポイント/lambda1」と打ち込むと「Hello from Lambda1」と表示されるようになり解決しました。

ちなみに今回私が個人開発した「みんなのナビ」というマニュアルを共有するWEBアプリになります。
よければアクセスして、いろいろなフィードバックもらえると嬉しいです！
↓

https://manualshare.net