【備忘録】/packs/js/application-xxxxxxx.jsがNot Found(404)になる問題と解決法

はじめに

• 本記事は、備忘録としてまとめたものになります。
• 他の方の参考になる可能性も踏まえて、一般公開も行なっております。
• また記載内容はすべて、正しい内容が記載されているとは限りません。
• 誤った内容を見つけた場合は、ご指摘をお願いいたします。

この記事は誰向けの記事か？

• AWS(EC2)で稼働させているアプリをSSL化した後、一部機能でエラーが発生して困っている人
• Google検索で「packs/js/application-xxxxxxx.jsがNot Foundになる」と検索しても、解決しない人
• 検証ツール上で、以下のようなエラーが発生している人
  
  /packs/js/application-xxxxxxx.js net::ERR_ABORTED 404 (Not Found)

背景

• 以下の記事で実装した際に起こった問題になります。
  https://qiita.com/portfoliokns3/items/36aa98a2ecce7da1c708
• HTTPのプロトコルではエラーなどは発生していなかったが、HTTPSに切り替えた途端、一部機能でエラーが発生した。
• 具体的にはログアウトしたり、データを削除したり、投稿した内容に「いいね」した時に以下の画面に通じてしまいました。
  
• GoogleChromeの検証ツールを用いて、HTTP通信とHTTPS通信とを比較すると、HTTPS側で以下のようなエラーが確認できた。
  
• 上記画像のアドレスへ直接アクセスした場合、以下のように正しくアクセスができなかった。
  
• HTTPに変更した場合、アクセスすることに成功した。
  
• 検証ツールでエラーの詳細を確認したところ、リクエストした内容に対して、404のエラーが帰ってきており、「そのようなページは存在しない状態」となっていた。
  
• HTTPのプロトコルでアクセスできていることから、HTTPS通信の疎通ができていないことを疑った。
• しかしこれを解決する方法がわからなかった。

開発環境

OS：MAC
ブラウザ：GoogleChrome
開発言語：Ruby on Rails
開発環境：AWS(EC2、Route53）、Nginx
その他：Let's Encrypt

今回、行なったこと（実績）

• 開発にChatGPTを導入
  開発の友として、ChatGPTを使い、Nginx側のソースコードがどのようなことをしているのか、一つ一つ理解していった。なぜこれを導入したかというと、今（2023年2月時点で）、話題になっているツールであり、かつ私自身インフラに弱いということもあり、話し相手が必要だったから。
• Webサーバーの実態を確認
  今回、HTTPとHTTPSでアクセスがあった場合のWebサーバーはそれぞれ異なり、2台運用していたため、HTTPS側（Nginx）に疎通に必要なコードを追記しなければならない、と考えた。
• Nginxに以下のソースコードを追記
• その結果、疎通確認が取れ、アプリケーションを正常にHTTPS通信で稼働させることができた。

追加したソースコード（一部改変しています）

upstream app_server2 {
    server unix:/var/www/アプリ名/shared/tmp/sockets/unicorn.sock;
}

server {
    server_name  取得したドメイン名;
    root         /var/www/アプリ名/public;

    include /etc/nginx/default.d/*.conf;

    client_max_body_size 2g;

    location ^~ /assets/ {
      ※非公開
      root /var/www/アプリ名/current/public;
      }

    location ^~ /packs/js/ {  ※ここのコードを追加しました
      ※非公開
      root /var/www/アプリ名/current/public;
      }

    try_files $uri/index.html $uri @unicorn;

    location @unicorn {
       ※非公開
    }

    error_page 404 /404.html;
    location = /404.html {
    }

    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
    }

listen [::]:443 ssl ipv6only=on; # managed by Certbot
listen 443 ssl; # managed by Certbot
ssl_certificate /etc/letsencrypt/live/ドメイン名/fullchain.pem; # managed by Certbot
ssl_certificate_key /etc/letsencrypt/live/ドメイン名/privkey.pem; # managed by Certbot
include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

ChatGPTに入力した内容

これを入力したことで、すべて解決しました。（自分だけで考えていた結果、半月かかりました）

自身が入力した質問内容

Webサーバー(nginx)の設定を見直そうと思います。packs/jsにあるjavascriptに、HTTPSでアクセスするようにするためのコードを教えてください。

ChatGPTの回答（一部改変）

nginxのlocationブロックを以下のように設定することで、HTTPSでアクセスできるようになります。

location ^~ /packs/js/ {
　　※非表示
}

この設定により、https://app_server2に対して、/packs/js/以下のリソースに対してHTTPSでアクセスするようになります。