3
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Rails 6.0.0-beta3 と AdminLTE 3 の Docker開発環境を作る

Last updated at Posted at 2019-03-14

以前作ったRails5.2 + AdminLTE2のDocker開発環境をRails6とAdminLTE3にアップデートしてみます。

ruby/Rails/AdminLTEのバージョンアップ

Dockerイメージをruby:2.6-alpine3.9に更新します。
Railsは現時点で6.0.0.beta3が最新です。
AdminLTEは最新版``を使います。

このステップはほぼ問題なく突破できました。

コミット

参考:

Webpackerの設定

ここからは結構ハードルが高くなります。

Rails6からWebpackerがデフォルトになるようです。選択としては以下です。

  1. WebpackerでJavascript、CSS、imageすべて処理する
  2. WebpackerでJavascriptを処理して、Sprocketsでimage assetsとCSSを引き続き処理する
  3. Webpackerを削除して、もともと使っていたSprocketsのみで継続
  4. 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のエラーだけは解消できませんでした。。

Screen Shot 2019-03-14 at 15.47.27.png Screen Shot 2019-03-14 at 15.47.11.png

コミット

参考:

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

コミット

参考:

3
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?