最近在尝试部署一个单页应用,但也遇上了一些不大不小的问题的,在此做一次记录。

首先我的音乐是一个音乐播放器,并且有一些api是无法通过qq音乐的jsonp接口获取的,需要进行后端代理。所以这里就有两部分的结构,第一呢是我的静态页面,第二是我的服务器接口部分。

我的选择是在github的gh-pages上部署我的静态页面,并且在我的Amazon EC2 VPS上用express 跑一个api服务。为什么不全部做在VPS上呢,因为其实EC2的流量很少,并且速度不见得比github快,承担一些api的递交还是没有问题的。

静态页面的部署

首先是工程的最终打包,获得一个dist目录,接着在git中建立一个gh-pages分支,当然你可以使用 orphan 参数建立一个干净无依赖的分支。最后Push到github的仓库之中。但是会出现静态资源无法加载的问题,原因很简单,我的静态主页面的地址是 http://yinode.tech/vue-moblie-music-app/ 但是他内部静态资源的地址却是 http://yinode.tech/static/*

也就是说我们的静态页面中资源的src地址出现的错误了,解决办法就是在webpack中的打包中加入我的public path (因为我用的vue cli所以是在另一个位置中)

后续更新

2018/1/9

突然想到直接在publicpath里填上一个 ./ 应该也是可以了,让他按照相对Html文档的路径去引用

    assetsSubDirectory: 'static',
    assetsPublicPath: 'http://yinode.tech/vue-moblie-music-app/',

这下我们可以访问我们的页面了,但是某些接口仍旧需要我们去建立

VPS API接口的建立

具体代码就不贴了,就是利用express+ axios进行一个代理,通过伪造http referer的方式来让qq音乐的官方接口接受我们的请求。

要注意你的VPS提供商的安全限制,比如我的ec2就需要手动打开80端口

要注意的是需要在 response header中设置一个属性 res.set('Access-Control-Allow-Origin', '*'),只有当设置了所有的origin都能访问我们的接口,才能开启CROS跨域,否则托管在gh-pages的页面是无法和我们的接口通信。如果要注意接口的安全,可以不用通配符而是预设好的源。

CDN的引入

我们都知道在国内访问github的速度并不理想,所以更好的办法是利用国内的一些CDN服务商进行静态资源的加速,但由于我没有备案的域名,也就懒得去用CDN进行加速了。只要在CDN中上传文件并重新设置一下webpack的Public path就可以了。

一些杂项

另外就是我使用的vue Router我默认设置成了HTML5的history模式,这在gh-pages上具有问题,因为在没有后端配合的时候,这个模式会有一些问题,比如你的愿意是访问xxx.com/singer 这个组件,但当你刷新之后这个URI是错误的,因为后端get的时候会返回一个404错误,并没有这个文件或者接口。正常情况下应该配合后端重新返回index.html或者是其他的资源。

我的解决办法是换成传统的hash模式

另外的问题在于我的路由匹配问题,我的组件默认会在根目录的时候跳转为recomment的路由,并开始加载这个组件,但是我却发现必须至少切换一次才能加载根组件

routes: [
    {
      path: '/',
      redirect: 'recommend'
    },

原因就在我们的根目录多加了一个仓库名,所以没有匹配上,所有我们可以多增加一个别名匹配。

    {
      path: '/',
      redirect: 'recommend'
    },
    {
      path: '/vue-moblie-music-app',
      redirect: 'recommend'
    },

最后 附上我的成品 vue-music-app