承前
前回は新しいドメインにプロジェクトをアップロードできたよやったーみたいなことをしてました。
ただそのなかで、AWSの頃にはなんか雰囲気で対応できてた問題が復活していることに気付いたのでそこで中断してました。
問題の症状について
リロードすると404になるというものです。
特に意識して作成したわけではないのですが、作成したページがSPA（シングルページアプリケーション）というもので、それ特有の症状らしいです。
例によってふんわりです。
仕組みとしては、ブラウザのURL上では異なるパスに遷移しているように見せつつ、実際には同じページの中身を入れ替えて表示するアプリケーションとのこと（GPT調べ）。
この制御は最初にアクセスしたファイルのjsが行っているため、変化したパスに直接アクセスしたりリロードしたとしても別にパスに対応したファイルに遷移しているわけではないので404になると。
で、それの対策として「どこにアクセスしても起点となるページに戻してあげる」という対応が必要になるというわけですね。
あ、リダイレクトがいまいちうまくいかなかった理由ってこれか……？
.htaccessとやらを作成
というわけで早速どうにかする方法を試していきます。
まったくわかりませんが.htaccessというファイルでどうにかできるようです。
htってなんやねんと思ったらハイパーテキストだそうで。
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
# 実際に存在するファイルやディレクトリにはリダイレクトしない
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
# 他のすべてのリクエストをindex.htmlにリダイレクト
RewriteRule ^ index.html [L]
</IfModule>GPT調べの上記のソースをとりあえず貼り付けてみたところ、リロードしても404は出なくなりました。
コメントに書いてあるとおり、実在するファイルの場合はリダイレクトしないという制御も効いているっぽいです。
逆に、存在しないパスにアクセスしても普通にトップページが表示されてしまうようで、ここはちょっと今後修正したい気持ちになりました。
できちゃった。
ちょっと気になる部分はあるのですが爆速で目標を達成してしまいました。
次は何をするのか忘れたので確認します。
確認したところ、とりあえず新居への引っ越しは動作確認で完了のようでした。
やったぜー。
残りの作業はAWSからの引き上げと、CloudFlareの設定修正となります。
となると記事はちょっと短めになってしまいますが、一旦の区切りとしたほうがよさそうですね。
今回はシングルページアプリケーションって何なん？という大本の部分を勉強しつつ、.htaccessとやらを意外とすんなり設定できたという成果をもってヨシとします。
……などと、自分の心とアドセンス審査に言い訳をしつつ。
コメント