Zenn
🏃

Vue.js（CloudFront+S3）から FastAPI（API Gateway+Lambda）にリクエストを送るための設定手順

2023/09/26に公開
AWS
Vue.js
FastAPI
CORS
tech

ゴール

CloudFront + S3 で稼働している Vue.js から API Gateway + Lambda で稼働している FastAPI にリクエストできるようにする

前提

手順

1.CloudFront に Origin を追加する


CloudFrontの対象のディストリビューションから「オリジン」タブを開き、「オリジンを作成」をクリックしてください。


オリジンドメインにリクエストしたい API Gateway を選択して、「オリジンを作成」をクリックしてください。

2.CloudFront にビヘイビア( Behavior )を追加する


CloudFrontの対象のディストリビューションから「ビヘイビア」タブを開きビヘイビア」をクリックしてください。



※1 /api/*」のリクエストは API Gateway へ
※2 先ほど作成したオリジンを指定
※3 API Gateway にリクエストするHTTPメソッドを選択
※4 キャッシュポリシーをキャプチャと同じにする

3.API Gateway のステージを変更する

「2.CloudFront にビヘイビア( Behavior )を追加するで/api/\*の場合は API Gateway にリクエストされるように設定したので、API Gateway 側でもステージ　api　を作成する。

4.Vue.js を改修する

普通にaxios.get('https://< API Gateway の URL >', ...)のようにリクエストすると CORS エラーが発生するので、 Proxy を利用してりクエストします。詳しい解説は APPENDIX を参照してください。

(旧)vite.config.tsの修正

こちらは不要でした。

vite.config.ts
import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  // プロキシを利用する
  server: {
    proxy: {
      // パスに /api/ があったら、API Gateway にリクエストします
      '/api/': {
        target: 'https://< API Gateway の URL >',
        changeOrigin: true,
      }
    },
  },
})

プロキシを設定したら、axios を利用して API にリクエストします。

利用例
axios
    .get(
        '/api/health/check',
        {
          headers: {
            'Content-Type': 'application/json;charset=utf-8'
          }
        }
    )
    .then((response) => {
      console.log(response.data);
    })
    .catch((error) => {
      console.log(error)
    })
    .finally(() => {})

APPENDIX

Discussion