如何在80端口同时部署Angular/React SSR与无头WordPress后台(仅后端)
如何在80端口同时部署Angular/React SSR与无头WordPress后台(仅后端)
嘿,我来帮你搞定这个需求!其实核心思路就是用Apache做反向代理,把不同路径的请求分流到Angular SSR和WordPress后台,同时把WordPress改成纯后端模式,具体步骤一步步来:
第一步:调整Angular Universal的运行端口
因为要让Apache独占80端口,所以先把你的Angular SSR服务改到其他端口,比如3000:
- 如果你是通过命令启动服务,可以改成:
node dist/server/main.js --port 3000 - 也可以在
server.ts里修改端口配置,把默认的80改成3000,确保服务启动后能在http://localhost:3000正常访问。
第二步:配置Apache反向代理模块
首先得启用Apache需要的代理模块,在终端运行:
sudo a2enmod proxy proxy_http rewrite sudo systemctl restart apache2
接下来编辑Apache的虚拟主机配置文件(通常是/etc/apache2/sites-available/000-default.conf),替换成以下内容:
<VirtualHost *:80> ServerName <你的IP或域名> # 把非WP后台的所有请求转发给Angular SSR RewriteEngine On RewriteCond %{REQUEST_URI} !^/(wp-admin|wp-login|backend) RewriteRule ^(.*)$ http://localhost:3000$1 [P,L] # 映射WP后台路径到8080的WordPress服务 ProxyPass /wp-admin http://localhost:8080/wp-admin ProxyPassReverse /wp-admin http://localhost:8080/wp-admin ProxyPass /wp-login.php http://localhost:8080/wp-login.php ProxyPassReverse /wp-login.php http://localhost:8080/wp-login.php # 把/backend也映射到WP后台,方便记忆 ProxyPass /backend http://localhost:8080/wp-admin ProxyPassReverse /backend http://localhost:8080/wp-admin # 禁用WordPress前端访问,非后台路径直接返回404 <Location /> ProxyPass http://localhost:8080/ ProxyPassReverse http://localhost:8080/ RewriteCond %{REQUEST_URI} !^/(wp-admin|wp-login|backend) RewriteRule ^(.*)$ - [R=404,L] </Location> </VirtualHost>
解释一下:这里通过RewriteCond排除了WP后台相关的路径,其他所有请求都交给Angular处理;同时把/backend直接映射到WP的/wp-admin,你访问哪个路径都能进后台;最后通过规则拦截WP的所有前端请求,直接返回404。
第三步:修改WordPress配置,锁定纯后端模式
打开WordPress根目录下的wp-config.php文件,添加以下代码:
# 强制WordPress使用正确的后台域名,避免跳转错误 define('WP_HOME', 'http://<你的IP或域名>/wp-admin'); define('WP_SITEURL', 'http://<你的IP或域名>/wp-admin'); # 拦截所有非后台/登录页的请求,返回404提示 add_action('template_redirect', function() { if (!is_admin() && !is_login()) { wp_die('前端已禁用,请访问/wp-admin或/backend进入后台', '', array('response' => 404)); } });
这一步是双重保险,即使Apache的规则没生效,WordPress自己也会拦截前端请求,确保只有后台能正常访问。
第四步:重启服务并测试
- 先重启你的Angular SSR服务,确保它在3000端口正常运行;
- 然后重启Apache:
sudo systemctl restart apache2; - 测试效果:
- 访问
http://<你的IP>应该加载Angular应用; - 访问
http://<你的IP>/wp-admin或http://<你的IP>/backend应该能正常进入WordPress后台; - 尝试访问WordPress前端路径(比如
http://<你的IP>/blog),应该返回404提示。
- 访问
内容来源于stack exchange




