Rails + Nuxt CRUDアプリ作成(環境構築編)

Rails + Nuxt CRUDアプリ作成(環境構築編)

フロントエンド をVue.jsのフレームワークのNuxt.jsを使用し、バックエンドをRuby on RailsのAPIモードで簡単なCRUDのアプリケーションを作成します。

今回の記事ではNuxtとRailsの環境構築とaxios通信をして「Hello Rails」を出力するところまでを実装します。

環境
$ rails -v
Rails 6.1.1

$ yarn -v
1.22.5

ディレクトリの作成

// 新規ディレクトリの作成
$ mkdir todo-list

// todo-listのディレクトリへ移動
$ cd todo-list

環境構築(Rails)

// RailsのAPIモードでapiという名前でプロジェクト作成 DBはpostgresを指定
todo-list $ bundle exec rails new api --database=postgresql --skip-bundle --api

// apiディレクトリへ移動
$ cd api

api $ bundle install

database.ymlを編集します。

default: &default
  adapter: postgresql
  encoding: unicode
  username: <%= ENV['PG_USERNAME'] %>  # 編集
  password: <%= ENV['PG_PASSWORD'] %>  # 編集
  # For details on connection pooling, see Rails configuration guide
  # https://guides.rubyonrails.org/configuring.html#database-pooling
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>

PG_USERNAMEとPG_PASSWORDはzshrcに記載のpostgresのusernameとpasswordになります。

僕の場合だと下記のように記述しています。

$ vim ~/.zshrc
export PG_USERNAME='XXXXXXXX' 
export PG_PASSWORD='YYYYYYYY'

database.ymlの編集が完了したらデータベースを作成します。

api $ bundle exec rails db:create
Created database 'api_development'
Created database 'api_test'

api $ rails s

http://localhost:3000/ にアクセスして下記の画像のように表示されたらrails側の構築は完了になります。

環境構築(Nuxt)

続いてnuxt.jsの環境構築を行っていきます。

// frontという名前でnuxtプロジェクトの作成
todo-list $ yarn create nuxt-app front

? Project name: front
? Programming language: JavaScript
? Package manager: Yarn
? UI framework: Bootstrap Vue
? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Testing framework: None
? Rendering mode: Single Page App
? Deployment target: Server (Node.js hosting)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? What is your GitHub username? YOUR GITHUB USERNAME
? Version control system: Git

  To build & start for production:

	cd front
	yarn build
	yarn start

✨  Done in 271.27s.

nuxtのデフォルトのportは3000でrails側とバッテイングしてしまうのでportを修正します。

front/nuxt.config.js

export default {
  // 追加
  server: {
    port: 8080
  },

  // Disable server-side rendering: https://go.nuxtjs.dev/ssr-mode
  ssr: false,
  ...
}
todo-list $ cd front
front $ yarn dev

http://localhost:8080/ にアクセスして下記の画像のように表示されたらnuxt側の構築は完了になります。

axios通信(Nuxt)

環境構築が完了したのでここからAPI通信の準備をしていきます。

使用するモジュール

@nuxtjs/axios: https://github.com/nuxt-community/axios-module

@nuxtjs/proxy: https://github.com/nuxt-community/proxy-module

モジュールのインストール
front $ yarn add @nuxtjs/axios
front $ yarn add @nuxtjs/proxy

インストールが完了したらnuxt.config.js編集します。

修正内容

  1. modulesに@nuxtjs/axiosと@nuxtjs/proxyを追加する
  2. proxyのtargetにバックエンドのURLを指定する
nuxt.config.js
// 省略

 // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    // https://go.nuxtjs.dev/bootstrap
    'bootstrap-vue/nuxt',
    '@nuxtjs/axios',
    '@nuxtjs/proxy',
  ],

  proxy: {
    '/api': {
      target: http://localhost:3000/
    }
  },
// 省略

次にpagesの修正をしていきます。

front/pages/index.vue

<template>
  <div class="container">
   <!-- ここから -->
    <b-button
      @click="getApi()"  
    >
     GET API
    </b-button>
    <div>
      {{ message }}
    </div>
    <!-- ここまで -->
    <div>
      <Logo />
      <h1 class="title">
        front
      </h1>
      ...省略

<script>
export default {
  data: () => {
    return {
      message: ''
    }
  },
  methods: {
    getApi() {
      const url = "/api/v1/hello"
      this.$axios.get(url)
        .then((res) => {
          this.message = res.data
        })
        .catch((error) => {
          console.log(error)
        })
    }
  }
}
</script>

...省略

上記画像のように表示されます。

<b-button
  @click="getApi()"  
>
  GET API
</b-button>

クリックイベントでgetApi()メソッドを実行します。

getApiのメソッドを確認します。

    getApi() {
      const url = "/api/v1/hello"
      this.$axios.get(url)
        .then((res) => {
          this.message = res.data
        })
        .catch((error) => {
          console.log(error)
        })
    }

this.$axios.get(url)はurlのGETリクエストを送信します。

/api/**の記述でproxyのtargetのurlが設定されるので

今回であれば http://localhost:3000/api/v1/hello のurlのGETリクエストということになります。

次はRails側でAPIを作成します。

axios通信(Rails)

  • ルーティングの生成
  • コントローラの作成

上記手順に沿って実装していきます。

  • ルーティングの生成
api/config/routes.rb

Rails.application.routes.draw do
  namespace :api do
    namespace :v1 do
      resources :hello, only: [:index]
    end
  end
end
$ rails routes
Prefix                       Verb   URI Pattern                 Controller#Action
api_v1_hello_index    GET    /api/v1/hello(.:format)  api/v1/hello#index

ルーティングが生成できました。次にコントローラを作成します。

api/controllers/api/v1/posts_controller.rb

module Api
  module V1
    class HelloController < ApplicationController
      def index
        render json: 'Hello Rails'
      end
    end
  end
end

これで /api/v1/helloのGETリクエスト が送られてくると `Hello Rails`のメッセージを返すAPIが完成しました。

アプリの方で「GET API」ボタンをクリックすると下記のようなエラーがChromeのコンソールに表示されると思います。

Access to XMLHttpRequest at 'http://localhost:3000/api/v1/hello' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

google翻訳で直訳すると

オリジン「http:// localhost:8080」からの「http:// localhost:3000 / api / v1 / hello」でのXMLHttpRequestへのアクセスは、CORSポリシーによってブロックされています:「Access-Control-Allow-Origin」ヘッダーが存在しません 要求されたリソースで。

簡単に説明するとNuxtとRailsでURLが異なるので

http:// localhost:8080からhttp:// localhost:3000 /へのアクセスを許可する必要があります。

なのでRails側でcorsの設定を行っていきます。

cors設定(Rails)

api/Gemfile

## 省略
gem 'rack-cors'  # コメントアウトを外す
api $ bundle install

cors.rbを修正していきます。

api/config/initializers/cors.rb

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins ENV["API_DOMAIN"] || 'http://localhost:8080/'

    resource '*',
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head]
  end
end

origins ENV[“API_DOMAIN”] || ‘http://localhost:8080/’

の記述で環境変数API_DOMAINまたはhttp://localhost:8080/からのアクセスを許可します。

今回はAPI_DOMAINについては設定しません。

もしこの記述でエラーになる方は一度下記のように記述してください。

origins '*' で全てのアクセスを許可します。

api/config/initializers/cors.rb

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins '*'

    resource '*',
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head]
  end
end

これでcorsの設定が完了したので再度railsとnuxtのサーバーを起動し直して「GET API」ボタンをクリックします。下記のようにボタンをクリックで「Hello Rails」の文字が表示されれば完成です

これでAPI通信の機能は実装できました。

次の記事では実際にRails側でモデルを作成してデータを作成してnuxt側で読み込むところまで実装します。

次の記事はこちら:

Rails + Nuxt CRUDアプリ作成(一覧表示編)

Rails + Nuxtカテゴリの最新記事