はじめに

タイトルの技術でポートフォリオを作成する予定です。メモとして記事を作成しました。

アプリ構成


バックエンド	Rails
フロントエンド	Vue.js
webサーバー	Nginx
DB	MySQL

ディレクトリ&ファイルの作成

ディレクトリ構造は以下の通りです。

ルートディレクトリ

├── .env
├── .gitignore # .envを記載
├── backend
│   ├── Dockerfile
│   ├── Gemfile
│   ├── Gemfile.lock
│   └── entrypoint.sh
├── docker-compose.yml
├── frontend
│   └── Dockerfile
└── web
    ├── Dockerfile
    └── nginx.conf

docker-compose

docker-compose.yml

version: '3.8'

services:

  db:
    image: mysql:8.0.33

    command: --default-authentication-plugin=mysql_native_password
    
    volumes:
      - db_data:/var/lib/mysql
    
    environment:
      MYSQL_ROOT_PASSWORD: $MYSQL_ROOT_PASSWORD

  backend:
    
    build:
      context: ./backend
      
      args:
        WORKDIR: $WORKDIR
    
    volumes:
      - "./backend:/$WORKDIR"
    
    environment:
      MYSQL_ROOT_PASSWORD: $MYSQL_ROOT_PASSWORD
    
    ports:
      - "8000:3000"
    
    depends_on:
      - db

  web:
    build:
      
      context: ./web
    volumes:
      
      - ./web:/app/public
      
      - ./backend/tmp/sockets:/app/tmp/sockets
    ports:
      - 80:80
    
    depends_on:
      - backend

  frontend:
    
    build:
      context: ./frontend
    
      args:
        WORKDIR: $WORKDIR
    
    volumes:
      - "./frontend:/$WORKDIR"
    
    ports:
      - "5173:5173"
    
    depends_on:
      - backend

volumes:
  db_data:

【Railsの環境構築】

env

環境変数を設定します。

.env

WORKDIR=app
MYSQL_ROOT_PASSWORD=password

Gemfile&Gemfile.lock

使用するRailsのバージョンを記載します。

Gemfile

source 'https://rubygems.org'
gem 'rails', '~> 6.1.7'

Gemfile.lock

# 何も記載しない

Dockerfile(backend)

Dockerfile

FROM ruby:2.7.8-alpine

ARG WORKDIR

ARG RUNTIME_PACKAGES="bash imagemagick nodejs yarn tzdata mysql-dev mysql-client git less"
ARG DEV_PACKAGES="build-base curl-dev"

ENV HOME=/${WORKDIR}

WORKDIR ${HOME}


COPY Gemfile* ./

RUN apk update && \
    apk upgrade && \
    apk add --no-cache ${RUNTIME_PACKAGES} && \
    apk add --virtual build-dependencies --no-cache ${DEV_PACKAGES} && \
    bundle install -j4 && \
    apk del build-dependencies

COPY . ./

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


CMD ["bundle", "exec", "puma", "-C", "config/puma.rb"]

entrypoint.sh

entrypoint.sh

#!/bin/bash
set -e

# Remove a potentially pre-existing server.pid for Rails.
rm -f /app/tmp/pids/server.pid

# Then exec the container's main process (what's set as CMD in the Dockerfile).
exec "$@"

バックエンドのプロジェクトを作成

# docker-composeのwebとfrontendをコメントアウトしてビルドする
docker compose build

# 作成されたbackendのコンテナ上でrails newする
docker-compose run --rm backend rails new . -f -B -d mysql --api --skip-test --skip-turbolinks

database.yml

dbのコンテナに接続できるように編集します。

database.yml

# 〜省略〜

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

development:
  <<: *default
  database: app_development

# 〜省略〜

DB作成

# database.ymlの編集を反映させる
docker compose build

# DBを作成
docker-compose run --rm backend rails db:create

【RailsとNginxの設定】

Nginxでリバースプロキシを立てる設定をしていきます。

pumaの設定ファイルにソケットを作成するコードを追加します。

/config/puma.rb

# ~省略~

bind "unix:///app/tmp/sockets/puma.sock"

nginx.conf

nginx.conf

upstream app {
  server unix:///app/tmp/sockets/puma.sock;
}

server {
  listen 80;
  server_name localhost;

  root /app/public;

  try_files  $uri/index.html $uri @app;

  location @app {
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_pass http://app;
  }
}

Dockerfile(web)

Dockerfile

FROM nginx:1.24.0-alpine

# デフォルトの設定ファイルを削除
RUN rm -f /etc/nginx/conf.d/*

# 独自の設定ファイルを配置
COPY nginx.conf /etc/nginx/conf.d/custom.conf

# frontendをコマンドアウトしてビルド
docker compose build

動作確認

docker compose up

http://localhostにアクセスします。起動画面が出力されればOKです。

【Vueの環境構築】

Dockerfile(Vue)

Dockerfile

FROM node:18.16.0-alpine

ARG WORKDIR

ENV HOME=/${WORKDIR}

WORKDIR ${HOME}

RUN apk update && npm install -g npm

CMD ["npm", "run", "dev"]

フロントエンドのプロジェクト作成

# frontendのコメントアウトを外してビルド
docker compose build

# frontendのコンテナに接続
docker-compose run frontend ash

# コンテナ上でプロジェクト作成
npm init vite@latest

# 生成されたファイルをapp配下へ移動
/app  ls -a
.            ..            .ash_history  .npm          Dockerfile    vite-project
/app  mv vite-project/* /app/
/app  mv vite-project/.gitignore /app/
/app  mv vite-project/.vscode /app/
/app  rmdir vite-project
/app  ls
Dockerfile      README.md       index.html      package.json    public          src             vite.config.js
/app  
/app  ls -a
.              .ash_history    .npm            Dockerfile      index.html      public          vite.config.js
..             .gitignore      .vscode         README.md       package.json    src

# ライブラリをインストール
npm install

ブラウザからfrontendのコンテナにアクセスできるようにviteの設定ファイルを編集します。

vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  // 追加
  server:{
    host: true
  }
})

動作確認

# コンテナ起動
docker compose up

http://localhost:5173/にアクセスします。起動画面が出力されればOKです。

あとがき

最低限の環境構築ができました！これからaxiosの設定などの記事を作成していく予定です。