はじめに

APIGatewayの学習がてらチュートリアルやネット上の記事を見ているとlambdaを使わずお手軽にMockの機能を用いて、お手軽にSPAサイトを作れることが分かったので記事にしてみました。
フロントエンジニアの方はサクッとモックAPIを作ってフロント側に表示できて便利なので是非に。

利用するサービス、技術

APIGateway(REST API)
- MockのAPIを作成するために使います。
S3
- HTMLファイルをホスティングするために使います。(今回はCDNのVueを使っています。)
Cloudfront
- APIGatewayのMockとS3上のHTMLファイルをキャッシュするために使います。

APIGatewayにてモックのAPI作成

APIの選択、構築

AWSコンソール>APIGateway>RESTAPIにて「構築」を押し、以下添付の画像の画面へ

API名は個人の好きなものを記入し、「APIの作成」を押す。

リソース(パス)の作成

APIGatewayコンソール>API>先程作成した名前のAPIを選択し以下の画面へ遷移する。

この「リソース」と呼ばれるものは作成後、実際にアクセスするパスになります。
本記事で自分がやっているようなお試しではなく、今後バックエンドを本格的に作っていくのであれば実際にアクセスするであろうパス名にしておく良いかもしれません。

今回、自分はhelloという名前でリソースを作成しました。

メソッドの作成

上記までの工程を行うとサイドメニュー右横のリソースの欄に/hello(作成したリソース名)が表示されていると思います。こちらをクリックし選択した状態でリソース欄の「アクション」のドロップダウンメニューを押し、メソッドの作成を選びます。

するとリソース名(配下)に空欄のプルダウンが表示されるため、そこから作成するメソッドを選択します。(今回はGETを選択しました。)作成したメソッドを選択すると以下画面になるため、上記のように「Mock」を選択します。

リソース欄の作成したメソッド名/GET(メソッド名)をクリックし以下画像の画面に遷移します。
今回は「総合レスポンス」を編集するので選択し編集画面へ。

マッピングテンプレートにapplication/jsonを記入し、エディターに返したいJSONを記述します。

今回記述したJSON

{
    "user": "hoge",
    "message": "hello",
    "time_stamp": "Wed Aug 16 2023 15:46:13"
}

デプロイとテスト

上記までの工程を終えたら外部公開のためデプロイを行います。
作成したメソッド名/GET(メソッド名)を再度選択し、ドロップダウンから「APIのデプロイ」を押し、

ポップアップのデプロイされるステージを記入し、デプロイします。(ステージ名はアクセスするパスの一部になります。今回はdevとしました。)

実際にデプロイされているかcurlで確認しましょう。
urlはAPIGatewayコンソールサイドメニュー/ステージ/作成したメソッド名/GET(メソッド名)の順で遷移していくとたどり着きます。

curl  https://{ここは構築したAPIGWのユニークな文字列}.execute-api.ap-northeast-1.amazonaws.com/dev/hello
{
    "user": "hoge",
    "message": "hello",
    "time_stamp": "Wed Aug 16 2023 15:46:13"
}%

無事設定した値が返ってきました。

簡易的なフロントの作成

続いて作成したモックAPIを表示するフロントおよび、2つのリソースをキャッシュするCloudfrontを設定していきます。

HTMLファイル作成

以下のHTMLファイルを用意します。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>multi-origin-spa-test</title>
</head>

<body>
<div id="app">
  <ul>
    <li>
        名前: {{ user }}
    </li>
    <li>
        メッセージ: {{ message }}
    </li>
    <li>
        時刻: {{ timestamp }}
    </li>
  </ul>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
new Vue({
  el: '#app',
  data: {
    result: '',
    user: '名無し',
    message: '特になし',
    timestamp: 'Wed Aug 16 2023 15'
  },
  mounted: function(){
    const api = axios.create({
      baseURL: "https://{ここは構築したCFのユニークな文字列}.cloudfront.net/dev/", 
      headers: {
        'Content-Type': 'application/json'
      },
      responseType: 'json',
      timeout: 3000
    })

    api.get("hello")
    .then(response => {
      this.user = response.data.user;
      this.message = response.data.message;
      this.timestamp = response.data.time_stamp
    })
    .catch(err => {
      console.error(err)
    })
  }
})
</script>
</body>

</html>