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

chanthuang 发布于2019-07-25 13:54 / 717人阅读

摘要：我有一些需求，需要搭建一个静态服务，路由在前端，前端请求，需要到代理到服务器，图片资源需要代理到图片资源服务器。

我有一些需求，需要搭建一个静态服务，路由在前端，前端请求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;
    }
}

GPU云服务器云服务器生产环境测试环境测试环境生产环境测试环境与生产环境区别 nginx404怎么解决

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/39503.html

Nginx

摘要：此外，其也能够提供强大的反向代理功能。是由为俄罗斯访问量第二的站点开发的，第一个公开版本发布于年月日。 keepalived+nginx 实现高可用双机热备 + 负载均衡架构 1 准备4个ubuntu16.04虚拟机（启用网卡二并使用桥接模式）:A服务器：192.168.0.103 主B服务器：192.168.0.104 主（备）前端工程师学习 Nginx ...

syoya 2019-07-25 14:06 评论0 收藏0
前端项目部署

摘要：前端项目部署之前很少接触前端项目的部署，这次为了更全面的学习就在本机上装了一个虚拟机上，在虚拟机上练习了如何把一个写的项目部署到这个虚拟机的服务器上。前端项目部署之前很少接触前端项目的部署，这次为了更全面的学习就在本机上装了一个虚拟机上，在虚拟机上练习了如何把一个 react 写的 spa 项目部署到这个虚拟机的服务器上。由于 linux 也是刚接触不久，所以整个过程还是遇到了很多...

Aceyclee 2019-07-25 14:21 评论0 收藏0
尚学堂 react -后台管理系统开发流程

摘要：项目开发准备描述项目技术选型接口接口文档测试接口启动项目开发使用脚手架创建项目开发环境运行生产环境打包运行管理项目创建远程仓库创建本地仓库配置将本地仓库推送到远程仓库在本地创建分支并推送到远程如果本地有修改新的同事克隆仓库如果远程修 day01 1. 项目开发准备 1). 描述项目 2). 技术选型 3). API接口/接口文档/测试接口 2. 启动项目开发 1). 使用react...

lemon 2019-08-26 10:42 评论0 收藏0