webpackerをdocker, docker-compose上で利用する

この記事は、https://newsdict.blogから移設しました。

Description

　　railsのwebpackerをdocker-compose, docker環境で動作させる。

Requirements

• gem rails 済
• 最新のyarnインストール済み (最新のyarn install方法)

Step

1. webpackerの設定を行う
2. Dockerfile (docker) で puma + webpacker どちらも待ち受けるように設定する
3. javascript_pack_tagに置き換える
4. cssをwebpacker上で動作するようにする

1. webpackerの設定を行う (はじめからrails6系の場合は不要です)

1. Install webpacker

$ rails webpacker:install

2. Dockerfile (docker) で puma + webpacker どちらも待ち受けるように設定する

1. rails s と webpackerどちらも起動できるEntrypoint 用のシェルをつくる sample1 sample2

$ mkdir -p src/provisioning/startup/web
$ wget https://raw.githubusercontent.com/newsdict/newsdict.io/master/src/provisioning/startup/web/startup.sh -O src/provisioning/startup/web/startup.sh
$ mkdir -p src/provisioning/startup/
$ wget https://raw.githubusercontent.com/newsdict/newsdict.io/master/src/provisioning/startup/bootstrap.sh -O src/provisioning/startup/bootstrap.sh

1. Docker越しに待ち受けるためのwebpacker用ポートの設定などを行う

**.envにIPを設定する (ブラウザからwebpackerにアクセスできるようにする) ** (sample)

# webpack-dev-server
WEBPACK_DEV_SERVER_PUBLIC=http://a.b.c.d:3035

Gemfileにdotenvを入れる

$ echo "gem 'dotenv-rails', require: 'dotenv/rails-now'" >> Gemfile
$ bundle install

開発環境でのアセットをwebpackerに向ける (sample)

config/environments/development.rb:
  if ENV['WEBPACK_DEV_SERVER_PUBLIC'].present?
     config.action_controller.asset_host = ENV['WEBPACK_DEV_SERVER_PUBLIC']
  end

webpackerの待ち受けるfqdnを設定する (sample)

config/webpack/development.js:
const merge = require('webpack-merge')
module.exports = merge(environment.toWebpackConfig(), {
    devServer: {
        public: process.env.WEBPACK_DEV_SERVER_PUBLIC
    }
})

3. jsをwebpacker用のタグjavascript_pack_tagに置き換える (はじめからrails6系の場合は不要です)

sample

4. cssをwebpacker上で動作するようにする

1. cssをapp/javascript/cssに移動する (sample)

2. cssをwebpackerからimportする (sample)

3. CSSの読み込み方法をwebpacker用のタグstylesheet_pack_tagに書き換える (sample)
   [itemlink post_id="49"]