如何配置Nginx实现Nuxt站点与Strapi后台的反向代理？

问题分析 #

当前配置存在两个核心问题：

1. Strapi管理面板无法访问：Strapi默认重定向到/admin路径，但该请求被Nuxt的location /规则处理，未转发到Strapi服务；
2. Uploads图片加载失败：Strapi上传文件默认路径为/uploads，同样被Nuxt接管，未转发到Strapi，导致图片无法加载。

解决方案 #

1. 修正Nginx主配置文件 #

更新server块，添加针对Strapi管理面板和上传文件的代理规则，同时修正监听地址的错误：

server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2;  # 修正原配置中0.0.0.01的错误，支持IPv6

    server_name example.com;
    root /var/www/example.com/client;
    index index.mjs index.html index.xml;

    ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;
    ssl_trusted_certificate /etc/letsencrypt/live/example.com/chain.pem;

    include snippets/ssl-params.conf;

    location / {
        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_set_header        X-Forwarded-Proto $scheme;
        proxy_redirect          off;
        proxy_buffering         on;
        proxy_cache_valid       200 1d;
        proxy_cache_use_stale   error timeout invalid_header updating http_500 http_502 http_503 http_504;

        proxy_pass              http://nuxt;
        proxy_read_timeout      1m;
        proxy_connect_timeout   1m;
        include proxy_params;
    }

    # 代理Strapi API路径
    location /api/ {
        rewrite ^/api/(.*)$ /$1 break;
        proxy_http_version 1.1;
        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Server $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header Host $http_host;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
        proxy_pass_request_headers on;
        proxy_pass http://strapi;
        include proxy_params;
    }

    # 代理Strapi管理面板：访问example.com/admin直接转发到Strapi
    location /admin/ {
        proxy_http_version 1.1;
        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Server $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header Host $http_host;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
        proxy_pass_request_headers on;
        proxy_pass http://strapi;
        include proxy_params;
    }

    # 代理Strapi上传文件路径：确保/uploads请求转发到Strapi
    location /uploads/ {
        proxy_http_version 1.1;
        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_pass http://strapi;
        include proxy_params;
    }

    location /_nuxt/hmr/ {
        proxy_pass http://localhost:24678;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

2. 调整Strapi配置（必做） #

编辑Strapi项目的config/server.js（或config/server.ts），设置正确的公共URL，确保生成的API和图片链接带正确前缀：

// config/server.js
module.exports = ({ env }) => ({
  host: env('HOST', '0.0.0.0'),
  port: env.int('PORT', 1337),
  app: {
    keys: env.array('APP_KEYS'),
  },
  url: env('PUBLIC_URL', 'https://example.com/api'), // 配置为你的域名+api前缀
  admin: {
    url: '/admin', // 保持默认路径，配合上面Nginx的location /admin/规则
  },
});

如果需要通过/api/admin访问管理面板，需做以下调整：

• 修改Strapi的admin.url为'/api/admin'
• 替换Nginx中的location /admin/规则为：

location /api/admin/ {
    rewrite ^/api/admin/(.*)$ /admin/$1 break;
    proxy_http_version 1.1;
    proxy_set_header X-Forwarded-Host $host;
    proxy_set_header X-Forwarded-Server $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_set_header Host $http_host;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "Upgrade";
    proxy_pass_request_headers on;
    proxy_pass http://strapi;
    include proxy_params;
}

3. 重启服务生效 #

• 重启Strapi服务：pm2 restart strapi（根据你的进程管理器调整）
• 重启Nginx：sudo systemctl restart nginx

关键修改说明 #

• 修正了原Nginx配置中listen 0.0.0.01的语法错误，替换为标准IPv6监听地址
• 添加location /admin/和location /uploads/规则，确保Strapi的核心路径被正确代理
• 配置Strapi的url参数，避免生成的API和图片链接出现路径错误

内容的提问来源于stack exchange，提问作者Frallen