Linux-Nginx前端项目部署

news2025/8/3 15:29:04

目录

一、Nginx简介

负载均衡

 动静分离

二、Nginx安装

Tomcat负载均衡

准备2个tomcat

 修改此三处

 修改后保存

启动两个Tomcat

 修改Tomcat主界面​编辑

Nginx配置

查看nginx.conf配置

添加/更改配置​编辑

重启Nginx服务，让配置生效 

出现权限问题

测试Nginx负载2个tomcat的效果

负载均衡后台项目发布

三、Nginx部署项目

1.将前端项目打包--本地测试

hbuilderX打包vue项目白屏问题

 hbuilderX打包vue项目，element-ui的icon图标无法正常显示问题

使用 前端开发工具-HBuilder X 打包的话，必须添加以上两个配置，否则打出来的东西是没用的！ 

四、前端项目部署 

将IP/host主机映射

将百度的网页地址改成我们自己的

完成Nginx动静分离的default.conf的相关配置

将前端接口路径修改，添加api的配置

前端上传

将构建好dist项目，上传到云服务器/usr/local/...

配置静态资源

一、Nginx简介

负载均衡：流量分摊

反向代理：处理外网访问内网问题

动静分离：判断动态请求还是静态请求，选择性的访问指定服务器

负载均衡

 动静分离

二、Nginx安装

1) 添加 nginx 官方提供的 yum 源(需要联网且时间较长) rpm -Uvh http://nginx.org/packages/centos/7/x86_64/RPMS/nginx-1.14.2-1.el7_4.ngx.x86_64.rpm

 2) 使用 yum 安装

nginx yum install nginx

注1：yum方式安装nginx，它的安装根目录为/etc/nginx

注2：查看nginx版本 rpm -qa | grep nginx

注：默认端口号是80。只有端口号是80，在访问项目时不用加入端口号 

3) 启动及设置开机启动

systemctl start nginx.service systemctl enable nginx.service

 4) 设置防火墙开放 80 端口

firewall-cmd --zone=public --add-port=80/tcp --permanent

firewall-cmd --reload && firewall-cmd --list-port

当你两个命令想同时执行的时候，就加入&&符号

 5) 测试 nginx 是否可被访问，应该显示nginx的欢迎界面

http://服务器IP地址:80/

Tomcat负载均衡

准备2个tomcat

#准备2个tomcat

cp -r apache-tomcat-8.5.20/ apache-tomcat-8.5.20_8081/

 修改第二个Tomcat的端口号，不然会与第一个冲突

#第2个修改的配置如下
1. HTTP端口，默认8080，如下改为8081
2.远程停服务端口，默认8005，如下改为8006
3.AJP端口，默认8009，如下改,8010

 修改此三处

 

 修改后保存

启动两个Tomcat

 回想一下，好像8081的端口号没有开放

#开放端口
firewall-cmd --zone=public --add-port=8081/tcp --permanent
#再跟新防火墙规则
firewall-cmd --reload
#查看防火墙列表
firewall-cmd --zone=public --list-ports

 这时，我们在网页上跑一下

8080:

8081: 

为了区分Nginx的负载均衡是生效的，我们将Tomcat的主界面修改一下。 

 修改Tomcat主界面

另一个Tomcat也同样如此 

前端刷新

当我们不输入808*的时候，请求应会随机访问到两个Tomcat中的一个，可我们不输入的话就会默认进入Nginx的欢迎界面，那我们就需要去更改一下Nginx的配置了。

Nginx配置

查看nginx.conf配置

添加/更改配置

在nginx.conf添加
upstream  tomcat_list {  #服务器集群名字
server    127.0.0.1:8080  weight=1;   #服务器1   weight是权重的意思，权重越大，分配的概率越大。
server    127.0.0.1:8081  weight=1; #服务器2   weight是权重的意思，权重越大，分配的概率越大
}

 在default.conf添加

location / {
      #root   /usr/share/nginx/html;
      #proxy_pass   http://172.17.0.3:8080;
      proxy_pass   http://tomcat_list;
      index index.html index.htm;
  }

 重启Nginx服务，让配置生效 

systemctl restart nginx

出现权限问题


#解决方案：执行下面命令
setsebool -P httpd_can_network_connect 1

测试Nginx负载2个tomcat的效果

再刷新一下 

 OK，我们已经实现了一个请求地址访问多台服务器

负载均衡后台项目发布

#保障以下3个链接都能访问项目
http://IP地址:8080/T216_SSH/vue/treeNodeAction.action(后端项目)
http://IP地址:8081/T216_SSH/vue/treeNodeAction.action(后端项目)
http://IP地址/T216_SSH/vue/treeNodeAction.action(后端项目)
#注意：确保云数据库中是有数据的

#附录
#查看端口号
#查看所有端口号
lsof -i
#查看指定端口号
lsof -i:端口号
#杀死指定端口号进程kill -9 PID
kill -9 42177

#查看nginx的访问日志和错误日志
cat /var/log/nginx/access.log
cat /var/log/nginx/error.log

 最终的结果就是，Nginx访问一个网址，是由两个tomcat共同承担压力；

三、Nginx部署项目

1.将前端项目打包--本地测试

确保前端项目能用

先将前端连接后端接口服务器更改

在前端项目文件夹中运行cmd窗口

 如果 使用的前端开发工具是HBuilder X，直接打包的话是有点问题的，会白屏

hbuilderX打包vue项目白屏问题

hbuilderX打包vue项目白屏问题
将项目目录下的config文件夹里的index.js文件中,将build对象下的assetsPublicPath中的“/”，改为“./”后，再打包生成的 dist 文件
build: {
    // assetsPublicPath: '/',//修改前
    assetsPublicPath: './',//修改后
}

 hbuilderX打包vue项目，element-ui的icon图标无法正常显示问题

问题：使用vue-cli3脚手架搭建的项目，在打包文件上服务器的时候，其他的css，js样式都能正确加载出路径，
但是element的icon图标却不能正常加载出来。
问题分析：
加载的路径https://yxq.linksign.cn/static/css/static/fonts/element-icons.535877f.woff
本应该加载的路径https://yxq.linksign.cn/static/fonts/element-icons.535877f.woff
打包的路径
事实上是打包时候读取的文件路径多了两层；
找到build文件的utils.js 中有打包的路径，看看generateLoaders();
Extract CSS when that option is specified, 指定该选项时提取CSS
发现少了个公共路径，加上pubilcPath
if (options.extract) {
     return ExtractTextPlugin.extract({
       use: loaders,
       fallback: 'vue-style-loader',
       // 解决icon路径加载错误
       publicPath:'../../'
     })
   } else {
     return ['vue-style-loader'].concat(loaders)
   }

使用 前端开发工具-HBuilder X 打包的话，必须添加以上两个配置，否则打出来的东西是没用的！ 

前端项目修改完之后，我们就将项目打包

#将前端项目打包，生成dist文件夹，点击index.html访问项目测试
npm run build

打包成功，此时我们前端目录下会出现一个文件夹 我们直接点开这个界面就能具备前端的所有功能 

四、前端项目部署 

将IP/host主机映射

最终效果，希望是通过www.oy.com 就能访问此项目

#1.C:\Windows\System32\drivers\etc\hosts中增加映射关系
IP地址 www.oy.com

将百度的网页地址改成我们自己的

 可这明明是百度的网址，为什么会变成这样呢？

因为这是我们直接编码的服务地址，会优先执行我们本机的地址，如果本机没有，它将会执行公网的。公网就是我们日常进入的网站，而这个hosts是我们本机的。

但我们还是改回来，本篇文章要用

完成Nginx动静分离的default.conf的相关配置

定义规则：URL符合xxx标准走动态请求，不符合就走静态规则

# 代理配置
location / {
#该句代码是为解决history路由不能跳转的问题，在vue-router官网有介绍 
try_files $uri $uri/  /index.html;
}
location  ^~/api/ {
#^~/api/表示匹配前缀是api的请求，proxy_pass的结尾有/， 则会把/api/*后面的路径直接拼接到后面，即移除api
proxy_pass http://tomcat_list/;
}

 现在只是把动态资源绑定了，前端的包还需要重新打包

将前端接口路径修改，添加api的配置

 将之前打的包删除，再重新打包

将前台项目打包 (配合Nginx动静分离)

 #将前端项目打包，生成dist文件夹

npm run build

 再次运行

 登录有错误

是因为Nginx没有重启

重启Nginx
systemctl restart nginx

 重启完了之后我们再次登录

最后一步，将打包好的项目上传到服务器中

前端上传

注：静态的项目是不能随便放的，只能放在usr/local/里面 

将构建好dist项目，上传到云服务器/usr/local/...

 配置静态资源

  listen       80;            #监听80端口，可以改成其他端口
  #server_name  localhost;    #当前服务的域名
  server_name  www.oy.com; #当前服务的域名(虚拟域名也可以)
  root         /usr/local/mypro/dist;      #将要访问的网站的根目录，nginx节点会自动继承父节点的配置;这里放到/usr/local/*，放到其他路径下会有权限相关问题；必要的时候配置Nginx.conf的user为root

 保存后再重启服务

 前端也部署成功了

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/34810.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

计算机组成原理4小时速成：I/O系统，IO指令，编址方式，串行并行，程序查询传送，中断程序传送，DMA传送，接口组成

计算机组成原理4小时速成：I/O系统，IO指令，编址方式，串行并行，程序查询传送，中断程序传送，DMA传送，接口组成

计算机组成原理4小时速成：I/O系统，IO指令，编址方式，串行并行，程序查询传送，中断程序传送，DMA传送，接口组成 2022找工作是学历、能力和运气的超强结合体，遇到寒冬&#x…
阅读更多...
verilog generate

verilog generate

Verilog 生成块generate块允许乘以模块实例或执行任何模块的条件实例化。它提供了基于 Verilog 参数构建设计的能力。当需要多次重复相同的操作或模块实例，或者必须根据给定的 Verilog 参数有条件地包含某些代码时，这些语句特别方便。generate块不能包含…
阅读更多...
centos7 clamav 杀毒软件安装

centos7 clamav 杀毒软件安装

壹：编译安装 1，官网获取源码包 clamav官网地址 2，创建clamav 用户和存放病毒库目录 a, 创建clamav 用户和用户组 groupadd clamav && useradd -g clamav clamav && id clamavb,日志存放目录 mkdir -p /henan/clamav/lo…
阅读更多...
Spring中的ApplicationContext所体现出来的工厂模式

Spring中的ApplicationContext所体现出来的工厂模式

Spring初体验 通常我们写代码时，先定义一个Class，然后再别的地方实例化，再进行调用，比如下边的Hello World的例子，类Hello有一个say()方法，用于打印出“Hello World”的字符串，另一个类App&…
阅读更多...
python和R绘制箱线图+抖动点

python和R绘制箱线图+抖动点

python和R绘制箱线图抖动点 散点箱线图 IPCC AR6 https://www.ipcc.ch/ 通过散点展示数据的直观分布 x轴刻度标签如果是“连续”数据，可添加渐变背景。通过渐变来体现升温幅度，美观形象。 python版本： 先手搓数据： import pan…
阅读更多...
【构建ML驱动的应用程序】第 11 章 ：监控和更新模型

【构建ML驱动的应用程序】第 11 章 ：监控和更新模型

🔎大家好，我是Sonhhxg_柒，希望你看完之后，能对你有所帮助，不足请指正！共同学习交流🔎 📝个人主页－Sonhhxg_柒的博客_CSDN博客 📃 🎁欢迎各位→点赞…
阅读更多...
c++11 unique_lock 使用

c++11 unique_lock 使用

我们知道c11 提供了很多的类模板供我们使用&#xff0c;其中就有 lock_guard&#xff0c;这个用法也很简单&#xff0c;像这样&#xff1a; std::mutex m_mutex; std::lock_guard<std::mutex> guard(m_mutex); mutex 的 lock 和 unlock 完全是自动的&#xff0c;无需我…
阅读更多...
新鲜出炉｜基于深度学习的运维日志领域新进展

新鲜出炉｜基于深度学习的运维日志领域新进展

作者&#xff1a;云智慧算法工程师 Hugo Guo 运维日志领域研究方向主要包含异常日志检测、日志模式解析、日志内容分类、日志告警等。本篇文章介绍了热门异常检测模型 DeepLog、A2Log 等模型&#xff0c;以及云智慧自研模型 Translog 等。与此同时&#xff0c;在文章最后介绍了…
阅读更多...
springboot自定义starter实践

springboot自定义starter实践

创建一个spring项目 仿照spring的规范&#xff0c;artifact命名为xxx-spring-boot-starter 按需添加必要的依赖 这里只作为测试&#xff0c;就按最低的需求来只勾选如下三个 lombok、spring-boot-configuration-processor、spring-boot-autoconfigure 默认生成的项目结构如下…
阅读更多...
使用HuggingFace实现 DiffEdit论文的掩码引导语义图像编辑

使用HuggingFace实现 DiffEdit论文的掩码引导语义图像编辑

在本文中&#xff0c;我们将实现Meta AI和Sorbonne Universite的研究人员最近发表的一篇名为DIFFEDIT的论文。对于那些熟悉稳定扩散过程或者想了解DiffEdit是如何工作的人来说&#xff0c;这篇文章将对你有所帮助。 什么是DiffEdit? 简单地说&#xff0c;可以将DiffEdit方法…
阅读更多...
【论文解读】Self-Explaining Structures Improve NLP Models

【论文解读】Self-Explaining Structures Improve NLP Models

&#x1f365;关键词&#xff1a;性能提升、文本分类、信息推理 &#x1f365;发表期刊&#xff1a;arXiv 2020 &#x1f365;原始论文&#xff1a;https://arxiv.org/pdf/2012.01786.pdf &#x1f365;代码链接https://github.com/ShannonAI/Self_Explaining_Structures_Impro…
阅读更多...
Java内部类

Java内部类

Java当中内部类主要有4种&#xff0c;分别是静态内部类、实例内部类/非静态内部类、局部内部类&#xff08;几乎不用&#xff09;、匿名内部类。静态内部类&#xff1a;被static修饰的内部成员类 ①在静态内部类只能访问外部类中的静态成员 ②创建静态内部类对象时&#xff0c;…
阅读更多...
PB 2019 R3 MSOLEDBSQL SQL Server not available in Database Profiles

PB 2019 R3 MSOLEDBSQL SQL Server not available in Database Profiles

pb2019 pb2021,安装SQL OLEDB驱动时的注意事项&#xff1a; I installed PB 2019 R3, but when I go to the Database Profiles Window, MSOLEDBSQL SQL Server is not listed. Please go to the registry to check and see the key MSOLEDBSQL exists under HKEY_LOCAL_MACHI…
阅读更多...
Python之tkinter图形界面设计学习二

Python之tkinter图形界面设计学习二

图形用户界面&#xff08;简称GUI&#xff09;&#xff0c;是指采用图形方式显示的计算机操作用户界面。与计算机的命令行界面相比&#xff0c;图形界面对于用户的操作显得更加直观和简便。 一、tkinter模块 tkinter是Python的内置GUI模块。使用tkinter可以快速地创建GUI应用…
阅读更多...
Vue脚手架Ⅲ（浏览器本地存储，Vue中的自定义事件，全局事件总线，消息订阅与发布（pubsub），nextTick，Vue封装的过度与动画）

Vue脚手架Ⅲ（浏览器本地存储，Vue中的自定义事件，全局事件总线，消息订阅与发布（pubsub），nextTick，Vue封装的过度与动画）

文章目录脚手架3.10 浏览器本地存储3.11 Vue中的自定义事件3.12 全局事件总线3.13 消息订阅与发布&#xff08;pubsub&#xff09;3.14 nextTick3.15 Vue封装的过度与动画3.15.1 动画效果3.15.2 过度效果3.15.3 多个元素过度3.15.4 集成第三方动画3.15.5 总结过度和动画脚手架 …
阅读更多...
达梦数据库安装与初始化超详细教程

达梦数据库安装与初始化超详细教程

陈老老老板&#x1f9b8;&#x1f468;‍&#x1f4bb;本文专栏&#xff1a;国产数据库-达梦数据库&#xff08;主要讲一些达梦数据库相关的内容&#xff09;&#x1f468;‍&#x1f4bb;本文简述&#xff1a;本文讲一下达梦数据库的下载与安装教程&#xff08;Windows版&…
阅读更多...
一文解读 NFT 零版税

一文解读 NFT 零版税

当我们听到“版税”这两个字时&#xff0c;脑海中首先浮现的是什么&#xff1f; 是对创作者作品权属的保护&#xff0c;还是项目方、平台额外的收益&#xff1f; 长期以来&#xff0c;版税作为一种收益机制&#xff0c;让买家“为知识和内容付费”&#xff0c;又让卖家“享受…
阅读更多...
m在ISE平台下使用verilog开发基于FPGA的GMSK调制器

m在ISE平台下使用verilog开发基于FPGA的GMSK调制器

目录 1.算法描述 2.仿真效果预览 3.MATLAB部分代码预览 4.完整MATLAB程序 1.算法描述 高斯最小频移键控&#xff08;Gaussian Filtered Minimum Shift Keying&#xff09;&#xff0c;这是GSM系统采用的调制方式。数字调制解调技术是数字蜂窝移动通信系统空中接口的重要组成…
阅读更多...
决策树-相关作业

决策树-相关作业

1. 请使用泰勒展开推导gini不纯度公式&#xff1b; 2. 请说明树的剪枝怎么实现&#xff1b; ●预剪枝&#xff08;pre-pruning&#xff09;通过替换决策树生成算法中的停止准则。&#xff08;例如&#xff0c;最大树深度或信息增益大于某一阈值&#xff09;来实现树的简化。预…
阅读更多...
Flutter高仿微信-第39篇-单聊-删除单条信息

Flutter高仿微信-第39篇-单聊-删除单条信息

Flutter高仿微信系列共59篇&#xff0c;从Flutter客户端、Kotlin客户端、Web服务器、数据库表结构、Xmpp即时通讯服务器、视频通话服务器、腾讯云服务器全面讲解。 详情请查看 效果图&#xff1a; 实现代码&#xff1a; //删除对话框 Future<void> _showDeleteDialog(Ch…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023