API 모드로 Rails6 구축

개시하다

Rails API 모드 + React를 사용하여 웹 응용 프로그램을 개발합니다.
첫 번째 단계로 Rails6는 API 모드로 환경을 구축했지만 해피점이 몇 개 있어서 기록했다.

참고 자료

대체로 아래의 보도를 참고하였다.
https://zenn.dev/akino/articles/bf245128f390d7
환경 변수에 관해서는 아래의 보도를 참고하겠습니다.https://qiita.com/alokrawat050/items/c68ec9578c12fe5a93a3

컨디션

ruby :2.7.2

rails :6.0.2

구축

1. API 모드의 rails new

이번 DB에서 mysql을 지정합니다.

rails _6.0.2_ new hoge -d mysql --api

2. database.yml에 MySql 사용자 이름 및 암호 추가

database.yml에 비밀번호를 직접 쓰는 것이 문제이기 때문에 변수로 설정합니다.
먼저 미리 준비하다env.yml 제작, 다음 변수 준비.
config/local_env.yml

DB_USERNAME: 'hoge'
DB_PASSWORD: 'fuga'

config/application.rb를 통해 다음 내용, 데이터 베이스를 설정합니다.yml부터 변수를 참조할 수 있습니다.
config/application.rb

config.before_configuration do
  env_file = File.join(Rails.root, 'config', 'local_env.yml')
  YAML.load(File.open(env_file)).each do |key, value|
  ENV[key.to_s] = value
  end if File.exists?(env_file)
end

이것 괜찮아요?env.yml가git에 올라가면 가진 게 하나도 없어요.gitignore에 기록하세요.
.gitignore

...
/config/local_env.yml

변수를 사용할 수 있기 때문입니다, 데이터베이스.yml을 수정합니다.
config/locales/database.yml

default: &default
  adapter: mysql2
  encoding: utf8mb4
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: <%= ENV["DB_USERNAME"] %>
  password: <%= ENV["DB_PASSWORD"] %>
  socket: /tmp/mysql.sock

development:
  adapter: mysql2
  encoding: utf8mb4
  reconnect: false
  database: hoge_development
  pool: 5
  username: <%= ENV["DB_USERNAME"] %>
  password: <%= ENV["DB_PASSWORD"] %>
  host: localhost
  
test:
  adapter: mysql2
  encoding: utf8mb4
  reconnect: false
  database: hoge_test
  pool: 5
  username: <%= ENV["DB_USERNAME"] %>
  password: <%= ENV["DB_PASSWORD"] %>
  host: localhost
  
production:
  adapter: mysql2
  encoding: utf8mb4
  reconnect: false
  database: hoge_production
  pool: 5
  username: <%= ENV["DB_USERNAME"] %>
  password: <%= ENV["DB_PASSWORD"] %>
  host: localhost

3. DB 만들기

rails db:create

4. 필요한gem 설치

json의 응답을 되돌려주기 위해'jbuilder'를 설치합니다.

프런트는 리액트를 통해 구축되기 때문에 CORS를 설치한다.이를 위해 "rack-cors"를 설치합니다.

둘 다 기본 댓글 출력이니 주석만 삭제하면 OK
Gemfile

gem 'jbuilder', '~> 2.7'
gem 'rack-cors'

난 bundle install.

bundle install

5. CORS(Cross-Origin Resource Sharing) 설정

Rails는 3000포트, React는 3001포트에서 시작합니다.
cors는 서로 다른 포트 간의 요청과 응답을 허용합니다.rb 설정이 필요합니다.
주석을 떼어낸 후 다음과 같이 수정한다.
config/initializers/cors.rb

Rails.application.config.middleware.insert_before 0, Rack::Cors do
    allow do
    origins 'http://localhost:3001'

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

origins에서 "http://localhost:3001"을 설정하여 React 요청을 허용합니다.

이상

여기까지만 구축이 잠시 끝났습니다.
앞으로 프런트 구축을 추진하고 싶습니다.