sorcererxw's blog

nginx 反向代理配置 Github Pages 的 api 网关

August 10, 2018

将 web app 部署在 Github Pages (以下简称 gp) 非常方便优雅, 但是会面临一个问题, 就是访问接口的跨域问题.

解决思路

通常, 我们直接将域名解析到 nginx 服务器, 再通过 nginx 反向代理, 将前端的 api 路径代理到 api 服务器上. 另一方面, 如果将项目部署在 gp 上面, 我们就需要将域名直接解析到 gp 服务器上. 这么一来, 两者就发生了冲突, 需要进行一些额外的配置. 那么, 我们索性将域名直接解析给 nginx, 然后通过 nginx 来将前端代理到 gp, api 代理到后端. 不过这么一来, 就没有遵循 gp 的配置规则, 无法启用 gp 的 enforce https 的功能, 不过这个跳转环节可以直接放在 nginx 上实现.

实践
准备工作

首先需要准备一台服务器, 然后安装启用 nginx, 将自己的所需要为前端配置的域名 example.com 解析到这台服务器上. 另外, 还需要配置好后端服务器, 并做好域名解析, 比如 api.example.com

部署 gh

参考

我之前的文章

来部署好 gh, 并在自定义域名栏目里面填入

example.com

, 由于解析地址的时候并没有解析到 gh, 所以看到 Enforce Https 无法勾选, 而且现在也无法进行访问.

配置 nginx 反向代理
Plain Text

好了, 然后重载一下 nginx

Plain Text

这个时候, 如果你访问 example.com 应该是可以访问了, 也能够在前端直接访问 api 接口. 原理就是, 虽然是直接将前端流量转发到 example.github.io, 但是通过当前地址栏当中的域名, gh 会显示为对应的前端页面.

配置 Https 跳转

最方便的办法就是直接使用 letsencrypt 的 certbot 进行配置 根据 https://certbot.eff.org/ 来进行安装

Plain Text

记得选上 redirect https 即可.

license by-nc-nd 4.0