【Nxut.js】axiosの初期設定を行う(baseURL・browserBaseURLを解説)

2020.06.23に公開

Udemy
5. RailsAPI×Nuxt.js初めてのAPI通信
No.2 / 3

今回達成すること

API通信をするaxios（アクシオス）モジュールの設定を行い、
Nuxt.jsのトップページにAPIリクエストを送るボタンを設置します。

完走するとhttp://localhost:8080に、このようなボタンが表示されます。

2020-06-23 11-16-10

※ この記事ではNuxt.js（frontディレクトリ内）のファイルを編集します。

axiosのインストールを確認する

手順通りに進んできた方はpackage.jsonに@nuxtjs/axiosモジュールがインストールされていると思います。

front/package.json

...
"dependencies": {
  "nuxt": "^2.0.0",
  "@nuxtjs/axios": "^5.3.6"
},

もし見当たらない方は改めてインストールを完了しておいてください。

root $ docker-compose run --rm front yarn add @nuxtjs/axios

それでは作業に入りましょう！

axiosの共通設定ファイルを作成する

「front/plugins」直下にaxiosの共通設定ファイルとなるaxios.jsを作成します。

下記コマンドを実行して作成しましょう。

root $ touch front/plugins/axios.js

axios.jsにログを仕込む

続いてaxios.jsを編集します。

開発中はAPI通信を見える化した方がエラーを解決しやすくなります。

また、どう言った設定になっているかも見ることができるので理解も早くなります。

axiosの全ての動作にログを取るように設定しましょう。

front/plugins/axios.js

export default ({ $axios }) => {
 // リクエストログ
 $axios.onRequest((config) => {
   console.log(config)
 })
 // レスポンスログ
 $axios.onResponse((config) => {
   console.log(config)
 })
 // エラーログ
 $axios.onError((e) => {
   console.log(e.response)
 })
}

onRequest ... リクエスト時に行いたい処理を記述します。
onResponse ... レスポンス時に行いたい処理を記述します。
onError ... エラー時に行いたい処理を記述します。

axios.jsのonErrorについて

ちょっと一息。豆知識。

axiosの処理を記述する際のお作法としてthenとcatchが使われます。

then ... APIリクエストが成功した時の処理。
catch ... 失敗した時の処理。

記述例

this.$axios.get('https://api.coindesk.com/v1/bpi/currentprice.json')
  .then(response => (this.info = response.data.bpi))
  .catch(error => console.log(error))

このthenの処理は場面によって変化しますが、catch内の処理はconsole.logを仕込むくらいで大きな変化はありません。

そこでaxios.jsに共通処理として記述することで、catchを省略して書くことができます。

onError処理を書いた場合

this.$axios.get('https://api.coindesk.com/v1/bpi/currentprice.json')
  .then(response => (this.info = response.data.bpi))

特別な処理をしたい時だけcatchを記述すればその処理が優先されます。

onErrorに限らず、axiosの共通化できる処理はaxios.jsに書いて、スッキリとしたコードを目指しましょう。

（ちょっと一息おわり。）

nuxt.config.jsにプラグインファイルを登録する

先ほど作成したaxios.jsをNuxt.jsが読み込むよう設定を行います。

nuxt.config.jsを開きましょう。

front/nuxt.config.js（30行目前後）

...
plugins: [
  'plugins/axios' // 追加
],

pluginsプロパティ ... ファイルパスを記述します。

ここに登録したファイルは、Nuxt.jsが初期化される前に読み込まれます。

SPAモードではあまり使いませんが、読み込むタイミングを変更したい場合はこのように書きます。

plugins: [
  { src: '~/plugins/client-only.js', mode: 'client' },  // クライアント側でのみ読み込む
  { src: '~/plugins/server-only.js', mode: 'server' }   // サーバー側でのみ読み込む
]

参考 API: plugins プロパティ - Nuxt.js

以上でaxiosの設定を終わります。

Railsにリクエストを送るボタンを設置する

最後はAPIリクエストを実行するボタンを設置しましょう。

index.vueに移動して、内容をまるっと書き換えます。

front/pages/index.vue

<template>
  <div>
    <button
      type="button"
      name="button"
      @click="getMsg"
    >
      RailsからAPIを取得する
    </button>
    <div
      v-for="(msg, i) in msgs"
      :key="i"
    >
      {{ msg }}
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msgs: []
    }
  },
  methods: {
    getMsg () {
      this.$axios.$get('/api/v1/hello')
        .then(res => this.msgs.push(res))
    }
  }
}
</script>

@click="getMsg" ... ボタンがクリックされるとgetMsg()のメソッドが呼ばれます。
getMsg () ... このメソッド内でaxiosを使ってAPI通信を行います。

今回は"Hello"という文字列を取得するだけなので、$get(リクエスト先パス)を使用します。
.then(res => this.msgs.push(res)) ... 通信が成功した時の処理です。

msgsという配列にRailsから返ってきた"Hello"を追加しています。

Logoコンポーネントを削除する

当初使用されていたLogo.vueというコンポーネントファイルがあります。

root $ ls front/components

Logo.vue  # ←これ
README.md

これはVueのロゴを表示していたコンポーネントで、今後使用することはありません。

削除しときましょう。

root $ cd front && git rm components/Logo.vue && cd ..

cd front ... Logo.vueは「front」ディレクトリ内のGit管理なので、一度移動してgit rmコマンドを唱えます。

削除の確認しておきましょう。

root $ ls front/components

README.md

OK。削除できました。

ブラウザから変更を確認する

コンテナを立ち上げてindex.vueの変更を確認してみましょう。

root $ docker-compose up

ブラウザからhttp://localhost:8080/にアクセスします。

ボタンが表示されました！

2020-06-23 11-16-10

ここまでの確認が取れたらコンテナを削除します。

root $ 「control」+「C」

# docker-compose downでもOK
root $ docker-compose rm -f

# 確認しとく
root $ docker-compose ps -a

まとめ

今回は、axiosの設定を行いhttp://localhost:8080/にAPIを取得するボタンを設置しました。

ただ今のままではRailsから"Hello"を取得することはできません。

ブラウザの同一オリジンポリシーにより、通信が拒否されているからです。

次回予告

次回はこの同一オリジンポリシーやCORSについて理解します。

あとはRails側にCORS設定を行い、Helloを取得するアプリケーションを完成させましょう！

えいやっ!!

（この記事を書いている時に筆者がずっと勘違いしていたことがありました！すません。それはaxiosのbaseURLについて。↓どうぞお読みください。）

【コラム】私はaxiosにbaseURLを登録しない

曲のタイトルみたいになりましたが、また一つ学びがあったので共有します。

Nuxt.jsをフロントエンドとしてAPI通信を行う場合、nuxt.config.js内のaxiosプロパティにbaseURLを登録することがあると思います。

nuxt.config.js

axios: {
  baseURL: process.env.API_URL
},

厳密にいうと、クライアト（ブラウザ）からリクエストするAPIのURLを指定するプロパティはbrowserBaseURLです。

baseURL ... サーバ側からのリクエストに使うAPI URLを指定
browserBaseURL ... クライアト側からのリクエストに使うAPI URLを指定

ただこのbrowserBaseURL。

デフォルト値はbaseURLです。

つまり、baseURLを指定すれば双方のURLを設定できるので、browserBaseURLを指定しなくても良いのです。

次はbaseURLのお話。

baseURLのデフォルト値はhttp://localhost:3000。

RailsのURLがhttp://localhost:3000だった場合はbaseURLを設定しなくてもRailsにリクエストを飛ばしてくれます。

ただこれは開発環境のみで通用すること。

本番環境の運用も見据え、baseURLは設定しておきましょう。

ん?baseURLは設定しないんじゃないの?

そうです。原則は設定します。

が、環境変数API_URLを使えば設定しなくても良いのです。

このbaseURLは環境変数API_URLに上書きされます。

つまり、API_URLという名前の環境変数を設定すれば、baseURLすら記述しなくて良いのです。

気をつけて欲しいのが上書きされるということ。

nuxt.config.js内でいくらbaseURLを設定しようとも、環境変数API_URLが優先されます。

# 環境変数
API_URL=http://localhost:3000

# nuxt.config.js
axios: {
  baseURL: 'http://localhost:8080'
}

# 結果
axios.defaults.baseURL => http://localhost:3000

コラムまとめ

クライアント側からのリクエストにはbrowserBaseURLのURLが使われる
browserBaseURLのデフォルト値はbaseURL
baseURLのデフォルト値はhttp://localhost:3000
環境変数API_URLが存在する場合、baseURLは上書きされる

（コラムおわり）

参考 Axios Module

← Prev

5. RailsAPI×Nuxt.js初めてのAPI通信

1. 【Rails6】"Hello" jsonを返すコントローラを作成する

5. RailsAPI×Nuxt.js初めてのAPI通信

3. 【Rails6】Gem rack-corsを導入してCORS設定を行う(オリジン・CORSとは何か)

あなたの力になれること

私自身が独学でプログラミングを勉強してきたので、一人で学び続ける苦しみは痛いほど分かります。そこで、当時の私がこんなのあったら良いのにな、と思っていたサービスを立ち上げました。周りに質問できる人がいない、答えの調べ方が分からない、ここを聞きたいだけなのにスクールは高額すぎる。そんな方に向けた単発・短期間メンターサービスを行っています。

独学プログラマのサービス

「独学プログラマ」の内容についてSlackで質問できますよ 0円/ALL FREE

【ココナラ】Rails、Nuxt.js周りの短期間・短時間メンターになります 5,500円/1h

Udemyの投稿