SPA開発 4. RailsとNuxt.jsを共存させる #02
2019年11月21日に更新

Nuxt.jsからRailsへ、初めてのapi通信でHelloを表示しよう

今回達成すること

今回は、Nuxtへapi通信のセットアップを行い、実際にRailsのjsonデータを取得するところまでを行っていきます。

  • NuxtのURLの変更
  • 静的ファイルの出力先の変更
  • プロキシの設定
  • Rails apiコントローラーの作成
  • Nuxtのトップページにapiを取得するボタンの設置

これにより、ブラウザ上のボタンを押すとRailsが吐き出した「Hello」の文字列を表示することができます。

完成イメージ

2019-08-22 16-43-26

この記事の読み方

この記事ではRailsとNuxtに対するコマンドを以下のように分けます。

  • Railsプロジェクトに対するコマンド
myapp$ コマンド
  • Nuxtプロジェクトに対するコマンド
frontend$ コマンド

ターミナルは2画面開いておいてください。

ターミナル上で「command」+「T」を押すと新規ターミナルが開きます。

【Nuxt】起動するURLを変更する

今のままでは、RailsもNuxtも"http://localhost:3000/"で起動し競合するため、Nuxtの起動するURLを変更します。

frontendディレクトリのpackage.jsonを開いてdevの部分を以下のように書き換えます。

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ディレクトリのnuxt.config.jsを開いてください。

frontend/nuxt.config.js
export default {
  ...
  }, // カンマを忘れない
 
  // 追記
  generate: {
    dir: '../public'
  }

}

Nuxtは通常、Nuxtプロジェクト内のdistディレクトリに静的ファイルを吐き出します。

この初期設定を、「Railsプロジェクトのpublicディレクトリに吐き出してね」と変更するコードになります。

それではターミナルでgenerateコマンドを実行してみてください。

frontend$ yarn generate

RailsのpublicディレクトリにNuxtから静的ファイル群が吐き出されます。

2019-08-19 01-41-24

確認が取れたらRailsを起動しましょう。

myapp$ rails s

"http://localhost:3000/"にアクセスしたら、Nuxtの初期画面が表示されていますね。

この画面はNuxtが表示しているのではなく、Railsが表示しています。

2019-08-19 01-30-14

「Control」+「C」でRailsサーバーを停止して、よし!次に進みましょう。

【Nuxt】プロキシの設定を行う

プロキシとは、高速なアクセスや安全な通信などを確保するための中継サーバのことです。(ざっくり)

なぜ、プロキシの設定を行うのか?

フロントのNuxtからバックエンドのRailsへapi通信を行うとき、URLが違うとブラウザ上でエラーを引き起こします。

これが、クロスドメイン通信を拒否するCORSエラーです。

CORSについてはこの記事がわかりやすいですよ。

CORS(Cross-Origin Resource Sharing)によるクロスドメイン通信の傾向

今回のプロジェクト設計は本番環境は同じURLでapi通信を行うので問題ありませんが、開発環境では

api通信を行うためCORSエラーを引き起こします。

Nuxtでは、プロキシの設定をすることでこのCORSエラーを回避することができます。

クロスオリジンリソース共有 - Nuxt.js

@nuxtjs/proxyモジュールのインストールとセットアップ

Nuxtにproxyモジュールをインストールします。

@nuxtjs/proxy - npm

frontend$ yarn add @nuxtjs/proxy

proxyモジュールのセットアップを行います。nuxt.config.jsを開いてください。

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::hello

    apiディレクトリの中のv1ディレクトリの中にhelloコントローラーを作成して。というコマンドです。

    ディレクトリがなければ勝手に作成してくれます。

  • --skip-test-framewor

    テストするファイルは作らなくていいよ。というコマンドオプションです。

hello_controller.rbを以下のように編集します。

app/controllers/api/v1/hello_controller.rb
class Api::V1::HelloController < ApplicationController

  def index
    render json: {
      msg: "Hello!!!!!"
    }
  end

end

続いてパスの設定です。

routes.rbを編集します。

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!!!"というテキストが返ってきていますね。

2019-08-22 16-43-26

今回のまとめ

今回はNuxt.jsからRailsへapi通信を行う準備をし、実際にJSONデータを取得するところまでを行っていきました。

これにて初めてのapi通信は完了です。

コミットしときましょ

ここまでの編集をgitにコミットしておきましょう。

myapp$ git add -A
myapp$ git commit -m "nuxt_api_setup"

さて、次回は

さてさて。

次回は、もうちょっと表示画面をかっこよくするためにVuetifyをインストールし、Herokuへデプロイしていきます。

それではまたお会いしましょう。

現在、カテゴリー「Rails apiとNuxt.jsでSPA開発」のデモアプリを構築中です。記事になるまでもう少々のお時間が必要です。ブログの更新が止まって申し訳ありません。デモアプリの進捗状況は こちらの記事 で随時お伝えしてまいります。
スポンサー広告
次の記事はこちらです
SPA開発
今日のTweet
スポンサー広告