今回達成すること

NuxtからNetlifyFunctionsに通信するために、axiosモジュールのセットアップを行います。

axiosのグローバル設定ファイルを作成する

「plugins」ディレクトリにaxios.tsを作成します。

このaxios.tsは、axiosモジュールのグローバルな設定を行うファイルとなります。

% touch plugins/axios.ts

通信ログを出力する

作成したプラグインファイルには、axiosのリクエスト時、レスポンス時、エラー時にログを出力するよう設定します。

plugins/axios.ts

import { Context } from '@nuxt/types'

export default ({ $axios, isDev }: Context) => {
  // リクエストログ
  $axios.onRequest((config) => {
    if (isDev) {
      console.log('onRequest:', config)
    }
  })

  // レスポンスログ
  $axios.onResponse((config) => {
    if (isDev) {
      console.log('onResponse:', config)
    }
  })

  // エラーログ
  $axios.onError((e) => {
    console.log('onError:', e)
  })
}

• isDev ... 開発環境の場合にtrueを返す。
• onRequest ... リクエスト時に行いたいグローバル処理を記述する。
• onResponse ... レスポンス時に行いたいグローバル処理を記述する。
• onError ... エラー時に行いたいグローバル処理を記述する。

Nuxtにプラグインを登録する

作成したプラグインファイルを読み込ませましょう。

my-plugin.tsでもaxiosを使用する可能性があるので、'~/plugins/my-plugin'の前に追加します。

nuxt.config.js

export default {
  ...
  plugins: [
    '~/plugins/vuetify',
    // my-pluginの前に追加
    '~/plugins/axios',
    '~/plugins/my-plugin'
  ],
}

axiosのbaseURLを登録する

axiosのデフォルトのリクエスト先、baseURLを追加します。

nuxt.config.js

export default {
  ...
  axios: {
    /*
      production
        環境変数にAPI_URLが存在する場合、baseURLが上書きされる
        axiosのbaseURLはビルド時にセットされるため.envもしくはnetlify.tomlの[build.environment]で環境変数を用意する
    */
    baseURL: 'http://localhost:8888'
  },
}

注意）最終文字に/を付けないでください。

axiosのbaseURLの挙動

• 環境変数にAPI_URLがある場合は、baseURLの値が上書きされます。
• この挙動を生かし、本番環境ではAPI_URLの環境変数に、リクエスト先URLをセットします。
• baseURLはビルド時にセットされます。
• つまり、generateコマンド時にアクセスできるAPI_URLを用意する必要があります。

本番環境用のbaseURLを登録する

本番環境用のaxiosのリクエスト先を用意します。

netlify.tomlの[build.environment]に、新たにAPI_URLを追加します。

netlify.toml

# Doc: https://docs.netlify.com/configure-builds/file-based-configuration/
# ビルド設定
[build]
  # 公開ディレクトリ
  publish = "dist"
  # 実行コマンド(target: 'static')
  command = "yarn generate"

# 追加
# ビルド時の環境変数
[build.environment]
  # axisoのbaseURL
  API_URL = "https://demo-blog-v2.netlify.app"

• build.environment ... ビルド中にアクセスできる環境変数を用意する場所。

  参考: Build environment variables | Netlify Docs

これでaxiosのセットアップは完了です。

Functionsプロジェクトを作成する

入力フォームのバリデーションを行うFunctionsプロジェクトを作成します。

% yarn functions:create form-validator

# TypeScriptを選択
#  [hello-world] Basicを選択

✔ Installed dependencies for form-validator
✨  Done in 32.56s.

「netlify/functions」ディレクトリに、form-validator.tsが作成できました。

netlify/functions
└── form-validator
    └── form-validator.ts

TypeScriptのエラーを回避するために、仮編集を行います。

netlify/functions/form-validator/form-validator.ts

import { Handler, HandlerEvent, HandlerContext } from '@netlify/functions'

/* eslint require-await: 'off' */
// eslint Doc: https://eslint.org/docs/user-guide/configuring/rules
export const handler: Handler = async (_event: HandlerEvent, _context: HandlerContext) => {
  const name: string = 'World'

  return {
    statusCode: 200,
    body: JSON.stringify({
      message: `Hello, ${name}!`
    })
  }
}

• eslint require-await: 'off' ... asyncをつけた関数にawaitを強制するESLintのルールをoffにしている。特定のファイルだけルールを変更したい場合は/*eslint */の後にルールを追加する。

  参考: Rules - ESLint

Functionsにリクエストを行うメソッドを作成する

NuxtからFunctionsにリクエストを行う準備をします。

index.vueに、クリックするとAPIリクエストを行うボタンを設置します。

pages/index.vue

<template>
  <div>
    <v-container>
      <v-btn
        @click="requestFunctions"
      >
        Request Functions
      </v-btn>
      ...
</template>
<script lang="ts">
...
@Component
export default class IndexPage extends Vue {
  ...
  // 追加
  async requestFunctions (): Promise<void> {
    await this.$axios.$get(
      '/.netlify/functions/form-validator'
    )
      .then((response: { message: string }) => {
        console.log(response)
      })
  }
}
</script>

• Promise<void> ... async, awaitを使用する場合は、返す値をPromise<返却値>で宣言する。

これでNuxt×Fucntionsの通信準備は完了です。

% git add -A
% git commit -m "Add axios plugins faile"

まとめと次回

今回は、axiosモジュールのセットアップを行い、NuxtからFunctionsへリクエストを投げる準備を行いました。

現状、Nuxtに作成したボタンをクリックしてもFunctionsにリクエストが行えません。

これはCORS設定を行なっていないためです。

次回は、CORSとプリフライトリクエストを理解し、Functionsに通信できるように設定します。