Nuxt.jsからRailsへ、初めてのapi通信でHelloを表示しよう
  • 2019.08.22に公開
  • 2019.11.21に更新
  • SPA開発
  • 4. RailsとNuxt.jsを共存させる
  • No.2 / 4
「SPA開発」では、Nuxt.js v2.14未満が使用されています。 Nuxt.jsはv2.13~14で大きなバージョンアップがありました。それに伴い、書き方も大きく変化しています。 v2.14以上で書かれた「SPA開発」の続編は、カテゴリー「 Udemy 」 で公開しています。

今回達成すること

今回は、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通信を行うので問題ありませんが、開発環境では

  • "http://localhost:3333/" のNuxtから
  • "http://localhost:3000/" のRailsへ

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へデプロイしていきます。

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

あなたの力になれること
私自身が独学でプログラミングを勉強してきたので、一人で学び続ける苦しみは痛いほど分かります。そこで、当時の私がこんなのあったら良いのにな、と思っていたサービスを立ち上げました。周りに質問できる人がいない、答えの調べ方が分からない、ここを聞きたいだけなのにスクールは高額すぎる。そんな方に向けた単発・短期間メンターサービスを行っています。
独学プログラマのサービス
SPA開発の投稿
1
  • 更新情報
  • /
  • #01
「Rails apiとNuxt.jsでSPA開発」のデモアプリを開発中...。【2020/05/19追記: このカテゴリーの更新を一旦終了といたします】
1
  • 今回作るアプリケーション
  • /
  • #01
Railsアプリの完成イメージ画像と作ろうと思った経緯
2
  • 今回作るアプリケーション
  • /
  • #02
今回作るRailsアプリの全体像と機能の整理
1
  • 開発環境を整える
  • /
  • #01
macにRailsをゼロからインストールする
2
  • 開発環境を整える
  • /
  • #02
Rails apiモードのプロジェクトを作成し、Gitにコミットする
3
  • 開発環境を整える
  • /
  • #03
Bitbucketに公開鍵を追加し、Railsプロジェクトをpushする
4
  • 開発環境を整える
  • /
  • #04
HerokuCLIのインストールとherokuアプリケーションの作成
1
  • RailsをHerokuにデプロイする
  • /
  • #01
Herokuのデータベース設定と開発に便利なgemを導入する
2
  • RailsをHerokuにデプロイする
  • /
  • #02
HerokuにPumaを導入するためのRailsセットアップ
3
  • RailsをHerokuにデプロイする
  • /
  • #03
Railsに"Hello"を表示してHerokuへデプロイする
1
  • RailsとNuxt.jsを共存させる
  • /
  • #01
【RailsとNuxt.jsの共存】Rails上にNuxt.jsのプロジェクトを構築しよう
2
  • RailsとNuxt.jsを共存させる
  • /
  • #02
Nuxt.jsからRailsへ、初めてのapi通信でHelloを表示しよう
3
  • RailsとNuxt.jsを共存させる
  • /
  • #03
Nuxt.jsにVuetify2.0を導入してFont Awesomeもインストールするぜ
4
  • RailsとNuxt.jsを共存させる
  • /
  • #04
初めてのRailsApiアプリの公開。Herokuにデプロイする準備と実際のデプロイまで
1
  • データベース設計
  • /
  • #01
データベースを正規化する前に、会計システムの勘定科目データを整理する
2
  • データベース設計
  • /
  • #02
会計システムのデータベース設計に挑む
1
  • バージョンアップ情報
  • /
  • #01
【ご報告】Nuxt.jsを2.10.2にバージョンアップしました
2
  • バージョンアップ情報
  • /
  • #02
【ご報告】Railsを6.0.0にバージョンアップしました
1
  • Userモデル開発
  • /
  • #01
本番環境と開発環境でRailsのSeedデータを切り替える
2
  • Userモデル開発
  • /
  • #02
Railsにユーザーテーブルを作成する【テーブル確認コマンド】
3
  • Userモデル開発
  • /
  • #03
【Rails】EachValidatorクラスを使ったEmailカスタムバリデーション【lib以下読み込み】
4
  • Userモデル開発
  • /
  • #04
【Rails】エラーメッセージの日本語化【i18nとja.ymlのセッティング】
5
  • Userモデル開発
  • /
  • #05
【Rails】開発・テスト・本番環境の全てにユーザーSeedデータ投入する
6
  • Userモデル開発
  • /
  • #06
【Rails】ユーザーモデルのバリデーションをテストする
1
  • ログイン周りのレイアウト設計
  • /
  • #01
【Nuxt.js】ログインフラグでレイアウトを切り替えるテクニック【2019/12/07追記あり】
2
  • ログイン周りのレイアウト設計
  • /
  • #02
【Nuxt.js】ウェルカムページのレイアウト構築【sassの導入】
3
  • ログイン周りのレイアウト設計
  • /
  • #03
【Nuxt.js】ログイン周りの入力フォームコンポーネント設計【2019/12/07追記あり】
4
  • ログイン周りのレイアウト設計
  • /
  • #04
【Nuxt.js】会員登録フォームを構築してサインアップページを完成させる
独学プログラマ
独学でも、ここまでできるってよ。
CONTACT
Nuxt.js制作のご依頼は下記メールアドレスまでお送りください。