Rails API + Nuxt.js + Devise-JWT #2

출처 : https://medium.com/@fishpercolator/how-to-separate-frontend-backend-with-rails-api-nuxt-js-and-devise-jwt-cf7dd9da9d16

참고 : https://mgleon08.github.io/blog/2018/07/17/rails-nuxt-jwt/

-> 화면은 nuxt.js 로, 서버단은 rails api 를 이용하는 예제

Part 2: Getting them talking to each other

모델, 및 디비 생성

docker-compose run backend bash
> bin/rails g resource example name:string colour:string
> bin/rails db:migrate
> bin/rails c
> > {"foo" => "green", "bar" => "red", "baz" => "purple"}.each {|n,c| Example.create!(name: n, colour: c)}
 

controller 편집

# autheg-backend/app/controllers/examples_controller.rb
class ExamplesController < ApplicationController
  def index
    examples = Example.all.select(:id, :name, :colour)
    render json: examples
  end
end

# autheg-backend/config/routes.rb
Rails.application.routes.draw do
  scope :api, defaults: { format: :json } do
    resources :examples
  end
end

다음 동작을 위해서는 devise Gem이 넣어줄 필요가 있다. (GEM파일에 지정해주고 설치하면 된다.) 

# autheg-backend/app/controllers/application_controller.rb
class ApplicationController < ActionController::API
  include ActionController::MimeResponds
  respond_to :json
end

실행예

http://localhost:8080/api/examples

디비에 내용 두번 넣어서 6개가 들어감.. 

axios & vuetify 설치

docker-compose run frontend yarn add @nuxtjs/axios @nuxtjs/vuetify

// autheg-frontend/nuxt.config.js
  modules: [
    '@nuxtjs/vuetify',
    '@nuxtjs/axios'
  ],
  axios: {
    host: 'localhost',
    port: 8080,
    prefix: '/api'
  }

nuxt.config.js 파일은 기존 코드의 build: 전 위치에 끼워 넣는다. 원본 사이트에서는 이 코드만으로 된다는데 에러남...

화면처리

// autheg-frontend/layouts/default.vue
<template>
  <div id="app">
    <v-app>
      <v-toolbar app dark>
        <v-toolbar-title>Auth example</v-toolbar-title>
        <v-spacer />
        <v-btn icon nuxt href="/"><v-icon>home</v-icon></v-btn>
      </v-toolbar>
      <v-content>
        <v-container fluid>
          <nuxt/>
        </v-container>
      </v-content>
    </v-app>
  </div>
</template>

// autheg-frontend/pages/index.vue
<template>
  <v-layout>
    <v-flex>
      <v-list>
        <v-list-tile v-for="example in examples" :key="example.id" :class="example.colour">
          <v-list-tile-content></v-list-tile-content>
        </v-list-tile>
      </v-list>
    </v-flex>
  </v-layout>
</template>
 
<script>
export default {
  data () {
    return {
      examples: []
    }
  },
  methods: {
    async updateExamples() {
      this.examples = await this.$axios.$get('/examples')
    }
  },
  mounted () {
    this.updateExamples()
  }
}
</script>

여기까지만 하고 localhost:3000 을 확인해보면 에러가 난다.

JavaScript isn’t allowed to query endpoints on other domains unless those domains set the CORS headers appropriately

고치기 위해서 cors 를 처리해주어야 함.

gem 파일의 코멘트 삭제

# autheg-backend/Gemfile
gem 'rack-cors'

cors.rb 파일의 코멘트 삭제

# autheg-backend/config/initializers/cors.rb
 
Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins 'localhost:3000' # 也可以 * 就是所有 domain 都可以打進來
 
    resource '*',
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head]
  end
end

백엔드 단의 번들 명령어 실행

docker-compose run -u root backend bundle

컨테이너 재기동

ctrl + c
docker-compose up

실행예