目的
Apple M1チップ搭載のMac上のDocker環境でRails5を動かしています。ベースのイメージはruby:2.7.3です。（ちなみにruby:2.5.8でも同様の現象が生じました。）Rails自体は問題なくインストール、pumaでの起動ができるのですが、問題はBootstrapの導入を試みたときです。世の指南書にあるようにGemでBootstrapをインストールし、サーバを再起動して、適切にapplication.scssを記述して、いざブラウザ越しにアプリケーションへアクセスすると無残にも「このサイトにアクセスできません」状態となります。
サーバ側のログを確認すると
*** stack smashing detected ***: <unknown> terminated
とのこと。このstack smashing detectedエラーをGoogleで検索してみると、C言語でスタックオーバーラン等が起こった時に出るエラーという解説がたくさん出てきます。Gem使っていてC言語のエラーに遭遇するとか想定外です。
このエラーに対する根本的な解決策を見出すのは困難であると考え、また、楽したいために導入したBootstrapで、そんな苦難の道を進むことになるのは本末転倒ですので、早々にGemを諦めて、もっと気軽にBootstrapを導入する方法を探りました。
というわけで、この文章の対象者は、
- RailsにBootstrapを導入したら
stack smashing detectedエラーに遭遇したが、 - そのエラーの根本解決を望んでいるわけではなく、
- Bootstrapが気軽に導入できればよい、
という状況の方になります。
環境
筆者の環境は以下です。
- Apple M1 Mac
- macOS Big Sur
- Docker Desktop 3.6.0
- イメージ ruby:2.7.3
- Rails 5.2.0
- Bootstrap 4.5.0
おそらくRubyの2系、Rails5（6は不明）、Bootstrap4または5を使用してstack smashing detectedエラーが出るなら同じ状況かと思います。これらのバージョンより、M1のDockerというのが問題なのではないかという気がしています。
とにかく素のBootstrapが入ればいい人向け
この場合は簡単です。（たぶんそういう人はQiita読んでいないと思いますが。）レイアウト等でCDNからbootstrap.cssを引っ張ってくれば良いだけです。具体的には、app/views/layouts/application.html.erbに
<!DOCTYPE html>
<html>
<head>
<title>Your App</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-\
track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reloa\
d' %>
</head>
<body>
...
</body>
</html>
のような感じで、Bootstrapの公式サイトの導入部分に示されているように、linkタグを埋め込んでしまえば普通に使えます。バージョンはお好きなものを。
CDNからの読み込みを避けたいという人も特に難しくはありません。その場合は上記公式サイトのダウンロードボタンをクリックし、bootstrap.cssをダウンロードしてアプリケーションのapp/assets/stylesheetsディレクトリに放り込みます。あとはapplication.cssに
*= require_tree .
の記述があれば勝手にアセットパイプラインが働いて、いい感じに処理してくれます。
SCSS使いたい人向け
おそらく本当に困っているのはこちらの人ではないでしょうか。筆者もそうなのですが、Bootstapが入ればいいとはいえ、やっぱりprimaryとかsecondaryの色は変えたい、とかそういう人です。素のCSSを置換して回るのはお手軽ではありません。
この場合にはbootstrap.scssを導入する必要があります。上記のBootstrapの公式サイトのダウンロードページから、CSSファイルではなくソースファイルのダウンロードをしてください。ダウンロードされたZipを解凍すると、その中にscssというディレクトリがあります。その中身を全てアプリケーションのapp/assets/stylesheetsの中に放り込みます。bootstrap.scss、bootstrap-reboot.scss、bootstrap-grid.scssや_から始まる複数のscssファイル、vendor、utilities、mixinsの各ディレクトリも全てです。（結構なファイル数です。）
そして、application.cssの拡張子をapplication.scssとSCSSに変更します。さらにそのファイルを開いて、
*= require_tree .
この行は削除してください。これを削除しないと、Railsのアセットパイプラインが、先程コピーした全ファイルを勝手な順序でコンパイルし始めてエラーが起こりまくります。
あとは手動でSCSSの文法を用いて、先程コピーしたbootstrap.scssのみをインポートします。
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
* vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
* files in this directory. Styles in this file should be added after the last require_* statement.
* It is generally better to create a new file per style scope.
*
*= require_self
*/
$theme-colors: (
primary: #000000,
secondary: #ffffff
);
@import "bootstrap";
bootstrap.scssの中身を見るとわかるのですが、他のSCSSファイルはその中でインポートされます。というか、このbootstrap.scss自体は他のファイルのインポートしかしていません。ちなみに上記コードの@import行の前にある$theme-colors変数の定義は不要です。これはBootstrapのプライマリカラーとセカンダリカラーを変更するためのものです。筆者はこのたったの4行の定義をBootstrapに反映したいために、stack smashing detectedにぶち当たって苦労しました。
まとめ
RailsにBootstrapを導入した時に起こるstack smashing detectedエラーの回避方法を紹介しました。解決方法ではないことに注意してください。おそらく根本的なエラーの解決策を探るならば、Bootstrapを使わないで自力でCSSを書くほうがお手軽なのではないかと思います。エラーの出る理由くらい知りたい気はしますが、Dockerのバージョンアップ等を重ねるうちにいつの間にか解消されていることを期待します。