Zenn
Closed7

RailsのAPIモード（メモ）

ERIERI

RubyOnRailsをバックエンドとして使用し、フロントエンドを分離した実装を行う場合の学習ポイントをご紹介します。

バックエンド（Ruby on Rails）の学習ポイント

  1. APIモード

    • Rails 5以降の--apiフラグを使ったAPIモード
    • JSONレスポンスの適切な構造化
    • Railsのルーティング設計とREST原則

  2. 認証・認可

    • JWT（JSON Web Token）の実装
    • Deviseやdoorkeeper等の認証gem
    • CORS（Cross-Origin Resource Sharing）の設定

  3. シリアライゼーション

    • Active Model Serializerの使用方法
    • JBuilderを使ったJSON構築
    • Fast JSONAPIやrapid_jsonなどの高速なシリアライザ

  4. テスト

    • APIのRSpecテスト
    • リクエスト/レスポンステスト
    • APIドキュメント生成（Swagger等）

フロントエンドの選択肢と学習ポイント

まだフロントエンド言語を決めていないとのことですが、以下の選択肢があります：

  1. React

    • SPAの基本概念
    • コンポーネント設計
    • 状態管理（Redux, Context API等）
    • APIクライアント実装（axios, fetch等）

  2. Vue.js

    • 比較的シンプルな学習曲線
    • コンポーネントベースの設計
    • Vuexでの状態管理
    • Vue CLIによるプロジェクト構築

  3. Angular

    • TypeScriptベース
    • モジュール指向の設計
    • 強力なDI（依存性注入）システム
    • RxJSによる非同期処理

フロントとバックの連携ポイント

  1. CORS設定

    • rack-cors gemの設定
    • オリジン、メソッド、ヘッダーの適切な許可

  2. APIバージョニング

    • API versioning戦略（URLベース、ヘッダーベース等）
    • バージョン管理の自動化

  3. エラーハンドリング

    • 一貫性のあるエラーフォーマット
    • フロントエンドでの適切なエラー表示

  4. 認証フロー

    • ログイン/トークン取得フロー
    • トークンの安全な保存（HttpOnly Cookie等）
    • リフレッシュトークンの実装

開発・デプロイの学習ポイント

  1. 開発環境

    • Docker/Docker Composeを使った環境構築
    • フロントとバックのローカル開発環境連携

  2. CI/CD

    • テスト自動化
    • デプロイパイプライン構築

  3. パフォーマンス最適化

    • N+1クエリ問題の回避
    • キャッシング戦略（Redis等）
    • フロントエンドのバンドルサイズ最適化

フロント言語はプロジェクトの要件や既存のチームスキルに合わせて選択するとよいでしょう。まずは小さなAPIと簡単なフロントエンドを作成し、そこから徐々に機能を拡張していくアプローチがおすすめです。

ERIERI

React フロントエンドと Rails 7 API バックエンドを使った技術検証アプリケーションを Docker で構築します。以下に必要なファイルと手順を示します。

これで React フロントエンドと Rails 7 API バックエンドを使った Docker ベースの技術検証アプリケーションの構築に必要なファイルを作成しました。このプロジェクトは以下の特徴を持っています：

  1. Docker を使用した開発環境

    • PostgreSQL、Rails API、React の 3 つのコンテナで構成
    • ボリュームを使用してコードの変更をリアルタイムに反映

  2. Rails API (バックエンド)

    • Rails 7 in API モード
    • シンプルな Task リソースの CRUD 操作
    • CORS 設定済み（フロントエンドからのアクセスを許可）

  3. React (フロントエンド)

    • Vite を使用した高速な開発環境
    • axios を使用した API 通信
    • タスク一覧の表示、追加、削除、完了状態の切り替え機能

使い方

セットアップ手順に従ってプロジェクトを初期化し、起動してください。主な手順は：

  1. 提供したファイルを適切なディレクトリに配置
  2. ./backend-setup.sh を実行してディレクトリ構造を初期化
  3. Docker コンテナをビルドして起動
  4. データベースのマイグレーションを実行

起動後は、ブラウザで以下の URL にアクセスできます：

このプロジェクトをベースに、認証機能や他のモデルの追加など、さらに複雑な機能を実装することもできます。技術検証用の基本的な構成として、Rails の API 機能と React の連携をシンプルに確認できるようになっています。

ERIERI

このエラーは、Docker のビルド時に package.json ファイルが見つからないことを示しています。Dockerfile で COPY package.json package-lock.json* ./ という命令を実行しようとしていますが、frontendディレクトリにこれらのファイルが存在しないため失敗しています。

以下の手順で修正しましょう：

  1. まず、フロントエンド用のpackage.jsonを作成します：
mkdir -p frontend
cd frontend

# package.jsonを作成
cat > package.json << EOL
{
  "name": "frontend",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "axios": "^1.6.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.20.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.37",
    "@types/react-dom": "^18.2.15",
    "@vitejs/plugin-react": "^4.2.0",
    "eslint": "^8.53.0",
    "eslint-plugin-react": "^7.33.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.4",
    "vite": "^5.0.0"
  }
}
EOL

# 空のpackage-lock.jsonを作成（あれば）
touch package-lock.json

# ルートディレクトリに戻る
cd ..
  1. バックエンド用の空のGemfileとGemfile.lockを作成します（まだ作成していない場合）：
mkdir -p backend
cd backend

# 最小限のGemfileを作成
cat > Gemfile << EOL
source 'https://rubygems.org'
gem 'rails', '~> 7.0.0'
EOL

# 空のGemfile.lockを作成
touch Gemfile.lock

# ルートディレクトリに戻る
cd ..
  1. 再度Dockerイメージをビルドします：
docker-compose build

これで、フロントエンドのDockerfileがpackage.jsonを見つけることができるはずです。ビルドが成功したら、続けて Rails アプリケーションを生成できます：

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

この手順に従うことで、初期のDockerビルドエラーを解決し、プロジェクトのセットアップを進めることができます。

このスクラップは8日前にクローズされました
作成者以外のコメントは許可されていません