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

オクト

参考

基本的には下記のQiita記事を参考にすればいける。

オクト

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

ここから拝借。

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で確認する。

参考

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

.gitignore, .envの編集

docker-compose.ymlの編集

Gemfile, Gemfile.lockの編集

Dockerfile（backend側）の編集

entrypoint.shの編集

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

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

動作確認

docker-compose.ymlの編集

Dockerfileの編集

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

yarn install

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

動作確認

`.gitignore`, `.env`の編集

`docker-compose.yml`の編集

`Gemfile`, `Gemfile.lock`の編集

`Dockerfile`（backend側）の編集

`entrypoint.sh`の編集

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

`Dockerfile`の編集

`yarn install`

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