WebアプリをGithub Pages（以下、gpと略称）にデプロイすることは非常に便利でエレガントですが、アクセスインターフェースのクロスドメイン問題に直面することになります。
解決策¶
通常、私たちはドメイン名を直接nginxサーバーに解決し、nginxのリバースプロキシを通じて、フロントエンドのAPIパスをAPIサーバーにプロキシします。一方、プロジェクトをgp上にデプロイする場合は、ドメイン名を直接gpサーバーに解決する必要があります。これにより、両者の間で衝突が発生し、追加の設定が必要になります。そこで、ドメイン名を直接nginxに解決し、nginxを通じてフロントエンドをgpに、APIをバックエンドにプロキシすることにしました。しかし、この方法ではgpの設定ルールに従っておらず、gpのenforce https機能を有効にすることはできませんが、このリダイレクトのステップは直接nginx上で実装することができます。
実践¶
準備作業¶
まず、サーバーを用意し、nginxをインストールして起動します。フロントエンドに設定する必要があるドメイン名 <code>example.com</code> をこのサーバーに解決させます。さらに、バックエンドサーバーを適切に設定し、ドメイン名の解決も行います。たとえば <code>api.example.com</code> のようにします。
デプロイ gh¶
参照私の以前の記事でghをデプロイし、カスタムドメイン欄にexample.comを入力してください。解析アドレス時にghに解析されなかったため、Enforce Httpsを選択できない状態であり、現在アクセスもできません。
nginx のリバースプロキシを設定する¶
server
{
listen 80;
server_name example.com; # 填上自己的域名
location /api { # 配置前端 api 的路径
proxy_pass https://api.example.com/; # 填上要转发的 api 服务器地址
# 这里有一个需要注意的地方如果填的是 https://api.xxxx.com (末尾无斜杠)
# 那么, 当前端访问 xxxx.com/api/target 时
# nginx 会将请求转发到 https://api.xxxx.com/api/target
# 而如果填的是 https://api.xxxx.com/
# 那么, 当前端访问 xxxx.com/api/target 时
# nginx 会将请求转发到 https://api.xxxx.com/target
}
location / {
proxy_redirect off;
proxy_set_header host $host;
proxy_set_header x-real-ip $remote_addr;
proxy_set_header x-forwarded-for $proxy_add_x_forwarded_for;
proxy_pass https://example.github.io;
# 填上你的 gp 的二级域名, 比如我的是 sorcererxw.github.io
}
access_log /var/log/nginx/sorcererxw.com_access.log;
}では、nginx をリロードしましょう。
nginx -s reloadこの時点で、example.com にアクセスすると、アクセス可能になり、フロントエンドから直接 API インターフェースにアクセスすることもできます。原理としては、フロントエンドのトラフィックを直接 example.github.io に転送しているものの、アドレスバーに表示されるドメイン名を通じて、GitHub は対応するフロントエンドページを表示します。
Https リダイレクトの設定¶
最も便利な方法は、letsencrypt の certbot を直接使用して設定することです。https://certbot.eff.org/ に従ってインストールしてください。
certbot --nginx忘れずに https へのリダイレクトを選択してください。