Zenn
Open16

Docker x Vite(Vue) x Rails 環境構築

Docker
Rails
Vue.js
docker-compose
Vite
オクトオクト

プロジェクトの骨組みを作成する

ここから拝借。

Terminal
.
├── docker-compose.yml
├── .env
├── .gitignore
├── backend
│   ├── Dockerfile
│   ├── Gemfile
│   ├── Gemfile.lock
│   ├── entrypoint.sh
├── frontend
   　　└── Dockerfile
オクトオクト

.gitignore, .envの編集

.gitignore
.env
.env
WORKDIR=hoge  // hogeの部分を編集
MYSQL_ROOT_PASSWORD=fuga  // fugaの部分を編集
オクトオクト

docker-compose.ymlの編集

まずはbackend側の編集。
コマンドの詳しい部分はこちらで説明している。
上記にはない部分はコメントで解説。

docker-compose.yml
version: '3.8'
services:
  db:
    image: mysql:8.0.31
    command: --default-authentication-plugin=mysql_native_password
    restart: always
    volumes:
      - mysql-store:/var/lib/mysql
    environment:
      MYSQL_ROOT_PASSWORD: $MYSQL_ROOT_PASSWORD  #=== .envの環境変数から持ってくる
    ports:
      - '3306:3306'
  backend:
    build:
      context: ./backend
      dockerfile: Dockerfile
      args:  #=== Dockerfileに引数として渡せる
        WORKDIR: $WORKDIR
    command: bash -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
    ports:
      - '3000:3000'
    volumes:
      - ./backend:/$WORKDIR
      - gem-store:/usr/local/bundle
    environment:  #=== 環境変数の設定
      TZ: Asia/Tokyo
      RAILS_ENV: development
      MYSQL_ROOT_PASSWORD: $MYSQL_ROOT_PASSWORD
    depends_on:
      - db
    stdin_open: true
    tty: true
volumes:
  mysql-store:
  gem-store:

環境変数がちゃんと設定されているか以下のコマンドで確認できる。

Terminal
$ docker-compose config
オクトオクト

Gemfile, Gemfile.lockの編集

正確にはGemfileのみ編集する。
今回はRaile7を使用する。

Gemfile
source "https://rubygems.org"
gem "rails", "~> 7.0.4"
オクトオクト

Dockerfile（backend側）の編集

これもここで説明している。
それ以外はコメントに残す。

Dockerfile
#=== 軽量slim系イメージを使用。
FROM ruby:3.1.2-bullseye
#=== docker-compose.ymlから渡されたもの
ARG WORKDIR
#=== インストールするパッケージ
ARG RUNTIME_PACKAGES="build-essential tzdata git less"

ENV HOME=/${WORKDIR}

WORKDIR ${HOME}

RUN apt-get update \
    && apt-get install -y --no-install-recommends ${RUNTIME_PACKAGES} \
    && apt-get clean \
    && rm -rf /var/cache/apt/archives/* \
    && rm -rf /var/lib/apt/lists/* /tmp/* /var/tmp/*

COPY Gemfile /app/Gemfile
COPY Gemfile.lock /app/Gemfile.lock

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

#=== Bundlerを最新のものに
RUN gem update --system \
    && gem install bundler
RUN bundle install

COPY . ./
COPY entrypoint.sh /usr/bin/
RUN chmod +x /usr/bin/entrypoint.sh
ENTRYPOINT ["entrypoint.sh"]

EXPOSE 3000
CMD ["rails", "server", "-b", "0.0.0.0"]
オクトオクト

entrypoint.shの編集

これもここで詳しく説明している。

entrypoint.sh
#!/bin/bash
set -e

rm -f /app/tmp/pids/server.pid

exec "$@"
オクトオクト

バックエンド側をビルドしてプロジェクトを新規作成する

Terminal
$ docker-compose build           
db uses an image, skipping
Building backend
[+] Building 13.5s (15/15) FINISHED                                                                                                                                                                         
 => [internal] load build definition from Dockerfile                                                                                                                                                   0.0s
[...]
 => => exporting layers                                                                                                                                                                                0.3s 
 => => writing image sha256:6b8c72c9c87fe2450d51278882aa802c1cb9ab14bf5bf74e25d6ad3d487a0581                                                                                                           0.0s 
 => => naming to docker.io/library/dela_backend                                                                                                                                                        0.0s

エラーを吐かなければ成功。
次にプロジェクト作成。

コマンド引数の詳細(ここから拝借)

### rails new オプション補足 ###
# -f　　　既にあるファイルを上書き(Gemfile/Gemfile.lock)
# -B　　　bundle installコマンドを実行しない
# -d　　　データベースを指定(デフォルトはsqlite)
# --api　　　APIモードで作成する
# --skip-test　　　minitestを作成しない
# --skip-turbolinks　　　turbolinksを作成しない

ちなみにnewの後に.を置いているのはディレクトリを作成せず、ルートディレクトリにappディレクトリなどを生成する。

Terminal
$ docker-compose run --rm backend rails new . -f -B -d mysql --api --skip-test --skip-turbolinks
Creating network "xxx_default" with the default driver
Creating volume "xxx_mysql-store" with default driver
Creating volume "xxx_gem-store" with default driver
Creating xxx_db_1 ... done
Creating xxx_backend_run ... done
       exist  
      create  README.md
      create  Rakefile
      create  .ruby-version
[...]

特に問題なければ成功。

オクトオクト

backend/config/database.ymlにコードを追加編集

hostをdocker-compose.ymlに記載したサービス名, passwordを.envに記載したものをENVで取得する。
DB名は各自で編集する。

backend/config/database.yml
default: &default
  adapter: mysql2
  encoding: utf8mb4
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  host: db
  username: root
  password: <%= ENV['MYSQL_ROOT_PASSWORD'] %>

development:
  <<: *default
  database: xxx_development
オクトオクト

動作確認

Terminal
$ docker-compose build

$ docker-compose run --rm backend bundle install

$ docker-compose run --rm backend rails db:create

$ docker-compose up

localhost:3000にアクセスして初期画面が表示されるか確認する。

オクトオクト

docker-compose.ymlの編集

次はfrontendの編集。

docker-compose.yml
version: '3.8'
services:
  #=== 以下をbackend下に記述。
  frontend:
    build:
      context: ./frontend
      dockerfile: Dockerfile
      args:
        WORKDIR: $WORKDIR
    volumes:
      - ./frontend:/$WORKDIR:cached
    ports:
      - '5173:5173'
    depends_on:
      - backend
    tty: true
    command: yarn dev --host
volumes:
  mysql-store:
  gem-store:
オクトオクト

Dockerfileの編集

Dockerfile
FROM node:16.17.1-bullseye
ARG WORKDIR

ENV HOME=/${WORKDIR}

WORKDIR ${HOME}

RUN apt update \
    && yarn install

EXPOSE 5173
CMD ["yarn", "dev", "--host"]
オクトオクト

フロント側をビルドしてプロジェクトを新規作成する

まずはビルドする。

Terminal
$ docker-compose build
db uses an image, skipping
Building backend
[+] Building 17.5s (16/16) FINISHED                                                                                                                                                                         
 => [internal] load build definition from Dockerfile                                                                                                                                                   0.0s
 => => transferring dockerfile: 37B                                                                                                                                                                    0.0s
[...]
Building frontend
[+] Building 5.5s (10/10) FINISHED                                                                                                                                                                          
 => [internal] load build definition from Dockerfile                                                                                                                                                   0.0s
 => => transferring dockerfile: 214B                                                                                                                                                                   0.0s
[...]

プロジェクトの新規作成。

Terminal
$ docker-compose run --rm frontend npm init vite@latest
Starting xxx_db_1 ... done
Starting xxx_backend_1 ... done
Creating xxx_frontend_run ... done
Need to install the following packages:
  create-vite@3.1.0
Ok to proceed? (y) y
✔ Project name: … vite-project
✔ Select a framework: › Vue
✔ Select a variant: › JavaScript

Scaffolding project in /app/vite-project...

Done. Now run:

  cd vite-project
  npm install
  npm run dev

プロジェクトの整理

Terminal
$ ls -A frontend/vite-project 
.gitignore     .vscode        README.md      index.html     package.json   public         src            vite.config.js

$ mv frontend/vite-project/* /app/
mv: /app/ is not a directory

$ mv frontend/vite-project/* frontend 

$ ls -A frontend/vite-project        
.gitignore .vscode

$ mv frontend/vite-project/.gitignore frontend/ && mv frontend/vite-project/.vscode frontend 

$ ls -A frontend/vite-project

$ rmdir frontend/vite-project
オクトオクト

yarn install

yarnを使用するため以下を実行する。
npmのままがいい方は、yarn installのところをnpm installに置き換える。

Terminal
$ docker-compose run --rm frontend yarn install        
Creating volume "xxx_node_modules" with default driver
Creating xxx_frontend_run ... done
yarn install v1.22.19
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
Done in 24.86s.
オクトオクト

Dockerfile / docker-compose.yml の追加記述

Dockerfile
FROM node:16.17.1-bullseye
ARG WORKDIR

ENV HOME=/${WORKDIR}

WORKDIR ${HOME}

RUN apt update \
    && yarn install

#=== 以下を追加
COPY . ./
COPY package.json /app/package.json
COPY yarn.lock /app/yarn.lock

EXPOSE 5173
#=== 以下を追加
CMD ["yarn", "dev", "--host"]
docker-compose.yml
version: '3.8'
services:
  [...]
  frontend:
    build:
      context: ./frontend
      dockerfile: Dockerfile
      args:
        WORKDIR: $WORKDIR
    volumes:
      - ./frontend:/$WORKDIR:cached
      #=== 以下を追加。
      - node_modules:/$WORKDIR/node_modules
    ports:
      - '5173:5173'
    depends_on:
      - backend
    tty: true
    command: yarn dev --host
volumes:
  mysql-store:
  gem-store:
 #=== 以下を追加。
  node_modules:
オクトオクト

動作確認

Terminal
$ docker-compose build --no-cache

$ ❯ docker-compose up

localhost:5157で確認する。