Nuxt.js × axiosセットアップ Netlify Functionsにリクエストを行う準備をしよう
  • 2022.02.17に公開
  • ブログ構築TS
  • 8. NetlifyFunctionsを使った検索機能
  • No.3 / 9

今回達成すること

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"

これで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に通信できるように設定します。

あなたの力になれること
私自身が独学でプログラミングを勉強してきたので、一人で学び続ける苦しみは痛いほど分かります。そこで、当時の私がこんなのあったら良いのにな、と思っていたサービスを立ち上げました。周りに質問できる人がいない、答えの調べ方が分からない、ここを聞きたいだけなのにスクールは高額すぎる。そんな方に向けた単発・短期間メンターサービスを行っています。
独学プログラマのサービス
ブログ構築TSの投稿
1
  • Nuxt.js×TypeScript開発環境構築
  • /
  • #01
Nuxt.jsをローカルPCに立ち上げよう
2
  • Nuxt.js×TypeScript開発環境構築
  • /
  • #02
Nuxt.jsプロジェクトをGitHubにPushしよう
3
  • Nuxt.js×TypeScript開発環境構築
  • /
  • #03
nuxt-property-decoratorのインストールとTypeScriptのセットアップ
1
  • Vuetifyセットアップ
  • /
  • #01
TypeScript環境のNuxt.jsにVuetifyを導入しよう
2
  • Vuetifyセットアップ
  • /
  • #02
VuetifyにカスタムCSSを追加してSASS変数を理解しよう
3
  • Vuetifyセットアップ
  • /
  • #03
VuetifyにカスタムSVGアイコンを追加しよう
1
  • NetlifyCLIを使ったNuxtデプロイ
  • /
  • #01
Netlify CLIをインストールして本番環境のサイトを作成しよう
2
  • NetlifyCLIを使ったNuxtデプロイ
  • /
  • #02
netlify.tomlを使ってNuxt.jsをNetlifyに手動デプロイしよう
1
  • Contentfulモデル構築
  • /
  • #01
Contentfulの料金とCommunityプランの無料枠を理解する
2
  • Contentfulモデル構築
  • /
  • #02
Contentfulへ新規会員登録、ロケールの変更、API Keyの発行を行う
3
  • Contentfulモデル構築
  • /
  • #03
Contentful ブログカテゴリーモデルを作成しよう
4
  • Contentfulモデル構築
  • /
  • #04
Contentful カテゴリーモデルに1対1で関連づくblogPostモデルを作成しよう
5
  • Contentfulモデル構築
  • /
  • #05
Contentful ブログ記事に1対多で関連づくplogTagモデルを作成しよう
6
  • Contentfulモデル構築
  • /
  • #06
Contentful カテゴリー・ブログ記事・タグコンテンツを作成しよう
1
  • Nuxt.js×Contentfulセットアップ
  • /
  • #01
Nuxt.js×Contentfulセットアップ。モジュールのインストールからAPI Keyの登録まで
2
  • Nuxt.js×Contentfulセットアップ
  • /
  • #02
Contentful APIリクエストの実行 Nuxt.jsにブログコンテンツを表示しよう
3
  • Nuxt.js×Contentfulセットアップ
  • /
  • #03
ContentfulAPIをNetlifyにデプロイしよう【Nuxt FullStaticのasyncDataとfetch】
1
  • Vuex×TypeScriptセットアップ
  • /
  • #01
Vuexの型付け vuex-module-decoratorsとnuxt-typed-vuexどちらを使用するか
2
  • Vuex×TypeScriptセットアップ
  • /
  • #02
nuxt-typed-vuexのインストールとセットアップ。Vuexの型定義と呼び出し方
3
  • Vuex×TypeScriptセットアップ
  • /
  • #03
VuexにContentfulの型定義ファイルとnuxtServerInitを追加しよう
4
  • Vuex×TypeScriptセットアップ
  • /
  • #04
VuexにContentfulAPIレスポンスを保存してVueファイルに表示しよう
1
  • コンテンツページ構築
  • /
  • #01
ブログアプリのページ設計とNuxt.jsの動的ルーティングについて理解しよう
2
  • コンテンツページ構築
  • /
  • #02
カテゴリーのコンテンツページを作成しよう【Nuxt.js×Contentful】
3
  • コンテンツページ構築
  • /
  • #03
カテゴリーに関連付くブログ記事一覧を表示しよう【Nuxt.js×Contentful】
4
  • コンテンツページ構築
  • /
  • #04
injectを使用して共通エラー処理メソッドを作成しよう【Nuxt×TypeScript】
5
  • コンテンツページ構築
  • /
  • #05
NuxtChildを使用してブログ記事ページを作成しよう【Nuxt.js×TypeScript】
6
  • コンテンツページ構築
  • /
  • #06
タグ一覧ページとタグ関連づく記事一覧を表示しよう【Nuxt.js×TypeScript】
7
  • コンテンツページ構築
  • /
  • #07
プライバシーポリシーページを作成しよう【Nuxt.js×TypeScript】
8
  • コンテンツページ構築
  • /
  • #08
@nuxtjs/i18nのインストールとセットアップ。ページタイトルの翻訳化【TypeScript】
1
  • NetlifyFunctionsを使った検索機能
  • /
  • #01
Netlify Functionsを使ってクエリを返す関数を作成しよう【Nuxt.js×TypeScript】
2
  • NetlifyFunctionsを使った検索機能
  • /
  • #02
Netlify Functionsプロジェクトをデプロイしよう【Nuxt.js×TypeScript】
3
  • NetlifyFunctionsを使った検索機能
  • /
  • #03
Nuxt.js × axiosセットアップ Netlify Functionsにリクエストを行う準備をしよう
4
  • NetlifyFunctionsを使った検索機能
  • /
  • #04
オリジン•CORS•プリフライトリクエストを理解する【Nuxt.js×Netlify Functions】
5
  • NetlifyFunctionsを使った検索機能
  • /
  • #05
Netlify Functionsを使ってフォームバリデーション機能を構築しよう【Nuxt.js】
6
  • NetlifyFunctionsを使った検索機能
  • /
  • #06
ツールバーに表示する検索フォームを作成しよう【Nuxt.js×TypeScript】
7
  • NetlifyFunctionsを使った検索機能
  • /
  • #07
検索ページを作成しよう【Vue propsとTypeScriptの書き方 解説】
8
  • NetlifyFunctionsを使った検索機能
  • /
  • #08
Netlify FunctionsからContentfulAPIリクエストを送ろう【Nuxt.js】
9
  • NetlifyFunctionsを使った検索機能
  • /
  • #09
検索ページに「もっと見る」ボタンを実装しよう【Nuxt.js×TypeScript】
1
  • ブログMarkdown対応
  • /
  • #01
@nuxtjs/markdownitのインストールとセットアップ【Nuxt.js×TypeScript】
2
  • ブログMarkdown対応
  • /
  • #02
Nuxt.js×markdown-it 外部リンクを別タブで開くプラグインを追加しよう
3
  • ブログMarkdown対応
  • /
  • #03
Nuxt.js×markdown-it 内部リンクをVueRouterで高速にページ遷移しよう
4
  • ブログMarkdown対応
  • /
  • #04
Nuxt.js×markdown-it アンカーリンクとブログ目次を自動生成しよう
独学プログラマ
独学でも、ここまでできるってよ。
CONTACT
Nuxt.js制作のご依頼は下記メールアドレスまでお送りください。