Vue2のaxiosでAWS Lambdaで作成したAPIを実行する方法

はじめに

VueのaxiosでAWS Lambdaで作成したAPIを実行してみました。

大まかな流れは以下のとおりです。

1. Lambda関数の作成

2. API Gatewayの設定

3. Pythonから叩く

4. CORSの設定

5. VueからAPIを叩く

では、やっていきましょう。

開発環境

• Windows 11
• Vue 2.7.14
• Node.js 14.17.5
• Python 3.11.0

実装

1．Lambda関数の作成

AWS Management Consoleにサインインして、Lambdaサービスを開きます。

「関数の作成」ボタンをクリックし、必要な情報を入力していきます。

今回は、t-tsuchiyama-helloworldという関数を作成しました。

t-tsuchiyama-helloworldのlambda_function.pyの中身は以下のとおりです。

1lambda_function.py2import json34def lambda_handler(event, context):5    return {6        'statusCode': 200,7        'body': json.dumps('Hello from Lambda!'),8    }

2．API Gatewayの設定

API Gatewayサービスを開き、「APIの作成」をクリックします。

APIタイプは「REST API」を選択し、「構築」をクリックします。

API名を入力し、「APIの作成」をクリックします。

私は、「t-tsuchiyama-helloworld」というAPIを作成しました。

作成したAPIのアクションから「リソースの作成」をクリックします。

リソース名を入力し、「リソースの作成」をクリックします。

私は「helloworld」にしました。

作成したリソースを選択した状態で、アクションから「メソッドの作成」をクリックします。

GETを選択し、チェックマークを入れます。

セットアップ画面のLambda関数で先ほど作成したt-tsuchiyama-helloworld関数を紐付けて「保存」ボタンをクリックします。

アクションから「APIのデプロイ」を選択し、デプロイされるステージ名を選択します。

URLは「ステージ」欄を選択すると確認することができます。

3．Pythonから叩く

以下のようなPythonファイルで作成したAPIを叩くことができます。

1test.py2import requests34url = "https://0pgmcvdcn8.execute-api.ap-northeast-1.amazonaws.com/api/helloworld"5response = requests.get(url)6print(response.status_code)7print(response.text)

実行すると、「Hello from Lambda!」が表示されます。

4．VueからAPIを叩く

次はVueからAPIを叩いてみましょう。

前回の記事に従ってVueアプリを作成し、「HelloWorld.vue」を以下のように書き換えます。

前回の記事は以下のとおりです。

1HelloWorld.vue

コードを実行すると以下のようなエラーが出ました。

このエラーを解決するためには、CORSの設定をする必要があります。

まずは、先ほど作成したt-tsuchiyama-helloworld関数と同じ手順でt-tsuchiyama-optionsという関数を作成します。

t-tsuchiyama-optionsのlambda_function.pyは以下の通りです。

1lambda_function.py2import json34def lambda_handler(event, context):5    return {6       'statusCode': 200,7       'body': '',8       'headers': {9            'Access-Control-Allow-Headers': '*',10            'Access-Control-Allow-Origin': '*',11            'Access-Control-Allow-Methods': '*'12        }13    }

API画面に戻り、アクションから「メソッドの作成」をクリックします。

OPTIONSを選択し、チェックマークを入れます。

セットアップ画面のLambda関数で先ほど作成したt-tsuchiyama-options関数を紐付けて「保存」ボタンをクリックします。

加えて、t-tsuchiyama-helloworldの中身にもheaderの中身を追加する必要があります。

追加後のt-tsuchiyama-helloworldのlambda_function.pyは以下のとおりです。

1lambda_function.py2import json34def lambda_handler(event, context):5    return {6        'statusCode': 200,7        'body': json.dumps('Hello from Lambda!'),8        'headers': {9            'Access-Control-Allow-Headers': '*',10            'Access-Control-Allow-Origin': '*',11            'Access-Control-Allow-Methods': '*'12        }13    }

追加して実行すると、「Hello from Lambda!」が表示され、無事にAPIを呼び出すことができました！

まとめ

初めてだったので少し手こずったところはありましたが、記事を見返すとこんなにも簡単にAPIを実行できることがわかりました。

今後、どんどんAPIを使って開発を行っていきます！