Halo前后端分离方案

在当今前后端分离大趋势下，还在使用FreeMarker的Halo博客，难免会有些更不上技术的脚步，所以我就用React+Next.js来重写了我当前的Halo-theme-xue主题。

重构主题的过程很艰辛，最开始的时候，因为没有考虑到 seo 的缘故， 只是使用了 create-react-app来写了一个单页面主题。其实这个版本的主题还是好的，在安装和使用上面和当前方式没有任何差别且体验上面更好，对于开发者来说也更完美。但是有一个致命的缺点，无法实现 SSR(Server Side Render) 。作为一个博客系统来说，这个缺点是致命的，因为大部分同学写博客的主要目的还是想要被大家所知晓。 于是就有了第二版，React+Next.js。在React的生态圈中，Next.js可以说是实现SSR的最好的方式了。这也是当前项目使用的技术栈。

使用React+Next.js开发虽然大部分上面和 Create-React-app差不多，但是很多细节上面的差别，且前端开发，只要一点没有配置对，直接就会报错。所以，在开发这个主题的时候，也是踩了很多坑，过程也是很痛苦的。下面还是直接说怎么使用吧。

开发指南

第一步：将当前项目复制到本地

git clone https://github.com/xzzai/halo-theme-xue.gitgit checkout react-next

或者直接下载zip文件。

第二步：安装依赖和构建

安装依赖我们可以使用 npm 、yarn 和 cnpm，在国内 cnpm 要快很多，所以我就直接使用cnpm。

cnpm install   # 安装依赖cnpm run build  # 构建项目（只是开发，这一步可以省略）

第三步：修改后台接口地址

修改src/utils/service.js中的baseUrl中的请求ip

由于是开发环境，修改 http://development.ip:port 为你开发环境的 ip 和端口。

第四步：在header中添加API-Authorization

为了安全起见，Halo后台对已 通过RestFUL方式调用接口进行管理，我们需要在管理后台进行个性化配置。

设置好之后，我们还需要修改src/utils/service.js中的配置项

这里的access key 需要和你后台配置的保持一致。

第五步：启动项目

npm run dev

启动成功后会打印日志[app server] › ✔ success <> Halo Blog ready on localhost:3000，直接在浏览中访问: https://localhost:3000

如何部署

由于 Next.js 的部署依赖Node和pm2，所以在部署前，你需要看看这几篇文章：

• Centos下安装Node运行环境
• 如何使用pm2自动部署Next.js项目
• Windows下安装pm2

鉴于各位的生产环境一般都是 Node ，所以安装Node环境是必要的。 部署 Next.js 使用的工具 pm2，所以需要在本地安装 pm2。如果是Ubuntu、Centos或MacOS可以参考如何使用pm2自动部署Next.js项目，如果是Windows可以参考Windows下安装pm2。

再说下面的步骤前，默认你已经在服务器上面安装好了 Node，且已在本地安装好 pm2。

第一步：安装主题

虽然当前主题已经前后端分离了，但是我们还是需要在管理后台安装主题（毕竟要使用Halo的接口）。这里也为大家提供了一个zip文件：halo/xue.zip，只需要把这个文件上传到管理后台，就可以使用Halo 的接口了。

第二步：修改请求地址

修改src/utils/service.js中的baseUrl中的请求 IP 和端口

这里是生产环境，所以修改http://production.ip:port 为你生产环境的 IP 和端口

第三步：添加API-Authorization

参考 第四步：在header中添加API-Authorization

第四步：部署

本项目已经为大家集成了 pm2 的环境和配置文件，各位使用者只需要修改ecosystem.json文件中指定配置就可以（参考 如何使用pm2自动部署Next.js项目）

npm run deploy 

这里还需要和大家说一下，在 如何使用pm2自动部署Next.js项目文中，我完整的讲述了如何部署 Next.js项目，但是对于使用本项目的人来说，完全没有必要，你只要完成在配置pm2之前的操作就可以了。

最后一步：配置Nginx转发

在使用这个之前，域名转发一般都是转发到后台服务端口，但是这里转发需要修改域名的转发地址为 ip:3000。