Udemy 5. RailsAPI×Nuxt.js初めてのAPI通信 #02
2020年06月23日に公開

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

今回達成すること

  • 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の処理を記述する際のお作法としてthencatchが使われます。

  • 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

あなたの力になれること
私自身が独学でプログラミングを勉強してきたので、一人で学び続ける苦しみは痛いほど分かります。そこで、当時の私がこんなのあったら良いのにな、と思っていたサービスを立ち上げました。周りに質問できる人がいない、答えの調べ方が分からない、ここを聞きたいだけなのにスクールは高額すぎる...。そんな方に向けた単発・短期間メンターサービスを行っています。下のサービスへお進みください。
独学プログラマのサービス
次の記事はこちら
1. このカテゴリーの歩き方 #01
【お知らせ】UdemyでRails × Nuxt.jsの動画を公開することになりました
1. このカテゴリーの歩き方 #02
【随時更新】このカテゴリーで作るアプリケーションの仕様書
1. このカテゴリーの歩き方 #03
【随時更新】このカテゴリーの歩き方
1. このカテゴリーの歩き方 #04
(Docker+Rails6+Nuxt.js+PostgreSQL)=>Heroku 環境構築~デプロイまでの手順書
2. Docker入門 #01
Docker for Macをインストールする手順
2. Docker入門 #02
分かるDocker解説。仮想環境・コンテナ・Dockerイメージ・Dockerfileとは何か?
2. Docker入門 #03
分かるDocker解説。DockerComposeとは何か?
3. Dockerを使ったRails+Nuxt.js環境構築 #01
【Docker+Rails6+Nuxt.js】今回作成するアプリの開発環境の全体像を知ろう
3. Dockerを使ったRails+Nuxt.js環境構築 #02
【MacOS】Homebrew経由でGitをインストールする方法
3. Dockerを使ったRails+Nuxt.js環境構築 #03
Rails6を動かすAlpineベースのDockerfileを作成する(AlpineLinuxとは何か)
3. Dockerを使ったRails+Nuxt.js環境構築 #04
Nuxt.jsを動かすAlpineベースのDockerfileを作成する(C.UTF-8とは何か)
3. Dockerを使ったRails+Nuxt.js環境構築 #05
.envファイルを使ったdocker-compose.ymlの環境変数設計
3. Dockerを使ったRails+Nuxt.js環境構築 #06
Rails6・Nuxt.js・PostgreSQLを動かすdocker-compose.ymlファイルを作成する
3. Dockerを使ったRails+Nuxt.js環境構築 #07
docker-compose.ymlを使ってRails6を構築する(PostgreSQLパスワード変更方法)
3. Dockerを使ったRails+Nuxt.js環境構築 #08
docker-compose.ymlを使ってNuxt.jsを構築する
4. 複数プロジェクトのGit管理 #01
複数プロジェクトで行うGit管理の全体像を理解しよう(Gitサブモジュール解説)
4. 複数プロジェクトのGit管理 #02
【Git】既存の子ディレクトリをサブモジュール管理に変更する手順
4. 複数プロジェクトのGit管理 #03
【GitHub】秘密鍵の生成・公開鍵を追加・SSH接続するまでを画像で分かりやすく
4. 複数プロジェクトのGit管理 #04
【GitHub】リモートリポジトリの追加・サブモジュールのリンク設定を行う
5. RailsAPI×Nuxt.js初めてのAPI通信 #01
【Rails6】"Hello" jsonを返すコントローラを作成する
5. RailsAPI×Nuxt.js初めてのAPI通信 #02
【Nxut.js】axiosの初期設定を行う(baseURL・browserBaseURLを解説)
5. RailsAPI×Nuxt.js初めてのAPI通信 #03
【Rails6】Gem rack-corsを導入してCORS設定を行う(オリジン・CORSとは何か)
6. Heroku.ymlを使ったDockerデプロイ #01
最初の一歩。Herokuへ新規会員登録を行いHerokuCLIをインストールする
6. Heroku.ymlを使ったDockerデプロイ #02
heroku.yml解説編。Docker環境のRails6をHerokuにデプロイする(1/2)
6. Heroku.ymlを使ったDockerデプロイ #03
HerokuCLI-manifestのデプロイ解説編。Docker環境のRails6をHerokuにデプロイする(2/2)
6. Heroku.ymlを使ったDockerデプロイ #04
Dockerfile解説編。Docker環境のNuxt.jsをHerokuにデプロイする(1/2)
6. Heroku.ymlを使ったDockerデプロイ #05
デプロイ完結編。Docker環境のNuxt.jsをHerokuにデプロイする(2/2)
7. モデル開発事前準備 #01
【Rails6】application.rbの初期設定(タイムゾーン・I18n・Zeitwerk)
新着
SPA開発
ブログ構築
小ネタ集