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

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

# この記事は誰向けの記事か？
- AWS(EC2)で稼働させているアプリをSSL化した後、一部機能でエラーが発生して困っている人
- Google検索で「packs/js/application-xxxxxxx.jsがNot Foundになる」と検索しても、解決しない人
- 検証ツール上で、以下のようなエラーが発生している人
![スクリーンショット 2023-02-10 21.23.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3079289/24ea02df-9ff2-65c6-f418-d675c1a6a481.png)
/packs/js/application-xxxxxxx.js net::ERR_ABORTED 404 (Not Found)

# 背景
- 以下の記事で実装した際に起こった問題になります。
https://qiita.com/portfoliokns3/items/36aa98a2ecce7da1c708
- HTTPのプロトコルではエラーなどは発生していなかったが、HTTPSに切り替えた途端、一部機能でエラーが発生した。
- 具体的にはログアウトしたり、データを削除したり、投稿した内容に「いいね」した時に以下の画面に通じてしまいました。
![スクリーンショット 2023-02-13 15.44.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3079289/53badb6c-150a-0a85-5476-ea8f05d35a2c.png)
- GoogleChromeの検証ツールを用いて、HTTP通信とHTTPS通信とを比較すると、HTTPS側で以下のようなエラーが確認できた。
![スクリーンショット 2023-02-10 21.23.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3079289/fe682fad-7003-f74b-8f4f-8a1e2868fdf8.png)
- 上記画像のアドレスへ直接アクセスした場合、以下のように正しくアクセスができなかった。
![スクリーンショット 2023-02-10 21.24.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3079289/0004e07f-a6ba-2b30-8679-597ad774e15c.png)
- HTTPに変更した場合、アクセスすることに成功した。
![スクリーンショット 2023-02-10 21.24.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3079289/a66bb2da-7f78-255d-6d75-c1b6b3b2b3de.png)
- 検証ツールでエラーの詳細を確認したところ、リクエストした内容に対して、404のエラーが帰ってきており、「そのようなページは存在しない状態」となっていた。
![スクリーンショット 2023-02-10 21.30.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3079289/25ea5251-92fc-34ef-4a4c-207cc9aaacfb.png)
- 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でアクセスするようになります。