% RailsでWebpackerを使おう % ka % 2018-07-29
ka
Website: kaosfield
Twitter: ka
GitHub: kaosf
Copyright (C) 2018 ka
https://kaosf.github.io/20180729-tokushimarb-slide
Repository: kaosf/20180729-tokushimarb-slide - GitHub
Dockerのインストール (DBのため)
Node.jsとYarnのインストール (Webpackerのため)
Rubyのインストール (言わずもがな)
- Docker: https://docs.docker.com/install/#supported-platforms
- Node.js: nodebrewとかnodenvとか好きに使うと良いです
- nodebrew: https://github.com/hokaccha/nodebrew (私はnodebrew使ってる)
- Yarn: https://yarnpkg.com/lang/ja/docs/install/#arch-stable
sudo docker run -d --restart=always -p 15432:5432 postgres:10.3
または
sudo docker run -d --restart=always -e MYSQL_ALLOW_EMPTY_PASSWORD=yes -p 13306:3306 mysql:5.7.22
これに
- host: localhost
- port: 15432 (MySQLなら 13306)(ここは各自が自由に変える)
- user: postgres (MySQLなら root)
- password: "" (無し)(空文字列)
で接続するのが簡単で環境を汚しません
※SQLite3を使うのは個人でやるもの以外ではよほどの理由が無い限りやめましょう
rails new my_webpacker_app -d postgresql
# or
bundle exec rails new my_sample_app -d mysql
# などなど…
Gemfile
に以下を追加して
gem 'webpacker', '3.5.0'
Gemfile.lock
更新
bin/bundle install
# or
bin/bundle install --path vendor/bundle
実はRails 5.1からは
rails new --webpack
オプションが使えました(気付かなかった)
と言ってもGemfileの更新までやってくれてるだけっぽいので気にしなくて良いです(多分)
bin/rails webpacker:install
時間掛かります
bin/yarn install
時間掛かります
bin/yarn add bootstrap
package.json
は手動で編集しない方が良いです
yarn.lock
も同時に変更されます
app/javascript/packs/application.js
を編集
-console.log('Hello World from Webpacker')
+import '../stylesheet'
app/javascript/stylesheet.scss
を作成
@import "~bootstrap/scss/bootstrap";
なんか変な感じですがWebpackerで扱うCSSはapp/javascript
内に置きます
bin/yarn add rails-ujs
app/javascript/packs/application.js
を以下のように編集します
// layout file, like app/views/layouts/application.html.erb
+import Rails from 'rails-ujs'
+Rails.start()
+
import '../stylesheet'
これが無いと例えばRailsがscaffoldで生成するdestroyアクションのあのボタンとかがちゃんと動きません
app/views/layouts/application.html.erb
を編集
- <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
- <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
+ <%= javascript_pack_tag 'application' %>
+ <%= stylesheet_pack_tag 'application' %>
参考 https://github.com/rails/webpacker#usage
これでwebpackerの導入はおしまい
後は
bin/rails assets:precompile
を通常通りに行います
成果物が public/packs
に出来上がるのでこれを本番環境にコピーしてやります
※本番環境で作らないのか?という理由は後ほど
本番稼働時の想定
永続化するものを確保する場所作成
sudo mkdir -p /var/docker/rails
sudo mkdir /var/docker/rails/bundle
sudo mkdir /var/docker/rails/log
sudo mkdir /var/docker/rails/tmp
sudo mkdir /var/docker/rails/pack
sudo chmod o+w /var/docker/rails/pack
※別に /var/docker
とかで無く /Users/yourname/foo/bar
でも何処でも良いです
本番稼働時の想定
※今のディレクトリ($PWD
)がRailsのプロジェクトルートだとします
sudo docker run -it \
-v $PWD:/app \
-v /var/docker/rails/bundle:/usr/local/bundle \
-v /var/docker/rails/log:/app/log \
-v /var/docker/rails/tmp:/app/tmp \
-v /var/docker/rails/pack:/app/public/pack \
-w /app \
-p 3000:3000 \
-e TZ=Asia/Tokyo \
-e DATABASE_URL=postgres://postgres:@172.17.0.1:15432/db \
-e RAILS_ENV=production \
-e RAILS_MASTER_KEY=xxxx \
-e RAILS_SERVE_STATIC_FILES=1 \
ruby:2.5.1 bash
MySQLの人は
-e DATABASE_URL=mysql2://root:@172.17.0.1:13306/db \
に読み替えて下さい
RAILS_MASTER_KEY
にはconfig/master.key
の値を設定して下さい(※勝手に作られてるはず)
※コンテナから見たホストが 172.17.0.1
になります
※ネットワークを別途構築したりした場合の解説は省略
Bundlerがgemをインストールする場所は /usr/local/bundle
です
参考: 該当箇所
bin/bundle install --path vendor/bundle
しても結局 .bundle ディレクトリが作られない(設定が保存されない)ので --path vendor/bundle
オプションは使わないが吉
gemをインストールした状態を使いまわしたいなら大人しくホストに永続化して /usr/local/bundle
にマウントしましょう
もしくは Dockerfile でgemのインストールまで終わらせたイメージでも作っておいてプライベートレジストリに上げておくとデプロイは多分これが一番早いと思います
残念ながらRubyのオフィシャルコンテナにはYarnは入っていません
インストールするにはDockerfileに以下を追記すると良いでしょう
# Node.js
ENV PATH /root/.nodebrew/current/bin:$PATH
RUN curl -L git.io/nodebrew | perl - setup && \
nodebrew install-binary v9.11.2 && \
nodebrew use v9.11.2
# Yarn
RUN apt-get update && apt-get -y install apt-transport-https && \
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - && \
echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list && \
apt-get update && apt-get -y install yarn
- https://github.com/hokaccha/nodebrew
- https://yarnpkg.com/lang/en/docs/install/#debian-stable
- http://scribble.washo3.com/linux/debian%E3%81%A7sourcelist%E5%86%85%E3%81%AEhttp...
手元で作っておいた public/packs/*
を /var/docker/rails/packs
にコピーすればOKです
sudo rm /var/docker/rails/packs/*
sudo cp public/packs/* /var/docker/rails/packs
db/schema.rb
をきちんと用意しておきます
config/database.yml
を以下のように編集しておきます
# http://guides.rubyonrails.org/configuring.html#database-pooling
pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
+ user: <%= ENV.fetch("DB_USER") { 'postgres' } %>
+ password: <%= ENV.fetch("DB_PASSWORD") { '' } %>
+ host: <%= ENV.fetch("DB_HOST") { '127.0.0.1' } %>
+ port: <%= ENV.fetch("DB_PORT") { 5432 } %>
development:
MySQLの人はデフォルト値を root
, 3306
などとしておきましょう
export DB_PORT=15432
# export DB_HOST=example.com # 必要に応じて追加
bin/rails db:create
bin/rails db:migrate
※開発時にDATABASE_URL
を指定するのはdevelopmentとtestのDB名が衝突するため非常に面倒になるのでやめときます
※ていうか今回の所詮デモであれば config/database.yml
に直書きしても支障はありません
bin/rails g controller home index
app/views/home/index.html.erb
編集
<div class="container">
<div class="row">
<div class="col-4">col-4</div>
<div class="col-8">col-8</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-12">col-md-4 col-sm-12</div>
<div class="col-md-8 col-sm-12">col-md-8 col-sm-12</div>
</div>
</div>
本番環境でJSのランタイムが無いよと言われないようにしておきます
Gemfile
のmini_racer
というgemのコメントアウトを外してbin/bundle install
します
Rubyのコンテナで動いているbash上で以下を実行すればOKです
bin/bundle install
bin/rails db:setup
bin/rails s
※雑ですが本気でやりたい人は config/puma.rb
をちゃんと編集して
bin/bundle exec pumactl start
とかやって下さい
bin/webpack-dev-server
を起動しておく(※bin/rails s
と別に)と,CSSやJSを編集したときにブラウザを自動で更新してくれます
便利