nginx 代理转发，让生产和测试环境React、Vue项目轻松访问API，前端路由不再404...

68 阅读 0 评论 45 点赞

我是靠谱客的博主多情音响，最近开发中收集的这篇文章主要介绍 nginx 代理转发，让生产和测试环境React、Vue项目轻松访问API，前端路由不再404...，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

我有一些需求，需要搭建一个静态服务，路由在前端，前端请求API，需要到代理到API服务器，图片资源需要代理到图片资源服务器。这里持续更新修正

upstream server-api{
    # api 代理服务地址
    server 127.0.0.1:3110;    
}
upstream server-resource{
    # 静态资源 代理服务地址
    server 127.0.0.1:3120;
}
server {
    listen       3111;
    server_name  localhost;      # 这里指定域名
    root /home/www/server-statics;
    # 匹配 api 路由的反向代理到API服务
    location ^~/api/ {
        rewrite ^/(.*)$ /$1 break;
        proxy_pass http://server-api;
    }
    # 假设这里验证码也在API服务中
    location ^~/captcha {
        rewrite ^/(.*)$ /$1 break;
        proxy_pass http://server-api;
    }
    # 假设你的图片资源全部在另外一个服务上面
    location ^~/img/ {
        rewrite ^/(.*)$ /$1 break;
        proxy_pass http://server-resource;
    }
    # 路由在前端，后端没有真实路由，在路由不存在的 404状态的页面返回 /index.html
    # 这个方式使用场景，你在写React或者Vue项目的时候，没有真实路由
    location / {
        try_files $uri $uri/ /index.html =404;
    }
}