Linux-Nginx前端项目部署

歐陽。

已于 2022-11-25 15:14:40 修改

阅读量2k

点赞数 2

分类专栏： Linux 文章标签： linux 负载均衡 nginx 运维运维开发

于 2022-11-25 15:13:45 首次发布

本文链接：https://blog.csdn.net/weixin_65211978/article/details/128037755

版权

Linux 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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

保存后再重启服务

前端也部署成功了

歐陽。

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
Linux-Nginx前端项目部署

Nginx负载均衡，反向代理，动静分离，Nginx安装，Tomcat负载均衡，Nginx配置，负载均衡后台项目发布，Nginx部署项目，将前端项目打包，hbuilderX打包vue项目白屏问题，hbuilderX打包vue项目，element-ui的icon图标无法正常显示问题，前端项目部署，将IP/host主机映射，将百度的网页地址改成我们自己的，完成Nginx动静分离的default.conf的相关配置，Nginx前端上传，配置Nginx项目静态资源
复制链接

扫一扫