You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

如何在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-adminhttp://<你的IP>/backend应该能正常进入WordPress后台;
    • 尝试访问WordPress前端路径(比如http://<你的IP>/blog),应该返回404提示。

内容来源于stack exchange

火山引擎 最新活动