程序员经验分享-hwhale

快速掌握Nginx部署前端项目（从Nginx安装配置及部署都非常详细哦！）

2023-05-16

前言：

之前在Linux系统中部署了后端项目，今天继续来给大家分享如何部署前端项目。

涉及到了Nginx的简单介绍以及Nginx如何安装及配置并且能够部署前端项目

Nginx是一个轻量级的反向代理web服务器，在当今应用地非常广泛，特别是前后端分离的情况下。

Nginx的三个作用：

负载均衡：

当我们的单个项目访问量达到了单个tomcat无法承受的时候，这个时候我们需要增加服务器来减少服务器的压力，而Nginx的负载均衡就是用来作为代理服务器，来分配访问具体到哪个tomcat服务器，就相当于SpringMvc中的dispatchered中央控制器，不作业务处理，只负责分配到具体的适配器。

用一个图来表示：

 

反向代理：

反向代理的意思就是，比如我们有些系统只能在规定的内网中才能访问，比如我们的公司的系统，只能在公司的内网才能登录公司系统。但是我们想要在家里或者在外网也能访问该系统怎么办？

这时Nginx反向代理就可以解决这个问题，我们恭公司系统配置好Nginx代理服务器后，只需将我们外网的ip加入到Nginx白名单中即可实现：指定的外网ip也可以访问内网系统！

动静分离：

 动静分离的意思就是区分用户的访问类型，第一种是动态访问是需要调用后台数据的访问；第二种是静态的访问只需静态资源的访问（如：css、html、jpg、js等等文件）。那么Nginx动静分离就是区分用户的访问类型，然后分配访问不同的服务器。提高资源响应的速度。

 

二、Nginx的下载安装（Linux环境下）

 步骤：

 首先下载Nginx的源；

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

 使用 yum 安装 nginx；


 yum install nginx

  注1：yum方式安装nginx，它的安装根目录为/etc/nginx
  注2：查看nginx版本   rpm -qa | grep nginx
   

启动及设置开机启动；

 systemctl start nginx.service
 systemctl enable nginx.service

设置防火墙开放 80 端口；

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

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

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

 三、Nginx的使用

①负载均衡的使用实例
想要实现负载均衡的效果那我们就在这里进行简单的实现：在虚拟机中用两个Tomcat服务器实现多台服务器配置同一个项目效果，用我们刚刚下载的Nginx作为代理服务器

1）准备2个tomcat（接上篇文章，小编我已经准备好一个了）
 

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

2）修改第二个Tomcat的配置（找到tomcat目录/conf/server.xml），修改的配置如下：
        1. HTTP端口，默认8080，如下改为8081


        2.远程停服务端口，默认8005，如下改为8006


        3.AJP端口，默认8009，如下改,8010

用客户端MobaXterm可以直接双击编辑！

3）设置防火墙开放 8081 端口
 firewall-cmd --zone=public --add-port=8081/tcp --permanent
 firewall-cmd --reload && firewall-cmd --list-port

 4）测试两个服务器是否能够启动使用

进入连个服务器的bin目录执行启动服务器命令：./startup.sh

测试：

http://192.168.26.128:8080/


http://192.168.26.128:8081/

重要的来了！！！

5）Nginx配置*********************************************************************

配置模板如下：

#user  nobody;
worker_processes  1;
 
#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;
 
#pid        logs/nginx.pid;
 
 
events {
    worker_connections  1024;
}
 
 
http {
    include       mime.types;
    default_type  application/octet-stream;
 
    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';
 
    #access_log  logs/access.log  main;
 
    sendfile        on;
    #tcp_nopush     on;
 
    #keepalive_timeout  0;
    keepalive_timeout  65;
 
    #gzip  on;
 
 
    #服务器的集群
    upstream  tomcat_list {  #服务器集群名字
        server    127.0.0.1:8080  weight=1;   #服务器1   weight是权重的意思，权重越大，分配的概率越大。
        #server    172.17.0.4:8080  weight=2; #服务器2   weight是权重的意思，权重越大，分配的概率越大
    } 
 
    server {
        listen       80;            #监听80端口，可以改成其他端口
        #server_name  localhost;    #当前服务的域名
    server_name  www.zking.com; #当前服务的域名(虚拟域名也可以)
    root         html/crm;      #将要访问的网站的根目录，nginx节点会自动继承父节点的配置
 
        #charset koi8-r;
 
        #access_log  logs/host.access.log  main;
 
    location / {
            #该句代码是为解决history路由不能跳转的问题，在vue-router官网有介绍 
        try_files $uri $uri/  /index.html;
    }
    location  ^~/api/ {
        #^~/api/表示匹配前缀是api的请求，proxy_pass的结尾有/， 则会把/api/*后面的路径直接拼接到后面，即移除api
        proxy_pass http://tomcat_list/;
    }
        #error_page  404              /404.html;
 
        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
 
        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}
 
        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}
 
        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }
 
 
    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;
 
    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}
 
 
    # HTTPS server
    #
    #server {
    #    listen       443 ssl;
    #    server_name  localhost;
 
    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;
 
    #    ssl_session_cache    shared:SSL:1m;
    #    ssl_session_timeout  5m;
 
    #    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers  on;
 
    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}
 
}

我们在这里需要更改Nginx服务器中的配置根据上面配置模板：

        5.1在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是权重的意思，权重越大，分配的概率越大
} 

         5.2在default.conf添加

location / {
      proxy_pass   http://tomcat_list;
      index index.html index.htm;
  }

 这两步就是实现了访问Nginx192.168.26.128:80跳转至配置好Tomcat_list的两个服务器中6）重启Nginx服务，让配置生效

systemctl restart nginx

7）访问Nginx192.168.26.128:80（80端口是唯一可以不用带的端口号） 

发现出错，我们打开日志文件查看错误

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

分析错误的解决方法：

setsebool -P httpd_can_network_connect 1 

一定要进入/etc/nginx/conf.d/目录下才有用！！！

执行完这个命令我们再刷新访问Nginx的页面：它就可以实现访问Nginx但是均衡分配访问两个Tomcat服务器上面去了，这样的话就算我们停止一个Tomcat服务器也能访问

三、部署前端项目
①动静分离的使用实例
1）确保前端项目能够运行，并将其打包

打包方法：在对应项目的目录下执行  npm run build

        1.1打包会遇到的问题1：hbuilderX打包vue项目白屏问题
将项目目录下的config文件夹里的index.js文件中,将build对象下的assetsPublicPath中的“/”，改为“./”后，再打包生成的 dist 文件

build: {
    // assetsPublicPath: '/',//修改前
    assetsPublicPath: './',//修改后
}


         1.2打包会遇到的问题2：hbuilderX打包项目，element-ui的icon图标无法正常显示

找到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)
   } 

2）做ip/host主机映射 将虚拟机ip映射域名www.zking.com

方法：

C:\Windows\System32\drivers\etc\hosts中增加映射关系
192.168.26.128 www.zking.com

 做了主机映射那么我们前端项目就要改变action.js更改配置：
'SERVER': 'http://www.zking.com/api/T216_SSH', //服务器，然后重新打包

3）Nginx配置更改代理配置/etc/nginx/conf.d

更改第一个：静态的资源加载以及域名

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

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

4）重启Nginx更新配置

systemctl restart nginx

5）将前端构建好的dist项目，上传到云服务器/usr/local/...（只能放这里）

小编在这里就专门建一个文件夹来放置这个前台打包好的文件

mkdir mypro创建文件命令

6）www.zking.com完成整个前后端分离项目的测试

 

 

 

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

快速掌握Nginx部署前端项目（从Nginx安装配置及部署都非常详细哦！） 的相关文章

  • 八、C++中的循环 for while do...while及控制流语句

    xff08 1 xff09 for while do while循环 简单来讲 xff0c 循环就是多次执行同样的代码 例 xff0c 如何输出重复内容多次 xff1a 代码复制多次 xff1b 写个函数调用多次 xff1b 写循环重复执行

  • 九、C++ 指针 pointer 引用 Reference

    原始指针 raw pointer 非智能指针 smart pointer 指针是一个整数 xff0c 一个数字 xff0c 它存储一个内存地址 创建指针 xff1a void ptr 61 0 void指针表明不关心指针存储地址的数据类型

  • 基础电路-电子电路

    1 1 电流 xff1a 在导体的两端加上电压 xff0c 导体的电子就会在电场的作用下做定向运动 xff0c 形成电子流 xff0c 称之为 电流 xff1b 电流方向和电子移动方向相反 xff1b 电流有直流和之分 1 2 电压 xff

  • CTP工作原理及结构

    1 工作原理 自容TP xff1a 自电容的扫描方式是进行逐行扫描 xff0c 所有通道既是感应通道也是驱动信号通道 xff0c 通过对比触摸前后电容量的变化来判定X Y方向坐标 xff0c 然后组合成触摸点的坐标 互容TP xff1a 互

  • LCD工作原理及结构

    1 主流显示面板技术 xff1a LCD xff0c OLED xff0c MicroLED 2 主流显示屏的发展趋势 3 LCD堆叠结构 xff1a 背光 xff0c 下偏光片 xff0c TFT Glass xff0c CF Glass

  • OLED工作原理及结构

    1 主流显示面板技术 xff1a LCD xff0c OLED xff0c MicroLED 2 主流显示屏的发展趋势 3 OLED堆叠结构 xff1a 相比LCD xff0c OLED没了背光和下偏光片 4 OLED发光原理 xff1a

  • Git Fork操作与配置

    https blog csdn net Lu Ca article details 128612125 我理解的git fork xff1a 将别人 xff08 张三 xff09 仓库包括文件 xff0c 提交历史 xff0c issues

  • 背光的工作原理及结构

    1 什么是背光 xff1a LCD本身是不发光的 xff0c 因此它需要一个外部面光源系统来帮助其显示 xff0c 即背光源 xff08 Backlight xff09 xff1b 2 背光的种类 xff1a 从发光类型来分 xff0c 可

  • Microled简介及关键工艺（巨量转移）

    1 什么是Microled xff1f 通俗来讲 xff0c 将作为发光器件LED用作显示屏的像素 xff0c 固这种LED的尺寸就得做得很小 xff08 约 xff1c 100 m xff09 xff0c 这种技术就是Microled x

  • 数字电路基础-逻辑门电路

    1 门电路的概念 实现基本逻辑运算和复合运算的单元电路称为门电路 xff0c 常用的门电路有非门 与非门 或非门 与非门 与或非门等 2 基本逻辑门电路 a 与门 xff1a 全1出1 xff0c 有0出0 工作原理 xff1a 输入A B

  • 51单片机-控制LED灯

    目录 1 硬件设计 2 软件设计 2 1 点亮一颗LED灯 2 2 LED闪烁 2 3 LED流水灯 3 知识点 3 1 while函数的应用 3 2 常用数据类型 3 3 延时函数的自动生成 1 硬件设计 通过原理图分析 xff0c LE

  • 51单片机-74HC595移位寄存器

    目录 1 74HC595芯片介绍 1 1 引脚定义 1 2 工作原理 2 实际应用 2 1 控制数码管 2 2 点阵屏显示图形 2 3 点阵屏显示动画 3 知识点 3 1 位变量 xff08 sbit bit xff09 3 2 字模提取

  • 51单片机-独立按键控制LED灯

    目录 1 硬件设计 2 软件设计 2 1 独立按键控制LED闪烁 2 2 独立按键控制LED状态 2 3 独立按键控制LED显示二进制 2 4 独立按键控制LED移位 3 知识点 3 1 if语句的运用 3 2 常用运算符 1 硬件设计 轻

  • 51单片机-控制数码管

    目录 1 硬件设计 1 1 LED数码管介绍 1 2 原理图设计 2 软件设计 2 1 静态数码管显示 2 2 动态数码管显示 2 3 模块化编程 xff08 头文件 xff09 3 知识点 3 1 数组 3 2 子函数 3 3 switc

  • LCD的制作工艺

    目录 1 LCD简介 2 LCD制程 2 1 Array制程 2 1 1 像素电路 2 1 2 制程简介 2 2 Cell制程 2 3 Module组装 3 总结 1 LCD简介 LCD是目前显示领域的重要组成部分 xff0c 可通过如下链

  • 51单片机-LCD1602

    目录 1 硬件设计 1 1 LCD1602介绍 1 2 原理图 2 软件设计 2 1 控制原理 2 2 控制时序 2 3 指令集 2 4 程序设计 3 知识点 3 1 宏定义 3 2 指针与数组 3 3 for语句 1 硬件设计 1 1 L

  • 51单片机-矩阵键盘

    目录 1 硬件设计 2 软件设计 2 1 矩阵键盘扫描 2 2 矩阵键盘 密码锁 3 知识点 3 1 模块化编程的应用 3 2 include详解 1 硬件设计 矩阵键盘按键数量较多 xff0c 为了减少I O口的占用 xff0c 通常将按

  • 如何优雅的让fork后的仓库与原仓库同步

    https www cnblogs com tudou1179006580 p 14875486 html https github com selfteaching the craft of selfteaching issues 67

  • UDP——C语言socket编程

    UDP编程相比TCP来说相对简单主要用到sendto 和recvfrom 这两个函数 xff0c 接下来主要介绍一下这两个函数 头文件 span class token macro property span class token dir

  • 函数与宏定义

    前言 本文介绍函数与宏定义 一 函数的概念 1 函数的定义 自定义函数的形式 xff1a 存储类型符 返回值类型符 函数名 xff08 形参说明表 xff09 函数语句体 xff08 1 xff09 存储类型符 函数作用范围 xff0c 默

随机推荐

  • 51单片机-定时器中断

    目录 1 定时器 计数器 1 1 工作原理 1 2 相关寄存器 1 3 工作模式 xff08 模式1 xff09 2 中断系统 2 1 中断的概念 2 2 中断结构 2 3 中断源 2 4 相关寄存器 3 如何配置定时器中断 4 实际应用

  • 51单片机-串口通信

    目录 1 什么是通信 1 1 通信的概念 1 2 传送方式 1 3 同步方式 1 4 传送方向 1 5 校验方式 2 单片机串口介绍 2 1 硬件电路 2 2 电平标准 2 3 常见接口 2 4 内部结构 2 5 相关寄存器 2 6 工作模

  • I2C总线

    目录 1 硬件概述 1 1 常用器件 1 2 总线结构 1 3 工作原理 2 协议概述 2 1 传输格式 2 2 传输特点 2 3 读和写 2 4 时钟同步和总线仲裁 3 转换器概述 4 缓存器概述 1 硬件概述 1 1 常用器件

  • 蓝牙与WiFi

    蓝牙 透传 HAL UART Receive IT amp huart2 uint8 t amp USART2 NewData 1 开启串口2接收中断 RS485orBT 61 0 RS485orBT标志位为1时是RS485模式 xff0c

  • ubuntu 安装任意版本cmake，无须卸载

    ubuntu1804默认的cmake版本为3 10 2 xff0c 在使用中 xff0c 我们经常会遇到cmake要求更高的版本 xff0c 请读者务必不要轻易卸载原有cmake xff0c 因为这样会把之前用 cmake 编译好的包都给卸

  • 什么是结构体【详解】

    本期介绍 x1f356 主要介绍 xff1a 什么是结构体 xff0c 结构体的声明 定义 初始化 以及传参 xff0c 匿名结构体类型 xff0c 如何通过结构体来实现链表数据结构 xff0c 结构体在内存中是如何存储的 xff08 即

  • 结构体类型

    一 xff1a 结构体定义 1 C语言允许用户自己建立由不同类型的数据组成的组合型数据结构 xff0c 它称为结构体 2 一般形式 xff1a struct 结构体名 成员列表 xff1b xff08 1 xff09 struct是声明结构

  • ROS path [0]=/opt/ros/melodic/share/ros、path [1] 、path [2]

    这种错误 xff0c 我遇到是因为在运行launch前 xff0c 额外多开了roscore 解决方法 xff1a 关掉多开的roscore即可

  • word文档如何快速添加空白页

    我们有时在审阅或查看文件时 xff0c 为了编辑需要会想到插入一页的内容 xff0c 那怎么在文档中间添加空白页呢 xff0c 以最常见的speedoffice为例 首先 xff0c 用speedoffice打开一份Word文档 xff0c

  • ROS path [0]...问题

    遇到这种问题时 第一步 xff1a 首先使用rospack find 命令查找该功能包 xff0c rospack find ydlidar ros 第二部 xff1a 如果输出功能包路径则该功能包存在 xff0c 如果提示没有则说明我们需

  • Git上fork后的代码仓库如何与原仓库进行同步

    https blog csdn net wakarimasu article details 109152932 问题场景 xff1a 最近公司项目组不允许个人在远程仓库建分支 xff0c 要求每个人fork一个仓库 xff0c 以后就在自

  • Postman安装与入门简单教程

    在测试技术中 xff0c 接口测试是最基础 最重要 xff0c 也是收益最高的测试技术 xff0c 作为接口测试工具中的No 1 xff0c 一起来看看Postman是怎么入门的吧 目录 1 安装Postman2 注册Postman账号并登

  • 使用 Intel RealSense 采集图片并制作机器视觉数据集

    本文章主要涉及以下工作 xff1a xff08 1 xff09 讲述如何使用 Intel RealSense 相机采集RGB图像 深度图像 伪彩色化的深度图像以及 npy 格式保存的深度数据 xff08 2 xff09 采集到的图像可适用于

  • Postman 使用教程 - 手把手教你 API 接口测试

    Postman 教程目录 API 是什么 xff1f Postman 是什么 xff1f 一 如何安装 Postman二 API 模拟工具 GoRest三 用 Postman 发出第一个 GET 请求 1 GET 请求基本操作2 带参数的

  • Socket编程（C语言实现）——TCP协议（网络间通信AF_INET）的流式（SOCK_STREAM）+报式（SOCK_DGRAM）传输

    Socket编程 目前较为流行的网络编程模型是客户机 服务器通信模式 客户进程向服务器进程发出要求某种服务的请求 xff0c 服务器进程响应该请求 如图所示 xff0c 通常 xff0c 一个服务器进程会同时为多个客户端进程服务 xff0c

  • jQuery05插件

    一 自定义插件 1 extend 类方法 1 1对象继承 xff1a extend 对象1 xff0c 对象2 1 2 扩展jQuery类方法 extend 方法名 function xff08 xff09 方法体 getMax funct

  • JavaWeb01（web环境的搭建）

    一 JDK开发工具包 1 下载和安装jdk xff1a https www oracle com index html 2 配置环境变量 JAVA HOME JDK的安装目录 path JAVA HOME bin CLASSPATH xff

  • MySql安装与使用

    今天给大家分享的是关于mysql的安装以及使用 目录 一 mysql安装步骤 二 mysql使用 一 mysql安装步骤 1 首先我们需要下载一个mysql的压缩包 xff0c 进行解压 2 接下来改变my ini文件 修改mysql安装路

  • Shiro认证及加盐加密

    目录 今天的知识是与上次所分享的知识相关联的 xff0c 在Shiro入门的基础进行编写 xff0c 上次之前的数据是死数据 放在Shiro ini 而这次是活数据 xff0c 可以连接到数据库 xff0c 运用域Relam知识 同时出于维

  • 快速掌握Nginx部署前端项目（从Nginx安装配置及部署都非常详细哦！）

    前言 xff1a 之前在Linux系统中部署了后端项目 xff0c 今天继续来给大家分享如何部署前端项目 涉及到了Nginx的简单介绍以及Nginx如何安装及配置并且能够部署前端项目 Nginx是一个轻量级的反向代理web服务器 xff0c

热门标签