[Rails & Nuxt] Docker로 개발 환경 구축

No.
제목


1
Docker로 개발 환경 구축

2
로그인 인증 기능을 구현

3
기사 게시 기능 구현

4
AWS ECS를 사용하여 배포

5
Circle CI를 사용한 자동 테스트 • 배포

소개

※첫 투고이므로 다소 읽기 어려운 것은 용서해 주세요!

본 기사는 제가 엔지니어로서 취업할 때 포트폴리오를 완성하기까지의 과정을 간단히 정리한 것입니다. 해설서라기보다는 절차서라는 감각으로 읽어 주시면 좋겠습니다.

전 5부 구성으로 Docker, CircleCI, AWS 등 현대적인 기술을 포함한 작품을 완성시킬 예정입니다.
이 장에서는 Docker를 로컬 환경에 도입하여 개발 환경을 구축하는 문구까지 진행합니다.

사전 지식

Docker는 뭐라고 하는 분은 이하의 학습을 추천합니다!
↓ AWS 공식 해설. 전반부에서 Docker의 개념에 대해 알기 쉽게 해설되고 있다.

↓ Docker의 기초를 핸즈온 형식으로 배울 수 있습니다.

Docker 설치

Docker 환경 구축

먼저 다음 디렉토리 & 파일을 만드십시오.
Gemfile.lock의 내용은 비어 있고 괜찮습니다.

sample
  |-docker-compose.yml
  |-front
  |  |-Dockerfile  
  |  
  |-back
     |-Dockerfile  
     |-Gemfile
     |-Gemfile.lock

back/Dockerfile

FROM ruby:2.6.3-alpine3.10

ENV RUNTIME_PACKAGES="linux-headers libxml2-dev make gcc libc-dev nodejs tzdata mysql-dev mysql-client yarn" \
    DEV_PACKAGES="build-base curl-dev" \
    HOME="/app" \
    LANG=C.UTF-8 \
    TZ=Asia/Tokyo

WORKDIR ${HOME}

COPY Gemfile ${HOME}/Gemfile  
COPY Gemfile.lock ${HOME}/Gemfile.lock

RUN apk update && \
    apk upgrade && \
    apk add --update --no-cache ${RUNTIME_PACKAGES} && \
    apk add --update --virtual build-dependencies --no-cache ${DEV_PACKAGES} && \
    bundle install -j4 && \
    apk del build-dependencies && \
    rm -rf /usr/local/bundle/cache/* \
    /usr/local/share/.cache/* \
    /var/cache/* \
    /tmp/* \
    /usr/lib/mysqld* \
    /usr/bin/mysql*

front/Dockerfile

FROM node:16.3.0-alpine

ENV HOME="/app" \
    LANG=C.UTF-8 \
    TZ=Asia/Tokyo

ENV HOST 0.0.0.0

WORKDIR ${HOME}

RUN apk update && \
    apk upgrade && \
    yarn install &&\
    rm -rf /var/cache/apk/*

Gemfile

source 'https://rubygems.org'
gem 'rails', '6.1.3.2'

docker-compose.yml

version: "3"

services:
  db:
    image: mariadb:10.4 
    environment:
      MYSQL_ROOT_PASSWORD: password
      MYSQL_DATABASE: touhou
    ports:
      - '3306:3306'
    restart: always
    volumes:
      - sample-db:/var/lib/mysql 

  back:
    build: ./back 
    command: /bin/sh -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0' " 
    volumes:
      - ./back:/app:cached 
    stdin_open: true
    tty: true
    depends_on:
      - db 
    ports:
      - 3000:3000 

  front:
    build: ./front
    command: yarn run dev
    volumes:
      - ./front:/app:cached
    ports:
      - 8000:3000

volumes:
  sample-db:

작성이 끝나면 다음 명령을 실행하십시오.

#Dockerfileを基にコンテナを作成
[sample]$: docker-compose build
#RailsAPIの作成
[sample]$: docker-compose run back rails new . -f -d mysql --api --skip-test
#Nuxtアプリの作成
[sample]$: docker-compose run front npx [email protected] front2
# 以下のような選択画面が出ます。
? Project name                   --> Sample
? Programming language           --> javascript
? Package manager                --> Yarn
? UI framework                   --> bootstrap-vue
? Nuxt.js modules                --> Axios
? Linting tools                  --> ESlint
? Testing framework              --> None
? Rendering mode                 --> Universal
? Development tools              --> None
? Github name                    --> 任意
? Version control system         --> Git

Nuxt 앱을 만든 후 front2 디렉토리의 내용을 모두 front 디렉토리로 이동시킵니다. 그렇다면 front2는 삭제하고 OK입니다.

데이터베이스 설정

mariadb의 컨테이너를 사용하도록 다시 씁니다.

config/database.yml

default: &default
  adapter: mysql2
  encoding: utf8mb4
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: root
  password: password
  host: db

development:
  <<: *default
  database: app_development

test:
  <<: *default
  database: app_test

production:
  <<: *default
  database: app_production

$: docker-compose build
$: docker-compose run back rails db:create
$: docker-compose run back rails db:migrate

이상으로 구축 완료입니다!
컨테이너를 시작하면 localhost:3000 또는 localhost:8000에 액세스할 수 있는 것을 확인할 수 있다고 생각합니다.

$: docker-compose up

localhost:8000

localhost:3000

끝에

이상으로 완료되었습니다, 수고하셨습니다.
다음 번부터 포트폴리오의 내용을 작성하겠습니다. 좋으면 그쪽도 봐 주세요!