これまで
前回の記事でChatGPTと対話しながらフロントエンドとバックエンドの土台となるコードを作成しました。今回は、AWSにサーバーレスの環境を構築していきます。
[前回の記事]
やること
Route53でドメイン取得
↓
Cloudfrontで配信
↓
S3でフロントエンドをホスティング
↓
APIGatewayを介してLambda関数を実行
↓
DyanmoDBでデータ管理
Route53/CloudFront/S3の構築
以下の記事を見ながら環境を構築しました。
記事通り、進めて特に問題なく完了。
Lambda関数/API Gatewayの構築
まずは、Lambda関数を作成していきます。
AWSのLambda関数へ行き「関数の作成」をクリックします。
任意の関数名を入力、ランタイムに「Node.js 18.x」を選択し、「関数の作成」をクリックします。
これでLambda関数の作成は完了しました。
次にAPI Gatewayを作成し、Lambda関数と連携していきます。
先ほど作成したLambda関数へいくと、以下の画面になっているので「トリガーを追加」を選択します。
「API Gateway」「新規APIを作成」「REST API」を選択し、「追加」クリックします。
Lamada関数の「設定」にAPIエンドポイントが作成され、Lambda関数とAPI Gatewayの連携ができました。
今回のLambda関数は、以下のようなパスに基づいて処理を分岐する構造になっています。
※サンプルのコードです。
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を作成」を選択します。
REST APIの構築を選択します。
「新しいAPI」、任意のAPI名を入力、APIエンドタイプに「リージョン」を選択し、「APIを作成」をクリックします。
API Gatewayが作成されたので「リソースを作成」をクリックします。
リソース名に「{proxy+}」、CORSにチェックを入れて「リソースを作成」をクリックします。
{proxy+}のリソースを選択し、「メソッドを作成」をクリックします。
メソッドタイプを「ANY」、統合タイプを「Lambda Proxy」、Lambda関数に自分が作成したLambda関数を選択し、メソッドを作成をクリックします。
「APIをデプロイ」をクリックします。
「新しいステージ」を選択、任意のステージ名を入力し、「デプロイ」をクリックします。
これで新しいAPI GatewayができたのでURLに「APIエンドポイント/lambda1」と打ち込むと「Hello from Lambda1」と表示されるようになり解決しました。
ちなみに今回私が個人開発した「みんなのナビ」というマニュアルを共有するWEBアプリになります。
よければアクセスして、いろいろなフィードバックもらえると嬉しいです！
↓