Nuxt.js × Rails API 모드로 애플리케이션 만들기

하고 싶은 일



Nuxt.js에서 전면을, Rails로 API 만들기
작성한 API에 대해 Postman에서 게시
다음글 에서 Nuxt.js 측에서 Rails API를 두드려 DB에 데이터를 저장하는 방법을 게재합니다.

개발 환경
루비 2.6.5
Rails 6.0.3.4
노드 v14.7.0
yarn 1.22.4

프론트를 Nuxt.js로 만들기


  • post-app라는 디렉토리에 app라는 이름으로 프론트 용 응용 프로그램 만들기
  • Axios는 프로젝트를 만들 때 설치하도록 선택합니다
  • // post-appというディレクトリを作る
    $ mkdir post-app
    $ cd post-app
    
    // nuxtでのアプリケーションを作る
    $ npx create-nuxt-app app
    
    // 各種設定を選択する
    ? Project name: (app)
    └ そのままEnterボタン押す
    
    ? Programming language: (Use arrow keys)
    ❯ JavaScript
      TypeScript
    └ JavaScriptを選択
    
    ? Package manager:
    ❯ Yarn
      Npm
    └ Yarnを選択
    
    ? UI framework: (Use arrow keys)
    ❯ None
      Ant Design Vue
      Bootstrap Vue
      Buefy
      Bulma
      Chakra UI
      Element
      Framevuerk
      iView
      Tachyons
      Tailwind CSS
      Vuesax
      Vuetify.js
    └ Noneを選択
    
    ? Nuxt.js modules:
    ❯◉ Axios
     ◯ Progressive Web App (PWA)
     ◯ Content
    └ Axiosを選択(スペースキーを押す)
    
    ? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
    ❯◯ ESLint
     ◯ Prettier
     ◯ Lint staged files
     ◯ StyleLint
    └ そのままEnterボタン押す
    
    ? Testing framework: (Use arrow keys)
    ❯ None
      Jest
      AVA
      WebdriverIO
    └ そのままEnterボタン押す
    
    ? Rendering mode:
      Universal (SSR / SSG)
    ❯ Single Page App
    └ Single Page Appを選択
    
    ? Deployment target: (Use arrow keys)
    ❯ Server (Node.js hosting)
      Static (Static/JAMStack hosting)
    └ Serverを選択
    
    ? Development tools:
    ❯◉ jsconfig.json (Recommended for VS Code if you're not using typescript)
     ◯ Semantic Pull Requests
    └ jsconfig.jsonを選択(スペースキーを押す)
    

    nuxt의 포트 번호를 8000번으로 변경



    공식 페이지

    공식에서 인용▼

    app/nuxt.config.js
    export default {
      server: {
        port: 8000, // デフォルト: 3000
        host: '0.0.0.0' // デフォルト: localhost
      }
      // その他の設定
    }
    

    실제 설명▼

    app/nuxt.config.js
    server: {
      port: 8000,
    },
    

    로컬 호스트 시작


    $ cd app
    $ yarn dev
    
    // 下記が表示されたらhttp://localhost:8000/でアクセス可能
    
       │   Nuxt.js @ v2.14.7                   │
       │                                       │
       │   ▸ Environment: development          │
       │   ▸ Rendering:   client-side          │
       │   ▸ Target:      server               │
       │                                       │
       │   Listening: http://localhost:8000/
    

    Rails로 API 서버 만들기


    // APIモード、DBはMySQLでrailsアプリケーションを作る
    $ rails new api --api -d mysql
    
    // DBを作る
    $ rails db:create
    Created database 'api_development'
    Created database 'api_test'
    

    Model 및 Controller 만들기


    // Post Modelを作る
    $ rails g model Post title:string body:text
    
    // migrateする
    $ rails db:migrate
    
    // apiディレクトリの中のv1ディレクトリの中にpostsコントローラーを作る
    // test用のディレクトリの自動生成をスキップする 
    $ rails g controller api::v1::posts --skip-test-framework
    

    라우팅 설정


  • /api/v1/posts 라는 라우팅 만들기

  • api/config/routes.rb
    Rails.application.routes.draw do
      namespace :api do
        namespace :v1 do
          resources :posts
        end
      end
    end
    

    PostsController 설정



    api/app/controllers/api/v1/posts_controller.rb
    class Api::V1::PostsController < ApplicationController
      before_action :set_post, only: [:show, :update, :destroy]
    
      def index
        posts = Post.order(created_at: :desc)
        render json: { status: 'SUCCESS', message: 'Loaded posts', data: posts }
      end
    
      def show
        render json: { status: 'SUCCESS', message: 'Loaded the post', data: @post }
      end
    
      def create
        post = Post.new(post_params)
        if post.save
          render json: { status: 'SUCCESS', data: post }
        else
          render json: { status: 'ERROR', data: post.errors }
        end
      end
    
      def destroy
        @post.destroy
        render json: { status: 'SUCCESS', message: 'Deleted the post', data: @post }
      end
    
      def update
        if @post.update(post_params)
          render json: { status: 'SUCCESS', message: 'Updated the post', data: @post }
        else
          render json: { status: 'SUCCESS', message: 'Not updated', data: @post.errors }
        end
      end
    
      private
    
      def set_post
        @post = Post.find(params[:id])
      end
    
      def post_params
        params.permit(:title, :body)
      end
    end
    

    Postman을 사용하여 게시해보기



    Postman
    사용법 참고 기사
    - 아래와 같이 되면 OK


    Rails 콘솔에서 게시할 수 있는지 확인


    // コンソールを立ち上げる
    $ rails c
    
    // 投稿を確認する
    irb(main):001:0> Post.first
    

    위에서 Postman과 같은 내용이 표시되면 OK입니다.

    ※다른 기사에서 Nuxt.js측으로부터 데이터를 투고하는 처리를 구현합니다

    좋은 웹페이지 즐겨찾기