nginxでnuxtjsを利用した静的サイトを立ててAWSのELBでhttps化したらリロードができない

はじめに

ローカルでnginxでnuxtjsで作ったサイトをテストして、いざ公開しようとしたら、リロードボタンを押すと読み込みできなかった話。

現象

nuxtjsでSPAで遷移する場合、URL欄に/loginなどが表示されます。
これは内部的には、フォルダになっており、/login/index.htmlにアクセスします。

一般的なwebサーバの仕組みは以下になります。

1. documentRootに同じパスのファイルがあるかチェックし、あったらそれを返す。
2. 同じ名前のフォルダがあるかチェックし、あれば、301 redirect で/付きのpathを返す
3. pathが/で終わっている場合は、設定により、index.htmlなどを返す。

今回は、2で、301 redirectするのですが、nginx的にはロードバランサーは知らないので、リダイレクト先に http://ホスト/フォルダ/ を返してしまうためです。

結局以下の設定ファイルでうまくいきました。

server{
    listen       80;
    
    auth_basic           "closed site";
    auth_basic_user_file /etc/nginx/conf.d/htpasswd;
    
    location = /_alive {
        return 200;
        satisfy any;
        allow   all;
    } 
    location ^~ / {
        root   /usr/share/nginx/html;
        index  index.html;
    }
    if ($http_x_forwarded_proto = http) {
      return 301 https://$host$request_uri;
    }
}

ヘルスチェックは /_alive
nuxtjsで作成したファイルは/usr/share/nginx/html下に配置します。

ELB経由でアクセスがあった場合、http_x_forwarded_protoにプロトコルが入ってくるそうです。
ここを != httpsにしているページもありましたが、そうするとヘルスチェック用の /_alive も転送されてしまうので、ロードバランサーがつながりません。
（あとローカルでテストもしにくいです。）