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

Description

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

Requirements

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
  2. 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)

コメントを残す

メールアドレスが公開されることはありません。