LoginSignup
1
2

More than 1 year has passed since last update.

Lightsailインスタンス(EC2)にデプロイしたRailsアプリでCSSの修正が反映されない

Last updated at Posted at 2022-01-23

困っていたこと

Railsでガチでフランス語のアプリを個人開発しています。:flag_fr:
(フランス語やってる方がいたら、覗いてみてください 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の修正も反映された!
めでたし、めでたし。

参考

1
2
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2