【Rails × Vue3 × AWS】本番環境でVue(javascript)を読み込んだり、読み込めなかったりする

RailsとVueで作成したポートフォリオをAWS(EC2)環境にデプロイしてあり、基本的には正常にVueを表示してくれますが急にVueが表示されなくなることがあります（bodyタグ内の <div id="application"></div> が読み込まれなくなる）。ec2ターミナルでnginxとmysqlを再起動して、再度デプロイすると解決します。この不安定な状態を解決する方法を教えて頂きたいです。

*開発環境では全く問題ないです。

#状況

#views/layouts/applocation.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <meta name="viewport"
    content="width=device-width,initial-scale=1.0,minimum-scale=1.0">

    <%= stylesheet_link_tag "inter-font", "data-turbo-track": "reload" %>
    <%= stylesheet_link_tag "tailwind", "data-turbo-track": "reload" %>
    <%= stylesheet_link_tag 'application', media: 'all' %>
    <%= javascript_pack_tag 'application' %>
    
  </head>

  <body class="wrapper">
    <div id="application"></div> <!--ここだけ表示されなくなる-->
  </body>
</html>

上記の時、<body class="wrapper">に指定したcssは読み込まれているので<div id="application"></div> に異常があるのは確かかと思います。

下記で一時的には解決する。

#ec2ターミナル
[ec2-user@~] $ sudo service nginx restart
[ec2-user@~] $ sudo service mysqld restart
[ec2-user@~] $ ps aux | grep unicorn
[ec2-user@~] $ kill -9 *****

#ローカルターミナル
$ bundle exec cap production deploy

#ファイルの設定

nginx
1#rails.conf
2
3
4  root /var/www/my_app/current/public;
5
6# assetsファイル(CSSやJavaScriptのファイルなど)にアクセスが来た際に適用される設定
7  location ^~ /assets/ {
8    gzip_static on;
9    expires max;
10    add_header Cache-Control public;
11    root /var/www/my_app/current/public;
12  }
13
14  try_files $uri/index.html $uri @unicorn;
15
16  location @unicorn {
17    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
18    proxy_set_header Host $http_host;
19    proxy_redirect off;
20    proxy_pass http://app_server;
21  }
22
23  error_page 500 502 503 504 /500.html;
24}
25

javascript
1#javascript/packs/application.js
2
3require("@rails/ujs").start()
4require("@rails/activestorage").start()
5require("channels")
6
7require('allVue/index')

javascript
1#javascript/allVue/index.js
2
3import { createApp } from "vue";
4import App from "../src/App.vue";
5import { router } from '../src/router';
6import FlashMessage from '@smartweb/vue-flash-message';
7import { store } from '../src/store.js';
8import SetInterval from '../src/plugins/SetInterval';
9
10
11document.addEventListener("DOMContentLoaded", () => {
12  const app = createApp(App);
13  app.use(router);
14  app.use(store);
15  app.use(FlashMessage);
16  app.use(SetInterval);
17  app.mount("#application");
18});
19

yu_1985

2022/01/07 11:24

念の為確認ですが、インスタンスのスペック不足とかではないですか？

black_pasta1001

2022/01/07 12:47

インスタンスのモニタリングを確認したところ問題なさそうです。

yu_1985

2022/01/07 12:48

何をどう確認してどこが問題なかったのかを書いてください。あと、CloudWatchだとデフォルトだとメモリの使用率が見られません。だいたいボトルネックはメモリです。

black_pasta1001

2022/01/07 13:00

スペックというのはCPUの使用率のことだと思っていました。30%ほどだったので問題ないかと思いました。

yu_1985

2022/01/07 13:14

インスタンスタイプを聞きたかったのですが…。だいたいmicroだとすぐに限界が来ます。あと、本来リソースを確認するならCPUとメモリだけ確認するのではダメで、もっといろんなものを確認する必要があります。 CPU使用率に余裕があるから他のところに問題がないわけではないです。

black_pasta1001

2022/01/07 13:27

素人なもので申し訳ありません。インスタンスタイプはt2.microです。また素人質問で恐縮ですがメモリが足りていない事とJavaScript だけ読み込まれないというのはどういう因果なのでしょうか？

yu_1985

2022/01/07 14:21

単純にRailsがうまく動かなくて何かしら不具合が起きてる可能性があるのでは、くらいの推察なので本当に因果があるかはきちんと調査しないとわかりません。

yu_1985

2022/01/07 14:25

t2.microはメモリがたった1GBなので、大抵の場合Railsをt2.microで動かすのは厳しいですし、よくメモリ不足でエラーになってる様子をみるので確認してみては、ぐらいの感じです。スワップ領域を作れば一応メモリ不足を補えますが一時しのぎです。また、nginxやらunicornやらを立ち上げ直したらうまくいくようになるということから、アプリに問題がある可能性が高そうだなと推測したのは一応あります。最終的にJSが読み込まれるとかどうとかは結果なので、あまりそこは気にしてないです。

black_pasta1001

2022/01/07 23:15

詳細な説明ありがとうございます。メモリを増設して様子を見てみます。

yu_1985

2022/01/08 06:48

いきなりリソースの変更を加えるのではなく、サーバに入ってコマンドで確認するなどしてみてください。