今回達成すること
今回は、Nuxtへapi通信のセットアップを行い、実際にRailsのjsonデータを取得するところまでを行っていきます。
- NuxtのURLの変更
- 静的ファイルの出力先の変更
- プロキシの設定
- Rails apiコントローラーの作成
- Nuxtのトップページにapiを取得するボタンの設置
これにより、ブラウザ上のボタンを押すとRailsが吐き出した「Hello」の文字列を表示することができます。
完成イメージ
この記事の読み方
この記事ではRailsとNuxtに対するコマンドを以下のように分けます。
- Railsプロジェクトに対するコマンド
myapp$ コマンド
- Nuxtプロジェクトに対するコマンド
frontend$ コマンド
ターミナルは2画面開いておいてください。
ターミナル上で「command」+「T」を押すと新規ターミナルが開きます。
【Nuxt】起動するURLを変更する
今のままでは、RailsもNuxtも"http://localhost:3000/"で起動し競合するため、Nuxtの起動するURLを変更します。
frontendディレクトリの
frontend/package.json
...
script {
"dev": "HOST=0.0.0.0 PORT=3333 nuxt",
...
確認のためNuxtを起動してみましょう。
frontend$ yarn dev
"http://localhost:3333/"にアクセスするとNuxtが元気に動いていますね。
OK!そしたら次へGO!
【Nuxt】静的ファイルの出力先を変更する
続いてNuxtのファイル出力先の変更を行います。
frontendディレクトリの
frontend/nuxt.config.js
export default {
...
}, // カンマを忘れない
// 追記
generate: {
dir: '../public'
}
}
Nuxtは通常、Nuxtプロジェクト内のdistディレクトリに静的ファイルを吐き出します。
この初期設定を、「Railsプロジェクトのpublicディレクトリに吐き出してね」と変更するコードになります。
それではターミナルでgenerateコマンドを実行してみてください。
frontend$ yarn generate
RailsのpublicディレクトリにNuxtから静的ファイル群が吐き出されます。
確認が取れたらRailsを起動しましょう。
myapp$ rails s
"http://localhost:3000/"にアクセスしたら、Nuxtの初期画面が表示されていますね。
この画面はNuxtが表示しているのではなく、Railsが表示しています。
「Control」+「C」でRailsサーバーを停止して、よし!次に進みましょう。
【Nuxt】プロキシの設定を行う
プロキシとは、高速なアクセスや安全な通信などを確保するための中継サーバのことです。(ざっくり)
なぜ、プロキシの設定を行うのか?
フロントのNuxtからバックエンドのRailsへapi通信を行うとき、URLが違うとブラウザ上でエラーを引き起こします。
これが、クロスドメイン通信を拒否するCORSエラーです。
CORSについてはこの記事がわかりやすいですよ。
今回のプロジェクト設計は本番環境は同じURLでapi通信を行うので問題ありませんが、開発環境では
- "http://localhost:3333/" のNuxtから
- "http://localhost:3000/" のRailsへ
api通信を行うためCORSエラーを引き起こします。
Nuxtでは、プロキシの設定をすることでこのCORSエラーを回避することができます。
@nuxtjs/proxyモジュールのインストールとセットアップ
Nuxtにproxyモジュールをインストールします。
frontend$ yarn add @nuxtjs/proxy
proxyモジュールのセットアップを行います。
frontend/nuxt.config.js
const config = { // export defaultから書き換える
...
modules: [
'@nuxtjs/axios',
'@nuxtjs/proxy' // 追記
],
...
}
// 追記
if (process.env.NODE_ENV === 'development') {
config.proxy = { '/api': 'http://localhost:3000' }
}
// 追記
export default config
-
if (process.env.NODE_ENV === 'development')process.env.NODE_ENVには、開発環境の場合'development'、本番環境の場合'production'という文字列が入っています。
もし、開発環境の場合はプロキシ(代理サーバ)を立ててapi通信を行ってね。という設定になります。
【Rails】apiデータを用意しよう
RailsにNuxtのリクエストに応えるapiデータを用意しましょう。
helloコントローラーを作成します。
myapp$ rails g controller api::v1::hello --skip-test-framewor
-
api::v1::helloapiディレクトリの中のv1ディレクトリの中にhelloコントローラーを作成して。というコマンドです。
ディレクトリがなければ勝手に作成してくれます。
-
--skip-test-frameworテストするファイルは作らなくていいよ。というコマンドオプションです。
app/controllers/api/v1/hello_controller.rb
class Api::V1::HelloController < ApplicationController
def index
render json: {
msg: "Hello!!!!!"
}
end
end
続いてパスの設定です。
config/routes.rb
Rails.application.routes.draw do
namespace :api do
namespace :v1 do
resources :hello, only:[:index]
end
end
end
確認をとりましょう。
Railsを起動して"http://localhost:3000/api/v1/hello"にアクセスしてください。
myapp$ rails s
ブラウザでjsonデータの確認が取れたら無事成功です。
{"msg":"Hello!!!!!"}
【Nuxt】Railsにapiデータをリクエストしよう
いよいよ大詰めです。
NuxtからRailsへapiデータをリクエストして、ブラウザに表示させましょう。
Nuxtのトップページを編集します。
frontend/pages/index.vue
<template>
<div>
<button
@click="getMsg"
>
Hello
</button>
{{ msg }}
</div>
</template>
<script>
export default {
data: () => ({
msg: ''
}),
methods: {
getMsg () {
this.$axios.$get('/api/v1/hello').then(res => (this.msg = res.msg))
}
}
}
</script>
(補足) fixable with the --fix optionエラーで困ったら
書き方が悪いよ、というEslintのエラーです。
Nuxt上で下記のコマンドを打つと可能な限り自動補正してくれます。
frontend$ yarn run lint --fix
ブラウザで確認しよう
Railsを起動して、
myapp$ rails s
Nuxtも起動して、
frontend$ yarn dev
"http://localhost:3333/"にアクセスしてください。
ボタンを押すと、Railsから"Hello!!!!!"というテキストが返ってきていますね。
今回のまとめ
今回はNuxt.jsからRailsへapi通信を行う準備をし、実際にJSONデータを取得するところまでを行っていきました。
これにて初めてのapi通信は完了です。
コミットしときましょ
ここまでの編集をgitにコミットしておきましょう。
myapp$ git add -A
myapp$ git commit -m "nuxt_api_setup"
さて、次回は
さてさて。
次回は、もうちょっと表示画面をかっこよくするためにVuetifyをインストールし、Herokuへデプロイしていきます。
それではまたお会いしましょう。