API 서버로서의 Rails — Rails + React/Vue 조합 만들기

최근 웹 개발은 백엔드와 프론트엔드의 완전 분리가 일반적인 구조가 되었습니다.
이제는 Rails가 전체 HTML을 렌더링하는 대신, JSON API만 제공하는 서버 역할을 하는 경우가 많죠.
이런 조합에서는 프론트엔드는 React, Vue 등으로 구축하고, Rails는 API 서버로만 동작</strong합니다.

이번 글에서는 Rails를 API 모드로 설정하고, React 또는 Vue 프론트엔드와 함께 동작시키는 전체 구조를 다뤄봅니다.

---

🧱 1. Rails API 모드로 새 프로젝트 생성

$ rails new backend-api --api

--api 옵션을 주면 Rails는 다음과 같은 변경 사항이 적용된 상태로 시작됩니다:

• 뷰 렌더링 미사용 (ERB 등 제외)
• 세션/쿠키 비활성화
• ActionController::API 기반으로 가벼운 컨트롤러 구성

---

🛠️ 2. CORS 설정 (Cross-Origin Resource Sharing)

프론트엔드 앱에서 Rails API에 요청을 보내려면 CORS 설정이 필요합니다.

# Gemfile
gem 'rack-cors'

# config/initializers/cors.rb
Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins 'http://localhost:3000'  # 프론트엔드 주소
    resource '*',
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options]
  end
end

React는 기본적으로 3000 포트에서 실행되기 때문에, 로컬 개발 시 CORS 허용이 꼭 필요합니다.

---

🔌 3. API 컨트롤러 구성

기본 컨트롤러는 ApplicationController < ActionController::API를 상속합니다.

# app/controllers/api/posts_controller.rb
module Api
  class PostsController < ApplicationController
    def index
      posts = Post.all
      render json: posts
    end
  end
end

📂 routes.rb 설정

# config/routes.rb
namespace :api do
  resources :posts
end

API 전용 경로는 /api/posts 형태로 만들어집니다.

---

⚛️ 4. React or Vue 프론트엔드 연결

React 예시

useEffect(() => {
  fetch('http://localhost:3001/api/posts')
    .then(res => res.json())
    .then(data => setPosts(data));
}, []);

Vue 예시

mounted() {
  fetch('http://localhost:3001/api/posts')
    .then(res => res.json())
    .then(data => {
      this.posts = data;
    });
}

Axios를 사용하는 것도 가능하며, 토큰 인증 등은 이후 확장 가능합니다.

---

🔐 5. 인증 추가 (선택)

API 서버는 보통 JWT(Json Web Token) 기반 인증을 많이 사용합니다.

# Gemfile
gem 'jwt'

토큰 발급 및 검증은 Authorization 헤더를 사용하여 구현합니다. 자세한 인증 로직은 이후 별도 글에서 다룰 예정입니다 🔐

---

📦 6. 배포 구조

API 서버와 프론트엔드를 분리 배포하는 구조는 다음과 같습니다:

• Rails API 서버: Heroku, Render, EC2 등에 배포
• React/Vue 앱: Netlify, Vercel, S3 등에 배포
• 두 앱은 HTTP 요청을 통해 통신 (REST API or GraphQL)

---

🎯 마치며

Rails는 오래된 프레임워크처럼 보일 수 있지만, API 서버로 사용하면 가볍고 빠르며 강력한 백엔드가 됩니다.
React나 Vue와의 조합은 현대적인 웹 개발에서 매우 흔하고, 실전에서도 안정적으로 운영되고 있어요.