[ 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 create-nuxt-app@v3.6.0 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

終わりに

以上で完了です、お疲れ様でした。
次回からポートフォリオの中身を作成していきます。良ければそちらもご覧ください！