Vue.jsをGCSにホスティングするときの注意点
事象
Vue.jsなどのSPAはGCSやS3のようなオブジェクトストレージにデプロイするとほぼ無限にスケールするので非常に便利です。
ただ、ちょっと罠というか注意点があるので注意。それは「ブラウザから直接任意のURLを表示しようとするとき」です。
具体的にはvue-routerで作成した動的なリンクにアクセスしようとすると以下のようなエラーが出ます。
<Error>
<Code>NoSuchKey</Code>
<Message>The specified key does not exist.</Message>
<Details>No such object: slide4vr.nklab.dev/home</Details>
</Error>
これ自体は404エラーの時に出るものなのですがローカルでは問題なく動きますし、トップページから順番に遷移させてる場合にはGCS上でも変わらず動作します。
なんでだろう、と思いつつ放置してたのですが、今回Slide4VRでSlideshareのようにTwitterとかのリンクから直接参照できるページをVue.jsとGCSで作りたくて少し真面目に調べてみました。
解決策
結論から言えばGCSの「Webサイトの構成」で「インデックス（メイン）ページ サフィックス」だけではなく、エラーページも「index.html」を指定してやれば良いみたいです。
まあ、考えてみれば当たり前なのですがVue-Routerが作った動的なURLを直接GCSやCloud Load Balancerが知ってる分けもなく当然存在しないリンクとして404になります。
なので、404にindex.htmlを指定してやる事でvue-routerを経由させるわけですね。わかってしまえば納得の実装。
とはいえ、ちょっとHackeyな手順な気もするのでもう少し良い方法が作られると良いなー。エラーページにも指定するならindex.htmlじゃなくてrouter.htmlとかの名前にすれば違和感が減るだろうか？ うーん。
まとめ
たぶん、超然基本的な問題でSPAを使う時のあるある問題なんだと思いますが、地味に今まで気づかなかったのでメモがてら記載しときます。
それではHappy Hacking!
Discussion