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

发布时间：2023-02-17 12:21:21 所属栏目：Nginx 来源：互联网

导读：前言：之前在Linux系统中部署了后端项目，今天继续来给大家分享如何部署前端项目。涉及到了Nginx的简单介绍以及Nginx如何安装及配置并且能够部署前端项目 Nginx是一个轻量级的反向代理web服务器，在当今应用地非常广泛，特别是前后端分离的情况下。 Nginx

　　        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的访问日志和错误日志

　　1
　　2
　　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

（编辑：甘南站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

4/5

首页

尾页