認証のためのバックエンド構築をやる

環境構築

前回の続きから

Railsでバックエンドを作成したいが、自分のlocalで構築するのはなんとなく抵抗があるので、Dockerで構築しようと思います。 ベースのディレクトリ構成は

app
 - docker-compose.yml
 api
   - Gemfile
   - Gemfile.lock
   - Dockerfile

とした。

Dockerfile

FROM ruby:2.7.1

RUN apt-get update -qq && apt-get install -y build-essential libpq-dev nodejs 

RUN mkdir /myapp
WORKDIR /myapp
COPY Gemfile /myapp/Gemfile
COPY Gemfile.lock /myapp/Gemfile.lock
RUN bundle install
ADD . /myapp

docker-compose.yml

version: '3'
services:
  api:
    build: ./api
    ports:
      - '3000:3000'
    command: /bin/sh -c "rm -f /myapp/tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
    volumes:
      - ./api:/myapp
    depends_on:
      - db
  db:
    image: postgres
    volumes:
      - dbdata:/var/lib/postgresql/data
    environment:
      - POSTGRES_USER=postgres
      - POSTGRES_PASSWORD=password
    ports:
      - '5432:5432'

volumes:
  dbdata:

として中身をおいておく。GemfileとGemfile.lockは空でおいておきます。

ここまで終わったら、docker-compose run してrails newコマンドを打っていく。 今回はapiモードで構築したいという点と、databaseにpostgresqlを使用したいというオプションをrails new時点で入れておく。

docker-compose run api rails new . --api --force --skip-bundle --database=postgresql

成功したら、database.ymlのdefaultに下記を追加。

default: &default
  adapter: postgresql
  encoding: unicode
  host: db
  port: 5432
  username: postgres
  password: password

最後に、

docker-compose build
docker-compose run api rails db:create
docker-compose up

すれば、起動するはず。

apiモードにすると何が違うかというと、view関連に必要なものがデフォルトで作成されなくなったり、assetsディレクトリがなくなったりします。後はコントローラーがAPIを継承した形になったりします。

起動が成功したら、普通にRails newしたときのように

がでる。

APIを作成してみる。

とりあえずはjsonでなにかレスポンスを返して見たいので、APIを一個作ってみます。

controllers/api/v1/hello_controller.rb

module Api
  module V1
    class HelloController < ApplicationController
      def index
        render json: {
          greet: "hello",
        }
      end
    end
  end
end

ルーティングも対応させます。

Rails.application.routes.draw do
  namespace :api do
    namespace :v1 do
      resources :hello
    end
  end
end

indexしかないですが一旦resourcesで行きます。

http://localhost:3000/api/v1/hello

にアクセスしてみます。

のようにJSONのレスポンスが帰ってこれば成功です。 ここで一旦Rails側は一旦ストップ。Nuxtの設定に行きます。

Proxy設定をする

Nuxt側は5000番ポートで立ち上げるようにしているので、5000 -> 3000 apiにリクエストを送る必要があります。 nuxtにはproxyモジュールというものがあり、これを使うことで違うポートでもいい感じに通信ができるようになります。

axios入れる

RailsとのAPI通信にはaxiosを使おうと思うので、nuxt/axiosを入れます。

yarn add @nuxtjs/axios @nuxtjs/proxy

インストールしたら、nuxt.config.tsにaxiosの設定と、proxyのエンドポイントの指定を行います。

.
.
.
 modules: ['@nuxtjs/dotenv', '@nuxtjs/axios', '@nuxtjs/proxy'], //追加
 .
 .
 .
 axios: {  // 追加
    proxy: true
  }
 
 config.proxy = { //追加
  '/api': 'http://localhost:3000'
}
 

エンドポイントは本来であれば環境変数に分けたりするのがいいですが、今回は確認が優先ということもあり一旦ハードに書いてしまいます。

エンドポイントの指定が終わったら、実際に機能するか確認するために、Indexにボタンを置いてみます。

index.vue

<template>
.
.
.

  <div>
    <button @click="greet()">
      挨拶する
    </button>
  </div>
    .
    .
    .
    
</template>
.
.
.


methods: {
.
.
.

 async greet () {  //追加
      const data = await this.$axios.$get('/api/v1/hello')
      console.log(data)
    }
}

ボタンをクリックしてみると、Rails側で設定したJSONが受け取れることを確認できます。

ここまででAPIの基本的な動作は完成です。 実際にホスティングする場合にはRails側でrack-corsを使うなどして、許可元を指定するなどの対処が必要になります。 気が向いたらそっちも書くかも。