丁寧にNginx + MySql + Rails6 (Using Webpacker) on Dockerな開発環境を構築します。

Nginx + MySql + Rails6 (Using Webpacker) on Dockerな開発環境を構築します。
新しくプロジェクトから作成する機会なんてそうそうないので、以下手順をできるだけ要点を抑えつつまとめました。

今回しないこと。

プロジェクトの立ち上げにコミットするために以下についてはしない。

実際のコーディングはしない。¹
RSpec, Rubocopのようなコードの品質を上げるための設定はしない。
開発効率を上げるためのgem登録などは設定しない。
i18nのような初期に設定するようなものも今回は設定しない。

asset pipelineの代わりにWebpackerを使用しています。なので、Webpackerについてはこの辺をざっと見ておくとよいです。

各バージョンについて

name	version
Ruby(on docker)	2.6.5
Ruby on Rails	6.0.3
node	10.19.0
yarn	1.22.4
bundler	2.1.4
webpacker	5.1
docker	19.03.8
docker-compose	1.25.5
MySQL(on docker)	5.7
nginx(on docker)	1.17.3

※ (on docker)は、Dockerfileで指定しているバージョンです。

Rails6ではyarnを利用するので、事前にインストールしておく。

brew install yarn

1. プロジェクト構築手順

1-1. Githubにプロジェクトを作成し、git cloneしておく。

# githubでプロジェクトを作成しておく。$ git clone git@github.com:{github_acount}/{project_name}.git
$ cd{project_name}

1-2. ruby,nodeのバージョンを指定する。

rubyとnodeのバージョンをしているするために.*-versionファイルを作成します。
※ anyenvを事前にbrew install anyenvしておくとよい。

また、rbenv, nodenvの設定については公式を参考にするとよい。

- 参考：GitHub - anyenv/anyenv: All in one for **env

1-2-1. Rubyバージョン指定

ruby : 2.6.5を指定

# インストールできるバージョンをの一覧を確認する。$ rbenv install-l$ rbenv install 2.6.5
$ rbenv local 2.6.5
$ ruby -v
ruby 2.6.5p114 (2019-10-01 revision 67812)[x86_64-darwin18]

1-2-2. Nodeバージョン指定

node : v10.19.0を指定

# インストールできるバージョンをの一覧を確認する。$ nodenv install-l$ nodenv install 10.19.0
$ nodenv local 10.19.0
$ node -v
v10.19.0

1-3 不要なファイルをコミットできないように.gitignoreを作成する。

.gitignoreを作成し、git commitしておく。
※ .gitignoreを作成するために事前にbrew install giboしておくとよい。

# .gitignoreを作成$ gibo dump macOS Node Ruby Rails VisualStudioCode > .gitignore

参考：GitHub - simonwhitaker/gibo: Easy access to gitignore boilerplates

1-4. GemfileとGemfile.lockを作成する。

$ gem install bundler
Successfully installed bundler-2.1.4
Parsing documentation for bundler-2.1.4
Done installing documentation for bundler after 1 seconds
1 gem installed

次に、Gemfileを作成する。

# Gemfileを作成する。$ bundle init

Gemfileファイルを開きrailsのgemを登録します。
バージョンについてはrails | RubyGems.orgを確認する。

./Gemfile

# frozen_string_literal: true

source "https://rubygems.org"

git_source(:github) {|repo_name| "https://github.com/#{repo_name}" }

- # gem "rails"
+ gem 'rails', '~> 6.0', '>= 6.0.3'

bundle installを実行しGemfile.lockファイルを作成します。

$ bundle install
Fetching gem metadata from https://rubygems.org/.............
Fetching gem metadata from https://rubygems.org/.
Resolving dependencies...
Using rake 13.0.1
Using concurrent-ruby 1.1.6
...
Using rails 6.0.3
Bundle complete! 1 Gemfile dependency, 43 gems now installed.
Use `bundle info [gemname]` to see where a bundled gem is installed.

Ruby on Railsプロジェクトを作成するための準備が完了しました。

2. Ruby on Railsアプリケーションを構築する。

Ruby on Railsのアプリケーションを作る。

$ bundle exec rails new .--database=mysql --skip-git--skip-test-unit--skip-sprockets

...
├─ webpack-dev-server@3.11.0
└─ ws@6.2.1
✨  Done in 3.19s.
Webpacker successfully installed

オプション	説明
.	カレントディレクトリ名がプロジェクト名
--database=mysql	databaseはmysql
--skip-git	.gitignoreを組み込まない（事前に作成済み）
--skip-test-uni	Test::Unitを組み込まない
--skip-sprockets	sprocketsを利用しない

2-1 Ruby on Railsの設定する。

2-1-1 webpackerのバージョンを最新にする。

./Gemfile

- gem 'webpacker', '~> 4.0'
+ gem 'webpacker', '~> 5.1', '>= 5.1.1'

参考：rails/webpacker

2-1-2 MySQLを利用するためにdocker-composeを用意する。

# mysqlのDockerfileとmy.cnfを用意する。# docker-compose.ymlを用意する。$ mkdir-p ./docker/mysql
$ touch ./docker/mysql/{Dockerfile, my.cnf}$ touch ./docker-compose.yml

各ファイルの記述はこちら。

./docker/mysql/Dockerfile

FROM mysql:5.7

RUN touch /var/log/mysql/mysqld.log

./docker/mysql/my.cnf

[mysqld]
collation-server=utf8mb4_general_ci
character-set-server=utf8mb4
skip-character-set-client-handshake
init-connect = SET NAMES utf8mb4
default-time-zone=+9:00
explicit-defaults-for-timestamp=1
general-log-file=/var/log/mysql/mysqld.log

[client]
default-character-set=utf8mb4

./docker-compose.yml

version:'3.3'services:database:build:context:.dockerfile:./docker/mysql/Dockerfileenvironment:MYSQL_ROOT_PASSWORD:passwordMYSQL_DATABASE:｛project_name｝_developmentports:-"3306:3306"volumes:-./docker/mysql/my.cnf:/etc/mysql/conf.d/my.cnf-./log/mysql:/var/log/mysql

mysqlアカウントでrootを利用する場合は、MYSQL_ROOT_PASSWORDを設定するだけでよい。
MYSQL_DATABASEは開発で利用するデータベース名にする。

2-1-3 Ruby on Railsのdatabase.ymlを修正する。

database.ymlを修正してrailsからmysql on dockerに接続できるようにする。

./config/database.yml

default:&defaultadapter:mysql2encoding:utf8mb4charset:utf8mb4collation:utf8mb4_general_cipool:<%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>username:rootpassword:passwordhost:127.0.0.1development:<<:*defaultdatabase:{project_name}_development

logを取得するために²

# Nginx用のlog吐き出し用$ mkdir ./log/mysql
$ touch ./log/mysql/mysqld.log

2-1-4 Ruby on Railsのディレクトリ構成を修正する。

Webpackerを利用してJS,CSS,Image等を扱うための構成にします。

$ mkdir-p ./app/javascript/{stylesheets, images}$ touch ./app/javascript/stylesheets/application.scss

2-1-5 [S]CSSファイル、ImageをWebpackerで扱う

./app/javascript/packs/application.js

- // const images = require.context('../images', true)
- // const imagePath = (name) => images(name, true)
+ const images = require.context('../images', true)
+ const imagePath = (name) => images(name, true)
+ import "../stylesheets/application";

2-1-6 stylesheet_pack_tagに切り替える。

./app/views/layouts/application.html.erb

-    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
+    <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

2-1-7 check_yarn_integrityの設定をfalseにする。

config/webpacker.yml

development:
<<: *default
  compile: true

  # Verifies that correct packages and versions are installed by inspecting package.json, yarn.lock, and node_modules
-  check_yarn_integrity: true
+  check_yarn_integrity: false

参考：webpacker の check_yarn_integrity オプションについて調べてみた

2-1-8 extract_css: false -> trueにする。

開発中でもCSSファイルを作成してほしいのでextract_cssをtrueにします。

- config/webpacker.yml

# Extract and emit a css file
- extract_css: false
+ extract_css: true

参考：webpacker/get_style_rule.js

2-1-8 assetsを生成しないようにする

./config/initializers/generators.rb

Rails.application.config.generatorsdo|g|g.assetsfalseg.test_frameworkfalseend

2-2 MySQL on Dockerを起動する。

# mysqlを起動する。$ docker-compose -d up database

mysqlを起動したらmysqlの照合順序を確認する。

mysql> show variables like '%char%';
+--------------------------+----------------------------+
| Variable_name            | Value                      |
+--------------------------+----------------------------+
| character_set_client     | utf8mb4                    |
| character_set_connection | utf8mb4                    |
| character_set_database   | utf8mb4                    |
| character_set_filesystem | binary                     |
| character_set_results    | utf8mb4                    |
| character_set_server     | utf8mb4                    |
| character_set_system     | utf8                       |
| character_sets_dir       | /usr/share/mysql/charsets/ |
+--------------------------+----------------------------+

2-3 ローカルPCからRuby on Railsを起動する。

# railsを起動する。$ bin/rails s --port=3000 -b 0.0.0.0

以下の画面が表示されればOK。

3. Ruby on Rails on Dockerを構築する。

参考：webpacker/blob/master/docs/docker.md
参考：Rails newからproductionモードで動くようになるまで

3-1. Dockerfileを作成する。

./Dockerfile

FROM ruby:2.6.5RUN curl -sL https://deb.nodesource.com/setup_10.x | bash -
RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add -
RUN echo"deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list
RUN apt-get update && apt-get install-y\
    build-essential \
    nodejs \
    yarn \
    default-mysql-client \
&& apt-get clean \
&&rm-rf /var/lib/apt/lists/*ENV LANG ja_JP.UTF-8RUN mkdir-p /app
WORKDIR /appCOPY Gemfile Gemfile.lock ./RUN gem update bundler && bundle installCOPY . .RUN yarn install--check-filesRUN yarn webpack --config ./config/webpack/development.js

CMD ["rails", "server", "-b", "0.0.0.0"]

3-2. docker-compose.ymlに`app:`を追加する。

environmentで環境変数[RAILS_HOST]にdatabaseを指定します。
- ./docker-compose.yml

version: '3.3'
services:
+  app:
+    build: .
+    command: bundle exec rails s -b 0.0.0.0
+    volumes:
+      - .:/app:cached
+    ports:
+      - 3000:3000
+    depends_on:
+      - database
+    tty: true
+    stdin_open: true
+    environment:
+      RAILS_HOST: database
  database:
    build:
      context: .
      dockerfile: ./docker/mysql/Dockerfile
    environment:
      MYSQL_ROOT_PASSWORD: password
      MYSQL_DATABASE: nginx_rails_with_webpacker_mysql_on_docker_development
    ports:
      - "3306:3306"
    volumes:
      - ./docker/mysql/my.cnf:/etc/mysql/conf.d/my.cnf
      - ./log/mysql:/var/log/mysql

docker-composeで立ち上げる場合は環境変数hostを指定し、ローカル上で起動する場合は127.0.0.1を指定する。

config/database.yml

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

3-3. Ruby on Rails on Dockerを起動する。

# Ruby on Rails + MySQL on Dockerで起動する。$ docker-compose up -d--build

ブラウザでhttp://localhost:3000にアクセスします。

改めて、Yay! You’re on Rails!の画面が表示されればOK.

4. nginx on Dockerを用意する。

Nginx（webサーバー）を用意します。

Nginx用のDockerfileとnginx.confを用意します。

# nginx用のファイルを作成する。$ mkdir-p ./docker/nginx
$ touch ./docker/nginx/{Dockerfile, nginx.conf}

各ファイルの記述はこちら。

./docker/nginx/Dockerfile

FROM nginx:1.17.3RUN mkdir-p /usr/share/nginx/public

COPY ./docker/nginx/nginx.conf /etc/nginx/conf.d/default.confCMD ["nginx", "-g", "daemon off;"]

./docker/nginx/nginx.conf

server {
  listen       80;
  server_name  web;
  root /usr/share/nginx/public;

  access_log /var/log/nginx/access.log;
  error_log /var/log/nginx/error.log;

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

  location / {
      try_files $uri @app;}

  location ~ ^/(assets|packs)/ {
    gzip_static on;
    expires max;
    add_header Cache-Control public;}

  location = /favicon.ico { access_log off; log_not_found off;}
  location = /robots.txt  { access_log off; log_not_found off;}

  location ~ /\.(?!well-known).*{
    deny all;}}

参考：webpacker/blob/master/docs/deployment.md#nginx
参考：WordPress にバックドア仕掛けられないように…³

logを取得するために

# Nginx用のlog吐き出し用$ mkdir ./log/nginx
$ touch ./log/nginx/{access.log, error.log}

docker-compose up --buildを実行します。

ブラウザでhttp://localhostにアクセスします。
改めて、Yay! You’re on Rails!の画面が表示されればOK.

5. プロジェクトをちょっとだけカスタマイズ

こちらは、やったほうがいいと思われるが任意なあれこれです。

5-1. Add SplitChunks (Webpack V4)

SplitChunksPluginとは、共通で使用するpackageのJavaScriptファイルを纏める機能のことです。
デフォルトの設定を例としてあげておきます。チューニングする場合は公式を確認する。

./config/webpack/environment.js

const { environment } = require('@rails/webpacker')
+ environment.splitChunks()

module.exports = environment

参考：split-chunks-plugin

splitChunksを利用する場合は、JavaScriptファイルを読み込むヘルパーメソッドはjavascript_packs_with_chunks_tagになる。

- <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
+ <%= javascript_packs_with_chunks_tag 'application', 'data-turbolinks-track': 'reload' %>

5-2. app/assetsを削除する。

でも、app/assets/config/manifest.jsがないと怒らせる。

Expected to find a manifest file in`app/assets/config/manifest.js`(Sprockets::Railtie::ManifestNeededError）

プロジェクト作成時に-–skip-sprocketsを実行してもsprocketsのgemはインストールされプロジェクト内部ではまだ利用しているようです。そのため、app/assets配下のManifestファイルを削除してしまうとSprockets::Railtie::ManifestNeededErrorが発生します。

参考：Exception without manifest.js in 4.0.0|rails/sprockets

対策としては、Gemfileにgem 'sprockets', '< 4'を追加し、bundle update sprocketsすると良いようです。（2020/05時点）

$ bundle update sprockets
Using sprockets 3.7.2 (was 4.0.0)

5-3. app/javascriptをapp/frontendにする。

app/javascriptからapp/frontendに変更するという記事が多いように感じます。

./config/webpacker.ymlでsource_entry_pathを指定できるのでお好みで。

./config/webpacker.yml

default: &default
- source_path: app/javascript
+ source_path: app/frontend
  source_entry_path: packs
  public_root_path: public
  public_output_path: packs
  cache_path: tmp/cache/webpacker
  check_yarn_integrity: false
  webpack_compile_output: true

5-4. ブラウザにlocalhostとか127.0.0.1とか0.0.0.0と入れるのはちょっと。

sudo vi /etc/hostsを実行し、HOST DATABASEにお好みのドメイン名を追加する。

保存してブラウザでdev-application.localhostと入力してみよう。

127.0.0.1       dev-application.localhost

5-5. docker-compose upで、`A server is already running. Check /app/tmp/pids/server.pid.`と言われて起動できない。

今回環境構築するために何度かdocker-compose upを実行しました。その時に当該事象が発生しました。
これはdocker-composeのバグないそうですが、よく起きている事象のようです。
対策は、調べた限りですが２つあります。⁴

5-5-1. 対処方法 1

docker-compose.ymlのcommandでbundle exec rails s..の前に削除コマンドを仕込む方法です。

command: bash -c"rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"

5-5-1. 対処方法 2

DockerのCMDにスクリプトを登録しておく。
対応していることはtmp/pids/server.pidを削除するということは一緒ですが、スクリプトにすることで実行時に事前に行いたい処理を追加していくことができます。ワンライナーなスクリプトよりも見通しがいいのでこちらもおすすめです。

# DockerCMD [foreground]

# foreground.sh#!/bin/bashset-erm-f tmp/pids/server.pid

bin/rails s -b 0.0.0.0 -p 3000

参考：httpd/2.4/httpd-foreground

5-6. webpack-dev-server on Dockerを用意する。

webpack-dev-serverをDockerで構築します。⁵
Dockerで構築するほうがいい理由についてはまだ腹落ちしていないため任意

# ./docker-compose.yml
version: '3.3'
services:
  web:
    build:
      context: .
      dockerfile: ./docker/nginx/Dockerfile
    volumes:
      - ./public:/usr/share/nginx/public:cached
      - ./log/nginx:/var/log/nginx
    ports:
      - 80:80
    depends_on:
      - app
  app:
    build: .
    command: bash -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
    volumes:
      - .:/app:cached
    ports:
      - 3000:3000
    depends_on:
      - database
    tty: true
    stdin_open: true
    environment:
      RAILS_HOST: database
+     WEBPACKER_DEV_SERVER_HOST: webpacker
+ webpacker:
+   build: .
+   command: ./bin/webpack-dev-server
+   volumes:
+     - .:/webpacker-example-app
+   ports:
+     - '3035:3035'
+   tty: true
+   stdin_open: true
+   environment:
+     - NODE_ENV=development
+     - RAILS_ENV=development
+     - WEBPACKER_DEV_SERVER_HOST=0.0.0.0
+   depends_on:
+     - app
  database:
    build:
      context: .
      dockerfile: ./docker/mysql/Dockerfile
    environment:
      MYSQL_ROOT_PASSWORD: password
      MYSQL_DATABASE: nginx_rails_with_webpacker_mysql_on_docker_development
    ports:
      - "3306:3306"
    volumes:
      - ./docker/mysql/my.cnf:/etc/mysql/conf.d/my.cnf
      - ./log/mysql:/var/log/mysql

./docker/nginx/nginx.conf

server {
  listen       80;
  server_name  web;
  root /usr/share/nginx/public;

  access_log /var/log/nginx/access.log;
  error_log /var/log/nginx/error.log;


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

  location / {
      try_files $uri @app;
  }

  location ~ ^/(assets|packs)/ {
    gzip_static on;
    expires max;
    add_header Cache-Control public;`v
  }

  location = /favicon.ico { access_log off; log_not_found off; }
  location = /robots.txt  { access_log off; log_not_found off; }

+  # Proxy webpack dev server websocket requests
+  location /sockjs-node {
+      proxy_redirect off;
+      proxy_http_version 1.1;
+      proxy_set_header Upgrade $http_upgrade;
+      proxy_set_header Connection "upgrade";
+      proxy_pass http://127.0.0.1:3035; # change to match your +webpack-dev-server host
+  }

  location ~ /\.(?!well-known).* {
    deny all;
  }
}