使用又拍云CDN部署 SPA 单页应用(vue angular react 均适用)以及 SEO方案
发布于 6 年前 作者 zuohuadong 5209 次浏览 来自 分享

为啥只能用又拍云呢? 因为我问了 腾讯云 阿里云 七牛云,他们不支持 rewrite 。 emmmm

准备阶段

先放邀请链接,感谢支持: https://console.upyun.com/register/?invite=SkfG6OZyz

如果需要SEO ,开发阶段建议使用: nuxt (vue), next.js (react) ,material2 (angular) 不然会埋好大的坑

CDN 部分

  1. 注册后直接创建云存储,填好相关信息。 image.png
  2. 添加默认解析到 又拍云提供的 CNAME 地址。
  3. 授权操作员,通过FTP 或者 UPX 工具上传build 后的前端代码。(build 前请启用 history 模式) 确保 index.html 在根目录即可。
  4. 重点来了,点击边缘规则。 image.png 选择编程模式,然后在规则编辑器添加以下内容,规则状态选择 启用。
$WHEN($NOT($MATCH($_URI,'[\\.]')))/index.html

image.png 5.点保存,至此规则就添加完了,刷新页面再也不会 404 了。

SEO 部分

利用域名解析 将 搜索引擎解析到 后端 SSR 服务器IP。

image.png

后端用 对应的 SSR 渲染方案启动即可。

回到顶部