困っていたこと
Railsでガチでフランス語のアプリを個人開発しています。
(フランス語やってる方がいたら、覗いてみてください https://minnfra.com/ )
CSSの修正が反映されなくて困っていました。
デプロイした時は、CSSもJSもきちんと反映されていたのですが、それ以降に修正を行って、インスタンスでGithubリポジトリをpullしてrails assets:precompile RAILS_ENV=production
を実行しても下記のようにエラーになり変更が反映されないという状態でした。
[ec2-user@... REPOSITORY]$ rails assets:precompile RAILS_ENV=production
yarn install v1.22.17
[1/4] Resolving packages...
success Already up-to-date.
Done in 1.26s.
rails aborted!
NoMethodError: undefined method `+' for nil:NilClass
/var/www/minnfra/bin/rails:11:in `<top (required)>'
/var/www/minnfra/bin/spring:16:in `<top (required)>'
Tasks: TOP => webpacker:compile
(See full trace by running task with --trace)
環境
Amazon-Linux-2
Rails 6.1.4.1
ruby 2.7.2p137 (2020-10-01 revision 5445e04352) [x86_64-darwin19]
実装!
色々調べてはまってましたが、最後は、冨岡義勇先輩が下弦の伍・累を斬ったときのように、呆気ない一撃で解決しました。
config/webpacker.yml
ファイルを編集します。
config/webpacker.yml
# Additional paths webpack should lookup modules
# ['app/assets', 'engine/foo/app/assets']
additional_paths: [] # 元々はresolved_paths: []になっているかと。
これでもう一回rails assets:precompile
を実行してみると...
[ec2-user@... REPOSITORY]$ rails assets:precompile RAILS_ENV=production
yarn install v1.22.17
[1/4] Resolving packages...
success Already up-to-date.
Done in 1.07s.
Compiling...
Compiled all packs in /var/www/minnfra/public/packs
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db
Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating
Hash: 2e1314d79a8b087df918
Version: webpack 4.46.0
Time: 36255ms
Built at: 01/23/2022 5:42:09 AM
Asset Size Chunks Chunk Names
css/application-1245a535.css 1.45 MiB 0 [emitted] [immutable] [big] application
css/application-1245a535.css.br 102 KiB [emitted]
css/application-1245a535.css.gz 149 KiB [emitted]
js/application-797e26ccb2c4e5207df8.js 1.43 MiB 0 [emitted] [immutable] [big] application
js/application-797e26ccb2c4e5207df8.js.LICENSE.txt 1.23 KiB [emitted]
js/application-797e26ccb2c4e5207df8.js.br 429 KiB [emitted] [big]
js/application-797e26ccb2c4e5207df8.js.gz 517 KiB [emitted] [big]
js/application-797e26ccb2c4e5207df8.js.map 2.53 MiB 0 [emitted] [dev] application
js/application-797e26ccb2c4e5207df8.js.map.br 656 KiB [emitted] [big]
js/application-797e26ccb2c4e5207df8.js.map.gz 794 KiB [emitted] [big]
(中略)
Entrypoint application [big] = css/application-1245a535.css js/application-797e26ccb2c4e5207df8.js js/application-797e26ccb2c4e5207df8.js.map
Entrypoint bundle = js/bundle-d36948777eda3f1527a8.js js/bundle-d36948777eda3f1527a8.js.map
Entrypoint hello_react = js/hello_react-41c4d31840aa0842afc3.js js/hello_react-41c4d31840aa0842afc3.js.map
Entrypoint hello-world-bundle = js/hello-world-bundle-ac839b92993e7af53600.js js/hello-world-bundle-ac839b92993e7af53600.js.map
[3] (webpack)/buildin/global.js 905 bytes {0} {1} {2} [built]
[33] ./node_modules/@emotion/is-prop-valid/dist/is-prop-valid.browser.esm.js + 1 modules 4.41 KiB {1} [built]
| 2 modules
[34] (webpack)/buildin/module.js 552 bytes {0} [built]
(中略)
+ 73 hidden modules
WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
css/application-1245a535.css (1.45 MiB)
js/application-797e26ccb2c4e5207df8.js (1.43 MiB)
js/bundle-d36948777eda3f1527a8.js.map.gz (287 KiB)
js/application-797e26ccb2c4e5207df8.js.gz (517 KiB)
js/application-797e26ccb2c4e5207df8.js.map.gz (794 KiB)
js/application-797e26ccb2c4e5207df8.js.br (429 KiB)
js/application-797e26ccb2c4e5207df8.js.map.br (656 KiB)
WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
application (2.89 MiB)
css/application-1245a535.css
js/application-797e26ccb2c4e5207df8.js
WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--7-1!node_modules/postcss-loader/src/index.js??ref--7-2!node_modules/sass-loader/dist/cjs.js??ref--7-3!app/javascript/stylesheets/application.scss:
Entrypoint mini-css-extract-plugin = *
[0] ./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 4.27 MiB {0} [built]
+ 1 hidden module
なんか色々出たが(complileした結果を教えてくれているのかな?)、成功したっぽい。
(ちなみに、もう一回やってみるとスッキリしている↓)
[ec2-user@... REPOSITORY]$ rails assets:precompile RAILS_ENV=production
yarn install v1.22.17
[1/4] Resolving packages...
success Already up-to-date.
Done in 1.15s.
Everything's up-to-date. Nothing to do
CSSの修正も反映された!
めでたし、めでたし。