Rails5でのWebpackerによるBootstrapの利用

はじめに

Rails6からWebpackerが標準で入っているようですが、ここではRails5での導入を試みてみます。

今までは、JQueryやBootstrapを導入するには、それぞれのGemをインストールする必要があり、SprocketsというGemによって複数のアセットファイル(JS、CSSや画像)をコンパイル(結合や圧縮)を行うアセットパイプラインという仕組みを実装していました。

今後は、GemではなくyarnにてJSやCSSのパッケージを管理し、Webpackというアセットファイルを1のJSファイルにまとめて管理するモジュールバンドラをWebpackerというGemで利用するのが主流のようです。

Webpackerは、rails new コマンド実行の際に、次のオプションをつけることで導入できます。

--webpack --skip-coffee --skip-turbolinks --skip-sprockets

要は、Gemfileにwebpackerを登録し、sprocketsなんかのGemの記述を削除するだけです。
また、予めシステムにyarnとnode.jsをインストールしておく必要があります。

yarnでbootstrapを入れる

その際に、jquery、 popper.js も依存ライブラリなので入れます。
その前に、現在の package.json の内容を確認しておきます。

package.json

{
  "name": "sample_app",
  "private": true,
  "dependencies": {
    "@rails/webpacker": "5.2.1"
  },
  "devDependencies": {
    "webpack-dev-server": "^3.11.0"
  }
}

yarnにてセットアップします。

$ bin/yarn add bootstrap jquery popper.js @popperjs/core

※Docker環境で動いている場合は、コンテナ内で実行します。
追記(2021/05/17): セットアップすべきライブラリとして「@popperjs/code」を追記しました。

“Rails5でのWebpackerによるBootstrapの利用” 続きを読む

Rails5 + MariaDB 10.3 + Nginx をDockerで環境構築

はじめに

まずは、Docker Composeのベースとなるディレクトリ(例として「rails5-docker-compose」)を作成します。このディレクトリに「docker-compose.yml」を置くことになります。

$ mkdir rails5-docker-compose
$ cd rails5-docker-compose

構築する3つのコンテナ、Rails、MariaDB、Nginx、それぞれで管理するためのディレクトリを作成します。

$ mkdir -p mariadb/sql
$ mkdir -p rails/src
$ mkdir nginx

ベースとなるディレクトリのPATHが環境によって異なるので、docker-compose.ymlで参照できる環境設定ファイル「.env」をカレントディレクトリに準備します。

.env

HOSTSRCPATH=c:/Users/foo/devel/rails5-docker-compose

ここでは、ベースとなるディレクトリまでの絶対パスを、「HOSTSRCPATH」という環境変数にセットしておきます。普段私は、Docker Desktop for Windows、つまりWindows上のDockerエンジン(Hyper-V)を利用し、DockerクライアントはWSL上のubuntuのdocker-cliを利用しているので、上のような例になっています。

前は、「c:/Users/foo/」の部分は「~/」でマウント(bind)できていましたが、Docker Desktopをupdateしていつの間にかできなくなりました。

“Rails5 + MariaDB 10.3 + Nginx をDockerで環境構築” 続きを読む