AWSでrailsアプリをデプロイしたが、表示されない エラー We're sorry, but something went wrong.

Question

いつもお世話になっています。

今回は、
ローカルで開発したアプリをAWSにデプロイしたいのですが、
awsはイメージは,amazonlinux2 ,DBはmysql2です。

　We're sorry, but something went wrong.がでて表示されません。

tail -n 30 production.logでログをみた結果

ActionView::Template::Error (Webpacker can't find application in /var/www/rails/empty_room/public/packs/manifest.json. Possible causes:

1. You want to set webpacker.yml value of compile to true for your environment
   unless you are using the webpack -w or the webpack-dev-server.
2. webpack has not yet re-run to reflect updates.
3. You have misconfigured Webpacker's config/webpacker.yml file.
4. Your webpack configuration is not creating a manifest.

こういうエラーが出ていたので、https://github.com/rails/webpacker/issues/2478を参考にして
rm -rf node_modules
rake webpacker:clobber
yarn --check-files
RAILS_ENV=production rake webpacker:compile
このようにしたのですが、表示できませんでした。

こちらが、webpacker.ymlです

環境
rails Rails 6.0.3.2
ruby 2.6.3p62 (2019-04-16 revision 67580) [x86_64-linux]
awsはイメージは,amazonlinux2 ,DBはmysql2です。

いろいろためしたが、なんともならなそうなので、やり直しも考えています。
良き対処方法があればよろしくおねがいします。

Answer 1

/var/www/rails/empty_room/app/assets/stylesheets/application.scss

@import "../../../node_modules/bootstrap/scss/bootstrap";

webpacker.ymlの
check_yarn_integrityを
falseに変更

と何点かのスペルミスで解決いたしましたので、
お世話おかけしました。

Answer 2

どっちかっていうと、こっちがわの問題だったりしないですかね。https://github.com/rails/webpacker/issues/2071

Comments

[kazuki_]

ご返信ありがとうございます。
RAILS_ENV=production rails assets:precompileのコマンドをやってみたところ。下記のエラーがでました。

rails aborted!
SassC::SyntaxError: Error: File to import not found or unreadable: ~bootstrap/scss/bootstrap.
on line 7:2 of app/assets/stylesheets/application.scss

@import '~bootstrap/scss/bootstrap';

-^
/var/www/rails/empty_room/app/assets/stylesheets/application.scss:7
Tasks: TOP => assets:precompile
(See full trace by running task with --trace)

＠bootstrapがおかしそうなので、みてみました、
[kazuki@ip-10-0-0-62 stylesheets]$ vim application.scss

/
= require_tree .
= require_self
/

@import '~bootstrap/scss/bootstrap';
// �~Cｭ�~Bｰ�~B､�~Cｳ�~Tｻ�~]｢

.container-login {
@extend .container-fluid;
max-width: 576px;
padding: 2rem;
}

// �~@~L�~Cｭ�~Bｰ�~B､�~Cｳ�~A~W�~Aｾ�~A~W�~A~_�~@~M�~Aｪ�~Aｩ�~Aｮ�~C~U�~Cｩ�~C~C�~Bｷ�~C･�~Tｨ�~Bｹ�~Bｿ�~B､�~Cｫ

.alert-notice {
@extend .alert-info;
}

.alert-alert {
@extend .alert-danger;
}

.btn {
padding: 2rem;
}
~
のような感じです。文字化けしてるところを消しても表示はされませんでした。
が、bootstrapの＠importがだめのようなのですが、どういった対処をすればいいかわかりません。

[naokit-dev]

開発環境では問題ないのでしょうか？
Bootstrapのインストールの方法が間違っている気がします

＠import '~bootstrap/scss/bootstrap'
これはWebpackを使ってBootstrapをインストールした際にCSSにimportする記述だと思います。

これをassets配下のcssに記述してasset compileしようとしているのが問題だと思います。

Rails 6とそれよりも前のバージョンではBootstrapのインストール方法も違いますので
記事を参考にする際も環境を確認されたほうがいいです

[kazuki_]

返信おそくなってもうしわけないです。
なるほど、今後は環境を気にして記事を参考にしていきたいと思います。
大変参考になりました、ありがとうございます。
エラーに関しては、

@import "../../../node_modules/bootstrap/scss/bootstrap";

webpacker.ymlの
check_yarn_integrityを
falseに変更

と何点かのスペルミスで解決いたしましたので、
お世話おかけしました。