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

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

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

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:WindowsSystem32driversetchosts中增加映射关系

　　192.168.26.128 www.zking.com

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

（编辑：甘南站长网）

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

2/5

首页

尾页