一篇文章快速掌握Nginx部署前端项目(Nginx安装配置及部署都非常详细!)

目录
  • 前言:
  • Nginx的三个作用:
    • 负载均衡:
  • 反向代理:
  • 动静分离:
  • Nginx的下载安装(Linux环境下)
  • Nginx的使用
  • 三、部署前端项目
  • 总结

前言:

之前在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: {<!--{C}%3C!%2D%2D%20%2D%2D%3E-->
    // 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) {<!--{C}%3C!%2D%2D%20%2D%2D%3E-->
     return ExtractTextPlugin.extract({<!--{C}%3C!%2D%2D%20%2D%2D%3E-->
       use: loaders,
       fallback: 'vue-style-loader',
       // 解决icon路径加载错误
       publicPath:'../../'
     })
   } else {<!--{C}%3C!%2D%2D%20%2D%2D%3E-->
     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 / {<!--{C}%3C!%2D%2D%20%2D%2D%3E-->
            #该句代码是为解决history路由不能跳转的问题,在vue-router官网有介绍
        try_files $uri $uri/  /index.html;
    }
    location  ^~/api/ {<!--{C}%3C!%2D%2D%20%2D%2D%3E-->
        #^~/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完成整个前后端分离项目的测试

总结

到此这篇关于快速掌握Nginx部署前端项目的文章就介绍到这了,更多相关Nginx部署前端项目内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 基于Docker、Nginx和Jenkins实现前端自动化部署

    目录 前期准备 部署目标 Dcoker环境的搭建 连接云服务器 安装Docker环境 Docker安装Docker Compose Docker安装Nginx和Jenkins服务 安装Nginx和Jenkins Nginx和Jenkins目录编写 docker-compose.yml文件配置 nginx.conf文件配置 安装Jenkins插件 关联Jenkins和GitLab 生成密钥 新建项目 源码管理 构建触发器 结束语 前期准备 基于CentOS 7系统云服务器一台. 基于Vue-CLI

  • docker安装nginx并部署前端项目的全过程

    目录 1.简介 2.操作 3. 总结 1.简介 本文主要介绍如何使用docker安装nginx,以及如何将前端打包好的vue项目部署到nginx上. 2.操作 (1)拉取nginx镜像: docker pull nginx (2)咱们先把docker镜像跑起来: docker run --name myNginx -p 80:80 -v /home/nginx/dist:/usr/share/nginx/html -d nginx ## --name:容器名字 ## -d: 要启动的镜像的名字

  • nginx部署多前端项目的几种方法

    个人总结了3种方法来实现在一台服务器上使用nginx部署多个前端项目的方法. 基于域名配置 基于端口配置 基于location配置 在正式开始之前,我们先来看一下nginx安装的默认配置文件: /etc/nginx/nginx.conf 文件 可以看到图中的:include /usr/nginx/modules/*.conf,这句话的作用就是可以在nginx启动加载所有 /usr/nginx/modules/ 目录下的 *.conf 文件. 所以,平时我们为了方便管理,可以在此目录下面定义自己的

  • docker+Nginx部署前端项目的详细过程记录

    目录 相关配置安装 创建配置文件 项目打包与部署 一个相关报错: 总结 相关配置安装 安装Docker yum install docker 启动服务 start docker systemctl start docker Docker中拉取nginx镜像 docker pull nginx 创建配置文件 我们需要在根目录下创建Dockerfile文件和default.conf文件. 其中default.conf文件的名称是什么无所谓,只要在配置文件中注意使用相同名称即可. Dokcerfile

  • 一篇文章快速了解Python的GIL

    前言:博主在刚接触Python的时候时常听到GIL这个词,并且发现这个词经常和Python无法高效的实现多线程划上等号.本着不光要知其然,还要知其所以然的研究态度,博主搜集了各方面的资料,花了一周内几个小时的闲暇时间深入理解了下GIL,并归纳成此文,也希望读者能通过次本文更好且客观的理解GIL. GIL是什么 首先需要明确的一点是GIL并不是Python的特性,它是在实现Python解析器(CPython)时所引入的一个概念.就好比C++是一套语言(语法)标准,但是可以用不同的编译器来编译成可执

  • 一篇文章教你如何在SpringCloud项目中使用OpenFeign

    目录 OpenFeign的介绍 OpenFeign是一种声明式 .模板化的HTTP客户端. OpenFeign与Feign的之间的关系 OpenFegin中的两个常用注解 在项目中使用OpenFeign 调用关系图 导入依赖 使用注解@FeignClient @EnableFeignClients 注入对象.调用 总结: OpenFeign的介绍 OpenFeign是一种声明式 .模板化的HTTP客户端. 何为声明式? 就像调用本地方法一样调用远程方法,无需感知操作远程http请求. 何为模板化

  • 一篇文章快速了解Angular和Ionic生命周期和钩子函数

    目录 Angular 实现 调用顺序 注意 Ionic ionic是怎么处理页面的生命周期的 路由守卫 总结 Angular 实现 首先实现方式不用多说,使用钩子函数需要在定义的时候实现对应的接口 export class ListPage implements OnInit { constructor() {} ngOnInit() { // code here } } 调用顺序 1.constructor 最先执行的是构造函数,在执行构造函数的时候,@Input.@ViewChild等很多变

  • Java的Spring框架中AOP项目的一般配置和部署教程

    0.关于AOP 面向切面编程(也叫面向方面编程):Aspect Oriented Programming(AOP),是软件开发中的一个热点,也是Spring框架中的一个重要内容.利用AOP可以对业务逻辑的各个部分进行隔离,从而使得业务逻辑各部分之间的耦合度降低,提高程序的可重用性,同时提高了开发的效率. AOP是OOP的延续. 主要的功能是:日志记录,性能统计,安全控制,事务处理,异常处理等等. 主要的意图是:将日志记录,性能统计,安全控制,事务处理,异常处理等代码从业务逻辑代码中划分出来,通过

  • Ubuntu+Nginx+Mysql+Php+Zend+eaccelerator安装配置文字版

    把我架设lnmp网站的过程写出来,希望对想架设网站的朋友有所帮助,如有更好的办法请提出来. 之所以用nginx没用apache,是因为nginx的效率更高一些,尤其是对一些低配置的服务器,比如我在单位256M内存的旧机器上架设的服务器. 1.安装ubuntu server 10.04或10.10,其中安装语言选的en,时区shanghai,服务只安装ssh,其他全部用默认就行. 提示:以上安装过程完成后,建议用其他计算机登录服务器,windows系统可以用putty,linux系统直接在终端用命

  • Eclipse maven项目lombok安装配置图解

    1.官网下载jar包 https://projectlombok.org/all-versions 2.双击运行jar包,并选择指定IDE安装 检查eclipse.ini文件最后是否添加了lombok jar包 3.重启eclipse 4.maven中引入依赖 <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> <version&

  • nginx的zabbix 5.0安装部署的方法步骤

    目录 实验环境 安装部署 安装配置数据库(这里使用的是mariadb,感兴趣的同学可以使用编译或者别的方法安装mysql试试) zabbix服务端的配置 web端php的配置 web端的nginx的配置修改 zabbix是一个基于WEB界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案. zabbix能监视各种网络参数,保证服务器系统的安全运营:并提供灵活的通知机制以让系统管理员快速定位/解决存在的各种问题. zabbix由2部分构成,zabbix server与可选组件zabbix

  • docker部署crownblog项目到阿里云的方法步骤

    前端项目打包 找到.env.production 修改为自己的ip或者域名地址 执行命令npm run build生成dist文件 把dist文件拷贝到后端项目目录下(使用go自带的http服务来部署前端项目) 后端项目部署 一.服务器的配置 购买阿里云服务器 打开服务器的8085和3306端口 使用Xshell登陆服务器 二.安装docker 官方文档: docs.docker.com/get-docker/ 选择对应的系统进行查看,以ubuntu 18.04 LTS为例 卸载旧版本 sudo

随机推荐

其他