nginx配置代理多个前端资源

这篇具有很好参考价值的文章主要介绍了nginx配置代理多个前端资源。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

log:

背景

两套不同的前端使用同一个后端服务,前端使用的Nginx代理的dist包

前端

vue+elementui

后端

Python+flask

Nginx代理设置

1.进入Linux机器,whereis nginx 查看Nginx安装位置

nginx配置代理多个前端资源 2.进到Nginx配置文件下

nginx配置代理多个前端资源

3.vim nginx.conf  通过多个server管理多个端口前端资源代理

#前端一,端口8080访问就可以代理到
server {
        listen       8080;
        server_name  124.222.181.200;

        location /{
            root  /root/.jenkins/workspace/test_vue_ks/dist;
            index  index.html index.htm;

        }
        #后端接口
        location /api{
           proxy_pass http://xxx:5555/;
           proxy_cookie_path / /api;
               proxy_redirect default;
               rewrite ^/api/(.*) /$1 break;
               client_max_body_size 500m;
        }

    }
#前端二,端口8082访问就可以代理到
server {
        listen       8082;
        server_name  124.222.181.200;
        location /{
            root  /root/.jenkins/workspace/test_vue_xs/dist;
            index  index.html index.htm;

        }
        #后端接口地址
        location /api{
           proxy_pass http://xxx:5555/;
           proxy_cookie_path / /api;
               proxy_redirect default;
               rewrite ^/api/(.*) /$1 break;
               client_max_body_size 500m;
        }

    }

4.保存好了后,进到sbin文件下重启Nginx,

nginx配置代理多个前端资源文章来源地址https://www.toymoban.com/news/detail-405886.html

到了这里,关于nginx配置代理多个前端资源的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • nginx配置vue前端代理

    背景:做一个前后端分离的项目,我这里是vue3 + view + ts创建的前端项目,在前端配置跨域请求。 一、开发阶段 在vue.config.js中配置devserver的proxy进行代理请求配置,然后将所有请求改为/api开头的即可。但是这样配置只在开发阶段起作用。所以在nginx上部署的时候,需要再重新

    2024年02月03日
    浏览(47)
  • nginx配置内网代理,前端+后端分开配置

    我这块安装在了home里面,各位根据自身情况选择 打开nginx.conf文件 在底部查看是否包含这段信息:含义是配置文件包含该路径下的配置文件 include /home/nginx/conf/conf.d/*.conf; # 该路径根据自己的安装位置自行修改 进入conf.d文件夹,创建配置文件,文件名符合规范,后缀一定要是

    2024年01月21日
    浏览(48)
  • 服务器上一个域名对应多个前端项目的nginx转发配置

    场景: 当有两个前端项目A,B的时候,项目A(对应端口8000)和项目B(对应端口8001)分别部署在服务器的不同位置,通过服务器ip+端口都能正常访问单独的项目A和项目B;现在要求两个项目共用一个域名~~也就是说访问http://10.111.182.xxx:8000的时候默认访问项目A的资源,访问htt

    2024年02月05日
    浏览(51)
  • vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法

    由于vue为单页面项目,通过控制组件局部渲染,main.js是整个项目唯一的入口,整个项目都在一个index.html外壳中。 若项目过大,会造成单页面负载过重;同时,多页面利于模块独立部署。 如果项目中不同的页面需要不同的main.js和App.vue这样就需要配置多个入口了。 要单独将页

    2024年01月22日
    浏览(87)
  • Mac Docker安装配置nginx,配置代理前端访问服务器后端访问本地启动项目

     或者直接通过docker客户端查看 --name NginxTest:容器名称 -p 8080:8080:映射端口 -d nginx:设置容器后台运行  docker客户端查看 1)全局块:配置服务器整体运行的配置指令 nginx 服务器整体运行的配置指令,主要包括配置运行 Nginx 服务器的用户(组)、允许生成的 worker process 数,

    2024年02月02日
    浏览(60)
  • 【若依】前后端分离部署前端配置二级域名(部署到Nginx上,打开后一直显示正在加载系统资源)

    问题描述 最初部署前端文件到nginx上之后,打开页面却一直显示“正在加载系统资源,请耐心等待”字样,无法正常运行。研究后发现问题是由于服务器使用Nginx转发域名请求,无法使用根目录,所以对前端进行二级域名配置,修改代码如下: vue.config.js 其实若依给的注释里

    2024年02月03日
    浏览(45)
  • nginx-代理多个服务

    目录 1.主机多Ip 1.1单网卡多ip主机配置 1.2修改default.conf 1.3server1.conf 1.3server2.conf 1.4测试文件 1.4重启测试 2.主机多端口 2.1server1.conf 2.2server2.conf 3.多域名代理 3.1server1.conf 3.2server2.conf     ​

    2023年04月13日
    浏览(27)
  • linux中如何使用nginx部署多个静态资源文件?

    一、切换到nginx的配置文件路径下:cd /usr/local/nginx/conf 二、编辑nginx的配置文件:vim nginx.conf 三、修改或添加location代码块,如下 location /project1{ alias /usr/local/nginx/dist#静态资源路径 index index.html index.htm; } location /project2{ alias /usr/local/nginx/dist#静态资源路径 index index.html index.htm

    2024年02月05日
    浏览(40)
  • 【Nginx】静态资源部署、反向代理、负载均衡

    个人简介:Java领域新星创作者;阿里云技术博主、星级博主、专家博主;正在Java学习的路上摸爬滚打,记录学习的过程~ 个人主页:.29.的博客 学习社区:进去逛一逛~ nginx配置文件整体分为三部分: 全局块 :Nginx运行相关的全局配置 events块 :网络连接相关的配置 http块 :代

    2024年02月13日
    浏览(46)
  • nginx部署多个前端项目

    前提:nginx已在服务器上安装完成 假如有2个项目(一个company,一个test),需要通过ip或者域名来访问,我们通过http://www.test.com来举例 首先把2个静态资源项目或者打包好的项目放到Nginx中 在nginx的html里面 创建两个文件夹,一个services放服务端代码,一个web放前端代码 将前端

    2024年02月01日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包