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で環境構築” 続きを読む

Docker for WindowsとDocker on WSLにおけるボリュームマウント

はじめに

まずは、今回の説明におけるホストマシンの環境から、

[foo@host]$ cat /etc/os-release
NAME="Ubuntu"
VERSION="18.04.1 LTS (Bionic Beaver)"
:

OSは、Windows Subsystem for Linux (WSL) 上の Ubuntu Linux 18.04.1
そして、WSL上にて導入したDockerクライアントとdocker-composeのバージョンは次の通り。

[foo@host]$ docker --version
Docker version 18.09.1, build 4c52b90

[foo@host]$ docker-compose version
docker-compose version 1.23.2, build 1110ad01
docker-py version: 3.6.0
CPython version: 3.6.7
OpenSSL version: OpenSSL 1.1.0f  25 May 2017

最後に、Dockerエンジンの情報は次の通り。Docker for Windows をインストールして利用中。この環境構築については、前の記事「WSLにてDockerを利用する」を参考に。

[foo@host]$ curl -i http://localhost:2375/version
HTTP/1.1 200 OK
Api-Version: 1.39
Content-Length: 560
Content-Type: application/json
Date: Fri, 15 Feb 2019 22:22:24 GMT
Docker-Experimental: false
Ostype: linux
Server: Docker/18.09.2 (linux)
{"Platform":{"Name":"Docker Engine -  Community"},"Components"
:

Hyper-V上の仮想マシンにてDockerサーバが動いている状況です。

docker run コマンドを実行すると、イメージからコンテナを生成し、Dockerエンジンはイメージの中に読み書き可能なファイルシステムを作成します。コンテナが動いている(running)あるいは停止中(exited)状態であれば、そのファイルシステムを保持しますが、コンテナを削除してしまうと、コンテナ動作中に保存した(書き込んだ)データは消えてなくなります。

「-v」オプションを使用すると、ホストとコンテナの間でファイルを共有することができます。これは例えばホストにWebサイトのコンテンツを保存しておき、それをWebサーバイメージから構築されたコンテナにマウントしてコンテンツを公開するというようなことが可能です。

では順に説明します。

“Docker for WindowsとDocker on WSLにおけるボリュームマウント” 続きを読む

コンテナへのネットワーク(HTTP)アクセスの確認

コンテナへのネットワークアクセスを確認するために、Dockerイメージ「nginx」を導入し、確認してみます。

(参考)
「Docker入門(第二回)~Dockerセットアップ、コンテナ起動~ | さくらのナレッジ」
https://knowledge.sakura.ad.jp/13795/

まずは、「docker pull」コマンドにて、nginxのDockerイメージを取得します。

$ docker pull nginx:1.14
1.14: Pulling from library/nginx
6ae821421a7d: Already exists
7edc8c3fac48: Pull complete
a19c4a4a77fe: Pull complete
Digest:  sha256:d1eed840d5b357b897a872d17cdaa8a4fc8e6eb43faa8ad2febb31ce0c537910
Status: Downloaded newer image for nginx:1.14

nginx」とだけ指定すると、最新のバージョン(latest)が取得されます。今回は(特に意味はありませんが)バージョン 1.14 を指定して取得してみます。

docker images」コマンドで取得したイメージのリストを確認してみます。

$ docker images
REPOSITORY       TAG           IMAGE ID         CREATED         SIZE
nginx            1.14          1293e2b0a1af     2 weeks ago     109MB

nginx:1.14」のDockerイメージのサイズは109MBのようです。ちなみに「nginx:1.14-alpine」と指定すると。。。

$ docker images
REPOSITORY      TAG             IMAGE ID        CREATED          SIZE
nginx           1.14-alpine     66952fd0a8ef    3  weeks ago     16MB

なんとサイズは16MB! この場合、Alpine Linuxという軽量なLinuxがOSになります。

取得したnginxイメージよりコンテナを起動します。

$ docker run -d --name nginx-container -p 8080:80 nginx:1.14
cb0a6dc4871d43ca67751698c432886bee9683ea6c1b11cdf8a707980e25833d

“コンテナへのネットワーク(HTTP)アクセスの確認” 続きを読む

WSLにてDockerを利用する

はじめに

MacからWindowsにメイン環境を10年ぶりに戻したのですが、さてWebアプリ開発とかどうしようかと少し悩みました。VirtualBoxなどを入れて仮想環境で行おうかとも考えましたが、ディスク(SSD)の資源も限られているので、仮想マシンをバンバン立ち上げられないわけで、となるとやっぱりDockerでしょ。ということで、WSL on Window 10の環境下でDockerによるコンテナ処理について色々とやってみたいと思ったわけです。

DockerDesktop

WSL上にてDockerサーバ(エンジン)を動かすことは余りよろしくないみたいなので、というか私もそれは機能的に心配だったので、下記サイトに習って、「Docker for Windows」を入れて、仮想化基盤としてはWindows 10 Proに最初から備わっているHyper-Vを使用します。そう、Dockerサーバは、Docker for Windowsで稼働させて、DockerクライアントをWSLで動かすというやつです。

(参考)「WSL の docker client から、Docker for Windows の docker daemon を使う手順 | ラボラジアン」
 https://laboradian.com/use-docker-on-wsl/#2_Docker_for_Windows

上記サイトはとても丁寧に説明されており、大変参考になりました。ありがとうございました。

“WSLにてDockerを利用する” 続きを読む