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로 만들기
app
라는 이름으로 프론트 용 응용 프로그램 만들기 // 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측으로부터 데이터를 투고하는 처리를 구현합니다
Reference
이 문제에 관하여(Nuxt.js × Rails API 모드로 애플리케이션 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/rearail/items/0141dd7c754c97f009e3텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)