Rails API + Nuxt.js + Devise-JWT #1

출처 : https://medium.com/@fishpercolator/how-to-separate-frontend-backend-with-rails-api-nuxt-js-and-devise-jwt-cf7dd9da9d16

참고 : https://mgleon08.github.io/blog/2018/07/17/rails-nuxt-jwt/

-> 화면은 nuxt.js 로, 서버단은 rails api 를 이용하는 예제

Part 1: Creating a development environment

※ 이미 rails와 vue CLIs, docker 등이 설치되어 있다는 가정 하에 진행한다.

이 코스는 물론 Docker images 를 이용한 진행도 가능하다.

먼저 다음 명령어들 실행.

# backend
mkdir autheg
cd autheg
rails new autheg-backend -T --skip-spring -C -B -d postgresql --api
# -T = skip test
# -C = skip action cable
# -B = skip bundle
# --api = API server
# test, action cable, bundle 등을 스킵하는 이유는, 이것들을 나중에 Docker에서 돌리기 위함이다.
 
#frontend
vue init nuxt-community/starter-template autheg-frontend
cd autheg-frontend
yarn generate-lock-entry > yarn.lock
# 마찬가지로 패키지 설치 없이 yarn.lock 파일 생성을 위함

아래 파일들을 생성.

Backend

# autheg/autheg-backend/Dockerfile
FROM ruby:2.5
 
ARG UID
RUN adduser rails --uid $UID --disabled-password --gecos ""
 
ENV APP /usr/src/app
RUN mkdir $APP
WORKDIR $APP
 
COPY Gemfile* $APP/
RUN bundle install -j3 --path vendor/bundle
# Gems and yarn packages are installed into the mounted volumes. 
# This will stop you from needing to rebuild the whole Docker image every time you change the Gemfile or package.json.
 
COPY . $APP/
 
CMD ["bin/rails", "server", "-p", "8080", "-b", "0.0.0.0"]
# 원본 사이트에는 "rails"로 되어 있지만 에러가 발생하므로, "bin/rails"로 변경한다. 

# autheg/autheg-backend/.dockerignore
/vendor/bundle
/log
/tmp

# autheg/autheg-backend/.gitignore
/vendor/bundle/

Frontend

# autheg/autheg-frontend/Dockerfile
 
FROM node:9
 
ARG UID
RUN adduser frontend --uid $UID --disabled-password --gecos ""
 
ENV APP /usr/src/app
RUN mkdir $APP
WORKDIR $APP
 
COPY package.json yarn.lock $APP/
RUN yarn
# Gems and yarn packages are installed into the mounted volumes. 
# This will stop you from needing to rebuild the whole Docker image every time you change the Gemfile or package.json.
 
COPY . $APP/
 
CMD ["yarn", "run", "dev"]

# autheg/autheg-frontend/.dockerignore
/node_modules/

ALL

# autheg/docker-compose.yml
 
version: '3' # dockerfile 
services:
  db: # rails database.yml host
    image: postgres
    ports:
      - "5432"
  backend: # REPOSITORY name autheg_backend
    build:
      context: autheg-backend
      args:
        UID: ${UID:-1001}
    volumes:
      - ./autheg-backend:/usr/src/app
    ports:
      - "8080:8080"
    depends_on:
      - db
    user: rails #adduser
  frontend: # REPOSITORY name autheg_frontend
    build:
      context: autheg-frontend
      args:
        UID: ${UID:-1001}
    volumes:
      - ./autheg-frontend:/usr/src/app
    ports:
      - "3000:3000"
    user: frontend # adduser

다음 명령어 실행

docker-compose build

(참고 : # docker images)

docker-compose run -u root backend bundle

(참고 : # docker ps -a)

docker-compose run frontend yarn

(참고 :# docker ps -a)

autheg-backend/config/database.yml 파일 편집

default: &default
   adapter: postgresql
   encoding: unicode
   host: db             # 추가
   username: postgres   # 추가 

autheg-frontend/package.json 파일 편집

"private": true,
   "scripts": {
     "dev": "HOST=0.0.0.0 nuxt",  # 
     "build": "nuxt build",
     "start": "nuxt start",
     "generate": "nuxt generate",

HOST=0.0.0.0 nuxt so it’s visible on your host machine

다음 명령어로, development database 생성

docker-compose run backend bin/rails db:create

(참고)

docker exec -it autheg_db_1 bash
su - postgres
psql -ls

컨테이너 기동

docker-compose up
# docker-compose stop
# docker-compose down

rails : http://localhost:8080/

nuxt : http://localhost:3000/

이제 로컬 주소로 레일즈와 nuxt 기본 화면을 확인 할 수 있음.

(이때 nuxt 에서 에러가 나올 수도... 다른 게시글의 메모 참조...)