以前作ったRails5.2 + AdminLTE2のDocker開発環境をRails6とAdminLTE3にアップデートしてみます。
ruby/Rails/AdminLTEのバージョンアップ
Dockerイメージをruby:2.6-alpine3.9
に更新します。
Railsは現時点で6.0.0.beta3
が最新です。
AdminLTEは最新版``を使います。
このステップはほぼ問題なく突破できました。
参考:
Webpackerの設定
ここからは結構ハードルが高くなります。
Rails6からWebpackerがデフォルトになるようです。選択としては以下です。
- WebpackerでJavascript、CSS、imageすべて処理する
- WebpackerでJavascriptを処理して、Sprocketsでimage assetsとCSSを引き続き処理する
- Webpackerを削除して、もともと使っていたSprocketsのみで継続
- Webpackerを削除して、Webpackに移行する(!!)
4.は学習コストが高いので今度にしました。
3.は簡単でしょうけどあまり面白くなくて選択外にしました。
1.は途中で断念して2.にしました。Webpackerの学習コストもそれなりにあります。
大きいポイントとしては以下です。
- 依存ライブラリを参照する
application.js
は別のディレクトリに移動し、Webpackerで管理する。 - Webpackerの追加設定でjqueryを認識させる必要がある。
config/webpack/environment.js
const { environment } = require('@rails/webpacker')
const webpack = require('webpack')
environment.plugins.prepend(
'Provide',
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
})
)
module.exports = environment
結果的に動きました!ただ、icheck.jsのエラーだけは解消できませんでした。。
参考:
- https://github.com/rails/webpacker
- https://github.com/rails/webpacker/blob/master/docs/docker.md
- https://qiita.com/park-jh/items/dd279b6addf2c29202c3
- https://techracho.bpsinc.jp/hachi8833/2018_05_17/56568
Webpackerを単独コンテナで動かす
以下手動で設定します、まだ自動化していません。
config/environments/development.rb
config.webpacker.check_yarn_integrity = false
config/webpacker.yml
development:
dev_server:
host: webpacker
hmr: true
これでWebpackerが新しいコンテナで起動して、webpack-dev-server
がHot Reload Modeで動きます。
# アプリやDBファイルを削除
$ rm -rf rails-app mysqldata
# 最初から作り直して動作確認する
$ docker-compose -f docker/docker-compose.create-rails.yml up --force-recreate
$ docker-compose -f docker/docker-compose.dev.yml build
$ docker-compose -f docker/docker-compose.dev.yml up
参考: