はじめに
本記事は、まだ未解決のため、現段階まででわかっていることを書き示すのみとします
[追記]
5/13 18時に解決しました
[追記]解決策
コンテナ内で以下のコマンドを叩くことで解決しました
npm rebuild node-sass
エラーには正直に従えば良かったみたいです
発生した原因はもうちょっと深掘りしてきます！
起きていること
ある朝、いつものようにdocker-compose up -d にてコンテナを起動してやると、、、、、
Found bindings for the following environments:
webpacker_1 | - OS X 64-bit with Node.js 14.x
webpacker_1 |
webpacker_1 | This usually happens because your environment has changed since running `npm install`.
webpacker_1 | Run `npm rebuild node-sass` to download the binding for your current environment.
webpacker_1 | at module.exports (/soccer_app/node_modules/node-sass/lib/binding.js:15:13)
webpacker_1 | at Object.<anonymous> (/soccer_app/node_modules/node-sass/lib/index.js:13:35)
webpacker_1 | at Module._compile (internal/modules/cjs/loader.js:778:30)
webpacker_1 | at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
webpacker_1 | at Module.load (internal/modules/cjs/loader.js:653:32)
webpacker_1 | at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
webpacker_1 | at Function.Module._load (internal/modules/cjs/loader.js:585:3)
webpacker_1 | at Module.require (internal/modules/cjs/loader.js:692:17)
webpacker_1 | at require (internal/modules/cjs/helpers.js:25:18)
webpacker_1 | at getDefaultSassImpl (/soccer_app/node_modules/sass-loader/dist/index.js:198:10)
マジで何もしてないのに、いきなり変わった！！！！
と言いたいところですが、多分なんかしたんでしょう、、、、が、心当たりがない。
とりあえずエラー文を読んでみた
Run `npm rebuild node-sass` to download the binding for your current environment.
ふむふむ、npm rebuild node-sassしろと。
わかったよ、してやる！！ということでコマンドを叩くも1ミリの変化なし。
もう少し、エラー文を見てあげる
webpacker_1 | Node Sass could not find a binding for your current environment: Linux 64-bit with Node.js 10.x
webpacker_1 |
webpacker_1 | Found bindings for the following environments:
webpacker_1 | - OS X 64-bit with Node.js 14.x
webpacker_1 |
webpacker_1 | This usually happens because your environment has changed since running `npm install`.
直訳すると、
・Sassは現在の環境のバインディングを見つけることができませんでした
・これは通常、 npminstallを実行してから環境が変更されたために発生します。
ん〜、よくわからんが、多分node関連で、なんかが変わっちゃった？？？
まあ、だったらとりあえず本質的解決にはならんが、コードは触ってないし最初からしちゃえということで
docker system pruneで大掃除してからdocker-compose build!!!!!!とコマンドで叩く！！！
そして私は青ざめる（笑）
じゃーーーーーん
% docker-compose build
db uses an image, skipping
chrome uses an image, skipping
Building web
[+] Building 47.7s (14/15)
=> [internal] load build definition from Dockerfile 0.0s
=> => transferring dockerfile: 549B 0.0s
=> [internal] load .dockerignore 0.0s
=> => transferring context: 2B 0.0s
=> [internal] load metadata for docker.io/library/ruby:2.6.5 0.9s
=> [ 1/11] FROM docker.io/library/ruby:2.6.5@sha256:651078e89471c30567685dce4caa321adf1f846b353e0 0.0s
=> [internal] load build context 2.9s
=> => transferring context: 2.85MB 2.9s
=> CACHED [ 2/11] RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - && ec 0.0s
=> CACHED [ 3/11] RUN apt-get update -qq && apt-get install -y build-essential libpq-dev nodejs y 0.0s
=> CACHED [ 4/11] WORKDIR /soccer_app 0.0s
=> CACHED [ 5/11] COPY Gemfile /soccer_app/Gemfile 0.0s
=> CACHED [ 6/11] COPY Gemfile.lock /soccer_app/Gemfile.lock 0.0s
=> CACHED [ 7/11] RUN gem install bundler 0.0s
=> CACHED [ 8/11] RUN bundle install 0.0s
=> [ 9/11] COPY . /soccer_app 21.5s
=> ERROR [10/11] RUN yarn install --check-files 22.2s
------
> [10/11] RUN yarn install --check-files:
#14 1.525 yarn install v1.22.5
#14 1.695 [1/4] Resolving packages...
#14 2.853 warning node-sass > node-gyp > request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
#14 2.979 [2/4] Fetching packages...
#14 21.85 info fsevents@2.3.2: The platform "linux" is incompatible with this module.
#14 21.85 info "fsevents@2.3.2" is an optional dependency and failed compatibility check. Excluding it from installation.
#14 21.86 info fsevents@1.2.13: The platform "linux" is incompatible with this module.
#14 21.86 info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
#14 21.86 error node-sass@6.0.0: The engine "node" is incompatible with this module. Expected version ">=12". Got "10.24.0"
#14 21.87 info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
#14 21.87 error Found incompatible module.
------
executor failed running [/bin/sh -c yarn install --check-files]: exit code: 1
ERROR: Service 'web' failed to build
まあ、正直この程度のエラーでは動じません！
エラー文を見ていきましょう！
node-sass@6.0.0: The engine "node" is incompatible with this module. Expected version ">=12". Got "10.24.0"
このエラー文が全てな気がします。
おそらくnodeのバージョンが古いんだと！
いろいろ調べてみるとこちらの記事に当たりました
https://dev.classmethod.jp/articles/node-sass-could-not-find-a-binding/
ただ、私の場合はこれでは治らず。
そういえば、Dockerfileでバージョン指定してたっけかな〜〜と思いみる
FROM ruby:2.6.5
RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - \
&& echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list
RUN apt-get update -qq && apt-get install -y build-essential libpq-dev nodejs yarn
WORKDIR /soccer_app
COPY Gemfile /soccer_app/Gemfile
COPY Gemfile.lock /soccer_app/Gemfile.lock
RUN gem install bundler
RUN bundle install
COPY . /soccer_app
RUN yarn install --check-files
RUN bundle exec rails webpacker:compile
してない！！！
じゃあバージョン指定してやればいな！！ローカルと同じにしてみよう
FROM ruby:2.6.5
RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - \
&& echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list
RUN apt-get update -qq && apt-get install -y build-essential libpq-dev nodejs yarn
RUN apt-get install -y nodejs npm && npm install n -g && n 14.17.0
WORKDIR /soccer_app
COPY Gemfile /soccer_app/Gemfile
COPY Gemfile.lock /soccer_app/Gemfile.lock
RUN gem install bundler
RUN bundle install
COPY . /soccer_app
RUN yarn install --check-files
RUN bundle exec rails webpacker:compile
おっけい！これで、エラー文がいうところは満たされたはず
勝利した顔でdocker-compose buildを叩いてみる
=> [11/12] RUN yarn install --check-files 35.9s
=> ERROR [12/12] RUN bundle exec rails webpacker:compile 24.2s
------
> [12/12] RUN bundle exec rails webpacker:compile:
#17 6.945 Compiling...
#17 24.08 Compilation failed:
#17 24.08 Hash: 5b9cb701d467f386094d
#17 24.08 Version: webpack 4.46.0
#17 24.08 Time: 14957ms
#17 24.08 Built at: 05/13/2021 6:59:23 AM
#17 24.08 19 assets
#17 24.08 Entrypoint application = js/application-4af633c300cc707e06da.js js/application-4af633c300cc707e06da.js.map
#17 24.08 Entrypoint chat_scroll = js/chat_scroll-9d46874ed4ab77b34f53.js js/chat_scroll-9d46874ed4ab77b34f53.js.map
#17 24.08 Entrypoint count = js/count-59340b06f309e34c98c2.js js/count-59340b06f309e34c98c2.js.map
#17 24.08 Entrypoint myphoto_preview = js/myphoto_preview-8324ca7303a9dcae160d.js js/myphoto_preview-8324ca7303a9dcae160d.js.map
#17 24.08 Entrypoint navbar = js/navbar-31125c36983d5d8690af.js js/navbar-31125c36983d5d8690af.js.map
#17 24.08 Entrypoint practice_preview = js/practice_preview-8bf72fefd5a23c861bc6.js js/practice_preview-8bf72fefd5a23c861bc6.js.map
#17 24.08 Entrypoint ptag = js/ptag-c877989e2f581d065b0c.js js/ptag-c877989e2f581d065b0c.js.map
#17 24.08 Entrypoint slider = js/slider-30f991808eb6fbf53e55.js js/slider-30f991808eb6fbf53e55.js.map
#17 24.08 [108] ./app/javascript/packs/slider.js 231 bytes {0} {7} [built]
#17 24.08 [109] (webpack)/buildin/module.js 552 bytes {0} [built]
#17 24.08 [112] ./app/javascript/packs/application.js 872 bytes {0} [built]
#17 24.08 [114] (webpack)/buildin/global.js 905 bytes {0} [built]
#17 24.08 [115] ./app/javascript/stylesheets/application.scss 664 bytes {0} [built]
#17 24.08 [117] ./node_modules/css-loader/dist/cjs.js??ref--7-1!./node_modules/postcss-loader/src??ref--7-2!./node_modules/sass-loader/dist/cjs.js??ref--7-3!./app/javascript/stylesheets/application.scss 322 bytes {0} [built] [failed] [1 error]
#17 24.08 [120] ./app/javascript/channels/index.js 205 bytes {0} [built]
#17 24.08 [121] ./app/javascript/channels sync _channel\.js$ 190 bytes {0} [built]
#17 24.08 [122] ./app/javascript/packs/chat_scroll.js 155 bytes {1} [built]
#17 24.08 [123] ./app/javascript/packs/count.js 449 bytes {2} [built]
#17 24.08 [124] ./app/javascript/packs/myphoto_preview.js 694 bytes {3} [built]
#17 24.08 [125] ./app/javascript/packs/navbar.js 1.39 KiB {4} [built]
#17 24.08 [126] ./app/javascript/packs/practice_preview.js 919 bytes {5} [built]
#17 24.08 [127] ./app/javascript/packs/ptag.js 1.71 KiB {6} [built]
#17 24.08 [128] ./app/javascript/channels/chat_message_channel.js + 1 modules 1.39 KiB {0} [optional] [built]
#17 24.08 | ./app/javascript/channels/chat_message_channel.js 1.13 KiB [optional] [built]
#17 24.08 | ./app/javascript/channels/consumer.js 259 bytes [built]
#17 24.08 + 114 hidden modules
#17 24.08
#17 24.08 ERROR in ./app/javascript/stylesheets/application.scss (./node_modules/css-loader/dist/cjs.js??ref--7-1!./node_modules/postcss-loader/src??ref--7-2!./node_modules/sass-loader/dist/cjs.js??ref--7-3!./app/javascript/stylesheets/application.scss)
#17 24.08 Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
#17 24.08 Error: Node Sass version 6.0.0 is incompatible with ^4.0.0.
#17 24.08 at getRenderFuncFromSassImpl (/soccer_app/node_modules/sass-loader/dist/index.js:165:13)
#17 24.08 at Object.loader (/soccer_app/node_modules/sass-loader/dist/index.js:79:18)
#17 24.08 @ ./app/javascript/stylesheets/application.scss 2:26-228
#17 24.08 @ ./app/javascript/packs/application.js
#17 24.08
------
executor failed running [/bin/sh -c bundle exec rails webpacker:compile]: exit code: 1
ERROR: Service 'web' failed to build
汗汗汗、、、、
でもちょっと変わった！コマンドが1つ分進んでいる！一歩前進！やれるかわからないけど、やってみる精神突き進む！！
とはいえ、ごめん！！全然わからない！Google先生！
と、こちらの記事に遭遇
https://hapicode.com/css/sass-loader-error.html#%E8%A7%A3%E6%B1%BA%E7%AD%96-2-node-module-%E5%89%8A%E9%99%A4%E3%81%97%E3%81%A6%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB
以下のコマンドを叩いてみる
% npm uninstall node-sass
% npm install node-sass@4
再度,docker-compose buildを実行！！！！！！
tochikawa@tochinoMacBook-Pro soccer_app % docker-compose build
db uses an image, skipping
chrome uses an image, skipping
Building web
[+] Building 98.8s (18/18) FINISHED
=> [internal] load build definition from Dockerfile 0.0s
=> => transferring dockerfile: 37B 0.0s
=> [internal] load .dockerignore 0.0s
=> => transferring context: 2B 0.0s
=> [internal] load metadata for docker.io/library/ruby:2.6.5 1.8s
=> [auth] library/ruby:pull token for registry-1.docker.io 0.0s
=> [internal] load build context 5.4s
=> => transferring context: 125.23MB 5.3s
=> [ 1/12] FROM docker.io/library/ruby:2.6.5@sha256:651078e89471c30567685dce4caa321adf1f846b353e0 0.0s
=> CACHED [ 2/12] RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - && ec 0.0s
=> CACHED [ 3/12] RUN apt-get update -qq && apt-get install -y build-essential libpq-dev nodejs y 0.0s
=> CACHED [ 4/12] RUN apt-get install -y nodejs npm && npm install n -g && n 14.17.0 0.0s
=> CACHED [ 5/12] WORKDIR /soccer_app 0.0s
=> CACHED [ 6/12] COPY Gemfile /soccer_app/Gemfile 0.0s
=> CACHED [ 7/12] COPY Gemfile.lock /soccer_app/Gemfile.lock 0.0s
=> CACHED [ 8/12] RUN gem install bundler 0.0s
=> CACHED [ 9/12] RUN bundle install 0.0s
=> [10/12] COPY . /soccer_app 21.0s
=> [11/12] RUN yarn install --check-files 33.5s
=> [12/12] RUN bundle exec rails webpacker:compile 4.7s
=> exporting to image 32.2s
=> => exporting layers 32.2s
=> => writing image sha256:d65afdd816d7f8e9ec98c4274f6c495e3945be7349a06caca0bc5a3b83db81e0 0.0s
=> => naming to docker.io/library/soccer_app_web 0.0s
Use 'docker scan' to run Snyk tests against images to find vulnerabilities and learn how to fix them
Successfully built d65afdd816d7f8e9ec98c4274f6c495e3945be7349a06caca0bc5a3b83db81e0
Building webpacker
[+] Building 4.3s (17/17) FINISHED
=> [internal] load build definition from Dockerfile 0.0s
=> => transferring dockerfile: 37B 0.0s
=> [internal] load .dockerignore 0.0s
=> => transferring context: 2B 0.0s
=> [internal] load metadata for docker.io/library/ruby:2.6.5 0.9s
=> [ 1/12] FROM docker.io/library/ruby:2.6.5@sha256:651078e89471c30567685dce4caa321adf1f846b353e0 0.0s
=> [internal] load build context 3.2s
=> => transferring context: 2.78MB 3.1s
=> CACHED [ 2/12] RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - && ec 0.0s
=> CACHED [ 3/12] RUN apt-get update -qq && apt-get install -y build-essential libpq-dev nodejs y 0.0s
=> CACHED [ 4/12] RUN apt-get install -y nodejs npm && npm install n -g && n 14.17.0 0.0s
=> CACHED [ 5/12] WORKDIR /soccer_app 0.0s
=> CACHED [ 6/12] COPY Gemfile /soccer_app/Gemfile 0.0s
=> CACHED [ 7/12] COPY Gemfile.lock /soccer_app/Gemfile.lock 0.0s
=> CACHED [ 8/12] RUN gem install bundler 0.0s
=> CACHED [ 9/12] RUN bundle install 0.0s
=> CACHED [10/12] COPY . /soccer_app 0.0s
=> CACHED [11/12] RUN yarn install --check-files 0.0s
=> CACHED [12/12] RUN bundle exec rails webpacker:compile 0.0s
=> exporting to image 0.0s
=> => exporting layers 0.0s
=> => writing image sha256:d65afdd816d7f8e9ec98c4274f6c495e3945be7349a06caca0bc5a3b83db81e0 0.0s
=> => naming to docker.io/library/soccer_app_webpacker 0.0s
Use 'docker scan' to run Snyk tests against images to find vulnerabilities and learn how to fix them
Successfully built d65afdd816d7f8e9ec98c4274f6c495e3945be7349a06caca0bc5a3b83db81e0
Use 'docker scan' to run Snyk tests against images to find vulnerabilities and learn how to fix them
コマンドは通るように！！！！！よし！！！！
この勢いで、docker-compose up してやる！！！
はい！！！ぽち！（このとき、次回、城之内死す！をなぜか思い出しました）
webpacker_1 | ERROR in ./app/javascript/stylesheets/application.scss (./node_modules/css-loader/dist/cjs.js??ref--7-1!./node_modules/postcss-loader/src??ref--7-2!./node_modules/sass-loader/dist/cjs.js??ref--7-3!./app/javascript/stylesheets/application.scss)
webpacker_1 | Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
webpacker_1 | Error: Missing binding /soccer_app/node_modules/node-sass/vendor/linux-x64-83/binding.node
webpacker_1 | Node Sass could not find a binding for your current environment: Linux 64-bit with Node.js 14.x
webpacker_1 |
webpacker_1 | Found bindings for the following environments:
webpacker_1 | - OS X 64-bit with Node.js 14.x
webpacker_1 |
webpacker_1 | This usually happens because your environment has changed since running `npm install`.
webpacker_1 | Run `npm rebuild node-sass` to download the binding for your current environment.
webpacker_1 | at module.exports (/soccer_app/node_modules/node-sass/lib/binding.js:15:13)
webpacker_1 | at Object.<anonymous> (/soccer_app/node_modules/node-sass/lib/index.js:14:35)
webpacker_1 | at Module._compile (internal/modules/cjs/loader.js:1068:30)
webpacker_1 | at Object.Module._extensions..js (internal/modules/cjs/loader.js:1097:10)
webpacker_1 | at Module.load (internal/modules/cjs/loader.js:933:32)
webpacker_1 | at Function.Module._load (internal/modules/cjs/loader.js:774:14)
webpacker_1 | at Module.require (internal/modules/cjs/loader.js:957:19)
webpacker_1 | at require (internal/modules/cjs/helpers.js:88:18)
webpacker_1 | at getDefaultSassImpl (/soccer_app/node_modules/sass-loader/dist/index.js:198:10)
webpacker_1 | at Object.loader (/soccer_app/node_modules/sass-loader/dist/index.js:80:29)
やっぱりだめ、、、ん〜〜〜〜〜
もう少し細かく見ていく必要がありますね
おわりに
結局未解決で申し訳ないです。
引き続き、エラー解消に努めます
[追記]
いったん寝てから再度取り組むことをおすすめします！笑