Zenn
📦

docker-compose 下で rails new して Rails6+Simpacker+Parcel 環境を作る

2020/11/25に公開
Rails
parcel
Simpacker
tech

TL;DR

自分の Rails6 環境の標準を整えたい

前回、Nginx+Rails6.0+MySQL8.0+Adminer：docker-compose で rails new という記事を上げました。
ただ、あれをやってた感想として以下があります。

  • 何も考えずに rails new すると余計なものが色々入って邪魔
  • webpacker がちょっといじりづらい

最終的には Parcel も使わず yarn script だけで完結する環境を目標にしています。
しかし、view 側で javascript_pack_tag といったヘルパーは使いたい。
そんな時に便利なのが Simpacker なんですが
Simpacker に必要な manifest.json の生成をどうやってやるのか、という問題があります。
簡単なスクリプトを用意すればできそうだなとは思っているのですが、
まずは今回 Simpacker+Parcel の環境を作ることで
どんな挙動をするのかを確認しようと思います。

bundle init して rails new する準備をする

bundle init して rails new するまでの手順は
Nginx+Rails6.0+MySQL8.0+Adminer：docker-compose で rails new に準じます。
サクッとやっていきましょう。

# GitHub でリポジトリを作ってcloneしてくる
git clone git@github.com:<userId>/<repository>.git
# もしくは単純にディレクトリを作るだけでもOK
# mkdir myapp && cd myapp
# 準備に必要なディレクトリとファイルを用意する
mkdir -p forDocker/mysql/conf.d/
touch forDocker/mysql/conf.d/mysql.cnf
mkdir -p forDocker/rails/
touch forDocker/rails/entrypoint.sh
touch Dockerfile
touch docker-compose.yml

必要なファイルを用意していきましょう。
forDocker/mysql/conf.d/mysql.cnf

[mysqld]
default_authentication_plugin = mysql_native_password
skip-host-cache
skip-name-resolve

character-set-server = utf8mb4
collation-server = utf8mb4_unicode_ci
init-connect = SET NAMES utf8mb4
skip-character-set-client-handshake

[client]
default-character-set = utf8mb4

[mysqldump]
default-character-set = utf8mb4

[mysql]
default-character-set = utf8mb4

forDocker/rails/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 "$@"

Dockerfile

FROM ruby:2.6
RUN set -x && curl -sL https://deb.nodesource.com/setup_14.x | bash -

RUN set -x && curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - && \
    echo 'deb http://dl.yarnpkg.com/debian/ stable main' > /etc/apt/sources.list.d/yarn.list

RUN set -x && apt-get update -qq && apt-get install -yq nodejs yarn vim default-mysql-client

RUN mkdir /app
WORKDIR /app
# ※ここのコメントはあとで外す
# COPY Gemfile /app/Gemfile
# COPY Gemfile.lock /app/Gemfile.lock
# RUN bundle install
COPY . /app

# Add a script to be executed every time the container starts.
COPY ./forDocker/rails/entrypoint.sh /usr/bin/
RUN chmod +x /usr/bin/entrypoint.sh
ENTRYPOINT ["entrypoint.sh"]
EXPOSE 3000

# Start the main process.
# ※ここのコメントはあとで外す
# CMD ["rails", "server", "-b", "0.0.0.0"]

docker-compose.yml

version: '3.7'

services:
  app:
    container_name: app
    build: .
    tty: true
    stdin_open: true
    command: bash -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
    volumes:
      - .:/app
    ports:
      - "3000:3000"
    depends_on:
      - db

  db:
    image: mysql:8.0
    container_name: db
    restart: always
    volumes:
      - ./forDocker/mysql/conf.d:/etc/mysql/conf.d
      - dbvol:/var/lib/mysql
    ports:
      - "3306:3306"
    environment:
      MYSQL_ALLOW_EMPTY_PASSWORD: 1
      TZ: "Asia/Tokyo"

volumes:
  dbvol:

bundle init して rails new する

ここから先はこの後の docker-compose run --rm --service-ports app bash で
appコンテナに入ったままコマンドを実行します
（設定ファイルの編集はvimでも、作業ディレクトリをVSCodeで開いてでもなんででも大丈夫です）

docker-compose run --rm --service-ports app bash
bundle init

ここから先をちょっと変えます。まずは Gemfile を開いて

# gem 'rails' ここを
gem 'rails', '~> 6.0.3', '>= 6.0.3.4' # こう変える

次に bundle install をします。
プロジェクト単位でgemを管理したいので、--pathオプションを付与します。
--jobs は並列スレッド数です（多分）

bundle install --path vendor/bundle --jobs=4
bundle exec rails new . -B -S -T -J -d mysql --force

以下参考記事にも書いてありますが、各オプションは以下のような意味があります

  • -B

    • --skip-bundle、gemのインストール は実施しない

  • -S

    • --skip-sprockets

  • -T

    • --skip-test minitestは不要

  • -J

    • --skip-javascript
    • Simpacker をあとで入れます

  • -d mysql

    • データベースの種類指定

  • --force

    • 強制上書き

  • Webpackerはもう要らない〜 Simpacker | Qiita

Simpacker + Parcelを入れる

再度 Gemfile を開いて

...(前略)
group :development do
    gem "simpacker"  # group :development do 配下にこれを追記
...(後略)

追記したらまたコンソールに戻って

bundle install
bundle exec rails simpacker:install
...
Simpacker successfully installed 🎉 🍰
# rails simpacker:install では npm で node_modules が入るので消して yarn する
rm -rf node_modules/
rm package-lock.json
yarn install
# simpacker+parcelの準備
yarn add parcel-bundler parcel-plugin-bundle-manifest --dev

ここまで終わったら今度はいったん Rails アプリケーションの準備を整えましょう

vim config/database.yml

config/database.yml

default: &default
  adapter: mysql2
  encoding: utf8mb4
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  url: mysql2://root:@db:3306
  # username: root
  # password:
  # host: localhost

config/database.yml の編集を行ったら、データベースの準備をしてrailsを起動してみます。

bundle exec rails db:create
bundle exec rails db:migrate
bundle exec rails s -b "0.0.0.0"

http://localhost:3000/ でいつものアレが出ましたでしょうか。
OKですね。Ctrl+c でサーバを閉じましょう。

Parcel を実行し、parcel-manifest.json などを出力

次に config/simpacker.yml　を少し編集します
public/packs/manifest.json を
public/packs/parcel-manifest.json に書き換えておきます。

default: &default
  manifest_path: public/packs/parcel-manifest.json

development:
  <<: *default
  cache_manifest: false

test:
  <<: *default
  cache_manifest: false

production:
  <<: *default
  cache_manifest: true

では parcel build してみましょう。

yarn parcel build --out-dir public/packs --public-url /packs app/javascript/**.js

public/packs/parcel-manifest.json などが生成されましたね。
おつかれさまでした。

今回のリポジトリ全体はこちらです。
https://github.com/JUNKI555/rails_erb_practice02

その他の参考サイト

Discussion