Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
18
Help us understand the problem. What is going on with this article?
@asapon_rb

SPAにありがちな更新処理を行うと404になっちゃう問題(VueとHeroku版)

More than 1 year has passed since last update.

初めてのQiita投稿になります。よろしくお願いします!

Vue-cliでプロダクト作ったぞ!

Vueに限ったことではありませんが、私はよく何かしらシステムをデプロイする際はHerokuをよく使います。
簡単にデプロイできますしすでに色んな人が使っているので検索すれば何かしらやり方が見つかる。
そんな中、ちょっと困ったことが発生したので残しておきたいと思います。

Vue-cliをHerokuへデプロイ

以下記事が参考になると思います。
http://heimusu.hatenablog.com/entry/2017/02/27/220000

これを読めばserver.jsでHeroku周りを管理してpackage.jsonで必要なライブラリ、実行コマンドを用意すればいいのがわかりますね(server.jsはProcfileみたいなもの)。

HTML5 Historyモード

こいつです
https://router.vuejs.org/ja/essentials/history-mode.html

vue-routerを使っていると完全なSPAとして、ページのリロード無しにURL遷移したくなります。
そのため、modeをhistoryに変えて...ってひとは結構いると思います。

しかし
問題がありまして当然SPAのためindex.htmlしかありません。一応/hogeや/hoge/:idといったようにURL自体は存在します。ですが当然/hogeのようなURLで更新処理すると無いページのURLのためエラーが返ってきちゃうんですよね。

これを解消するためにはcatch-allフォールバックといって404はindex.htmlで全部受けとめてしまおうといった発想で対応します。
この設定を行うためサーバ側に処理を行うファイルを用意してあげます。例えばApache環境ならconfファイルや.htaccessに記述する感じですね(全くデプロイ経験がない人はApache conf ディレクティブとかでggるといいかもしれません)。

HerokuにVueを上げる際の設定

ここからが本題です。
node.js環境でHerokuにデプロイ(express環境)するさいはこいつを使います。
https://github.com/bripkens/connect-history-api-fallback

vue-routerの公式も推奨しているので安心ですね。

以下変更点(上に上げたHerokuデプロイ記事を見ておくの推奨)
1.npmでまとめて必要なものをinstallする
package.json
"postinstall": "npm install express connect-history-api-fallback"

2.server.jsの記述を変更
server.json
こちらを参考にしました!
https://forum.vuejs.org/t/how-do-i-implement-connect-history-api-fallback-`so-that-url-paths-redirect-to-index-html/10938/4

 var express = require('express');
 var app = express();
 var history = require('connect-history-api-fallback');

 app.use(history());

 app.use(express.static(__dirname));

 app.set('port', (process.env.PORT || 8080));
 app.listen(app.get('port'), () => {
 console.log('Derp is running at localhost: 8080');
 }); 

こいつらをdist内に入れてあとはgit push heroku masterとかで(おそらくsubtree使ってpushするのが大半だろうけど)デプロイすれば更新ボタンを押してもエラーにならない!
簡単でした!

参考まとめ

http://heimusu.hatenablog.com/entry/2017/02/27/220000
https://forum.vuejs.org/t/how-do-i-implement-connect-history-api-fallback-`so-that-url-paths-redirect-to-index-html/10938/4

18
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
asapon_rb
初心者でも分かりやすい記事を目指しています。 RailsとVue.js周りが中心。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
18
Help us understand the problem. What is going on with this article?