阿里云CentOS8系统上Nginx部署多个Vue项目(多端口监听)

这篇具有很好参考价值的文章主要介绍了阿里云CentOS8系统上Nginx部署多个Vue项目(多端口监听)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

友情链接

阿里云CentOS8系统上安装Nginx服务器----Vue项目部署(一)
阿里云CentOS8系统上部署前后端分离项目----Vue项目部署(二)

vue项目打包

编译工具:webstorm
终端中输入:npm run build
阿里云CentOS8系统上Nginx部署多个Vue项目(多端口监听)
打包成功,文件都生成在项目中dist下
阿里云CentOS8系统上Nginx部署多个Vue项目(多端口监听)

查看nginx的配置文件路径

sudo find / -name nginx.conf 

阿里云CentOS8系统上Nginx部署多个Vue项目(多端口监听)

部署项目

将打包好的Vue项目的dist文件夹中的文件全部上传到服务器上。
路径位于上一步查到的nginx配置文件上一级中的html文件夹中。
在html文件夹中定义好项目的文件夹名字,将dist中的所有文件上传至其中就行。
阿里云CentOS8系统上Nginx部署多个Vue项目(多端口监听)

nginx配置文件修改

找到nginx.config修改其中的配置
阿里云CentOS8系统上Nginx部署多个Vue项目(多端口监听)
此时监听的是 http://localhost:8084

监听配置多个项目

如果需要监听多个端口项目的时候,只需在nginx.config文件中新增一个相应的server模块就行。
此时其他项目监听的是http://localhost:8088/api
阿里云CentOS8系统上Nginx部署多个Vue项目(多端口监听)

重启nginx

配置完成后,需要重启nginx才能更改成功。

/usr/local/webserver/nginx/sbin/nginx -s reload

放开端口

阿里云配置路径:云服务器ECS -> 安全组 -> 点击安全组名字进入详情页手动配置
阿里云CentOS8系统上Nginx部署多个Vue项目(多端口监听)

其他

nginx默认访问nginx/html文件夹中的index.html。如果仅需要配置一个项目的时候,只需将打包好的项目上传至此文件夹并替换为新的,再修改nginx.config配置文件中的端口号就行了,无需修改项目路径。阿里云CentOS8系统上Nginx部署多个Vue项目(多端口监听)

注意事项

去除nginx代理前缀

nginx反向代理请求地址最后带‘/’时会将原监听地址的前缀去除,即http:localhost:8081/api/xx
的代理地址为http:localhost:8082/xx;
若反向代理请求地址最后不带‘/’则不会去除原来监听的前缀,即http:localhost:8081/api/xx
的代理地址为http:localhost:8082/api/xx。


    server {
            listen       8081;
            server_name  localhost;
            location /api {
                  #加/会去除api前缀,但是后端security会拦截‘//’
                  proxy_pass   http://localhost:8082/; 
            }
        }

解决请求地址带’//'时后端Spring Security拦截问题

The request was rejected because the URL contained a potentially malicious String//“

源码位置:StrictHttpFirewall.setAllowUrlEncodedDoubleSlash
阿里云CentOS8系统上Nginx部署多个Vue项目(多端口监听)

只需在相应配置中重新注入StrictHttpFirewall对象,就可以让它支持//的模式

/**
     * 配置地址栏不能识别 // 的情况
     * @return
     */
    @Bean
    public HttpFirewall allowUrlEncodedSlashHttpFirewall() {
        StrictHttpFirewall firewall = new StrictHttpFirewall();
        //此处可添加别的规则,目前只设置 允许双 //
        firewall.setAllowUrlEncodedDoubleSlash(true);
        return firewall;
    }

阿里云CentOS8系统上Nginx部署多个Vue项目(多端口监听)

前端vue请求路径统一添加前缀

在main.js文件中设置baseURL

import axios from "axios";
//设置全局前缀(window.open(url)时,url不会加此前缀)
axios.defaults.baseURL = '/api'

阿里云CentOS8系统上Nginx部署多个Vue项目(多端口监听)


注:能力有限,还请谅解,争取早日能够写出有质量的文章!

我是皮蛋布丁,一位爱吃皮蛋的热爱运动的废铁程序猿。

阿里云CentOS8系统上Nginx部署多个Vue项目(多端口监听)文章来源地址https://www.toymoban.com/news/detail-455609.html

感谢各位大佬光临寒舍~

到了这里,关于阿里云CentOS8系统上Nginx部署多个Vue项目(多端口监听)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

原文地址:https://blog.csdn.net/qq_42700766/article/details/125380035

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

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

相关文章

  • 【运维】手把手教你在Linux/Windows系统使用Nginx部署多个前端项目【详细操作】

            需求:项目上线需要将前端的前台和后台部署在服务器上提供用户进行使用,部署在不同的服务器直接在服务器安装nginx即可。但是在内网安装还是有点麻烦,因为需要联网,如果是内网可以参考Linux安装Nginx并部署前端项目【内/外网-保姆级教程】_MXin5的博客-CSDN博

    2024年02月08日
    浏览(14)
  • 如何将 Docsify 项目部署到 CentOS 系统的 Nginx 中

    🎉如何将 Docsify 项目部署到 CentOS 系统的 Nginx 中 ☆* o(≧▽≦)o *☆嗨~我是IT·陈寒🍹 ✨博客主页:IT·陈寒的博客 🎈该系列文章专栏:AIGC人工智能 📜其他专栏:Java学习路线 Java面试技巧 Java实战项目 AIGC人工智能 数据结构学习 🍹文章作者技术和水平有限,如果文中出现错

    2024年02月05日
    浏览(8)
  • Centos7通过nginx+tomcat部署Vue+SpringBoot项目(超详细步骤,从nginx+tomcat安装到Vue+SpringBoot打包配置+nginx.conf)

    目录 一丶前言 二、安装nginx 1.准备nginx 2.服务器上传nginx 3.解压nginx  4.安装相关依赖库 5.编译nginx 6.启动nginx 7.访问nginx  8.安装成系统服务 三、安装Tomcat 1.安装JDK(如果安装并配置环境变量了可以略过) 2.准备Tomcat 3.服务器上传tomcat 4.解压tomcat  5.启动tomcat 6.访问tomcat 7.设置

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

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

    2024年02月01日
    浏览(10)
  • docker配置nginx,并部署多个项目

    前言 基于开发需要需要使用Docker安装nginx,并部署多个前端项目。 1、docker安装nginx容器 2、配置nginx.conf 此时访问 192.168.31.131:8088/one 或者 192.168.31.131:8088/tow ,就可以访问各自的项目了。 3、其中可能会出现的问题 例如: nginx 反向代理到 one 项目后,在刷新页面突然出现 404 的

    2024年02月03日
    浏览(11)
  • Nginx 配置多个Vue项目

    背景:公司要求将之前用不同端口号区分的三个独立的系统统一配置到统一域名下。 VUE项目配置 示例:有两个项目 第一个:打包到 `test1`目录中; 第二个:打包到 `test2` 目录中; 注意:第二个项目需要需要做以下修改,然后再进行打包。第一个项目啥都不用动,就用默认的

    2024年02月13日
    浏览(14)
  • Nginx分端口部署两个或多个项目(包含反向代理配置)

    Author:think 一、部署Nginx 若读者没有部署安装Nginx,则可以参考下面这篇文章进行安装。 CentOS 7非编译安装Nginx_think_mzs的博客-CSDN博客 二、分析Nginx配置文件 通过上面的方法安装的Nginx,其配置文件在 /etc/nginx/ 目录下,如下图所示。 其中 nginx.conf 为Nginx的主要配置文件,在 co

    2024年02月05日
    浏览(10)
  • Linux/openEuler系统部署spring boot+vue前后端分离项目(nginx均衡代理)

    可以看我前面的文章 华为openEuler系统安装openjdk并配置环境变量 openEuler系统安装nginx HUAWEI-OpenEuler系统安装MySQL服务器并使用详细步骤 Ubuntu安装MySQL服务器详细步骤 在确定项目可以正常运行的前提下,进行package打出jar包 npm run build 打包成功后在项目文件路径下出现dist文件夹

    2024年03月24日
    浏览(20)
  • uni-app 前端项目(vue)部署到本地win系统Nginx上 http

     背景: 若依移动端的项目:整合了uview开源ui框架 部署流程 1. 配置后端请求接口基本路径地址: 2. 打包复制到nginx下:nginx/htm/newxss, (newxss目录手动创建) 3.在nginx上配置了站点与api代理  Nginx配置 安装个稳定版本的:nginx-1.24.0 部署配置: 1.增加了网站: 8083端口 的, 网站

    2024年04月12日
    浏览(3)
  • Docker中的Nginx配置代理实现不同url访问多个vue项目

    本篇文章接上回Docker中的Nginx配置代理实现不同url访问vue和springboot项目-CSDN博客 在上篇已经实现可以访问http://ip/qianduan   到我们的vue项目,但是有个问题就是如果多个vue项目在/assets/ 的静态资源文件夹就无法设置, 我试过在nginx里面使用if,try_files,map等使其根据不同请求的

    2024年03月16日
    浏览(15)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包