一篇文章快速掌握Nginx部署前端项目(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 install nginx

 systemctl start nginx.service
 systemctl enable nginx.service

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

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

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

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

#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;
? ? # ? ?}
? ? #}
?
}

upstream ?tomcat_list { ?#服务器集群名字
? ? server ? ?127.0.0.1:8080 ?weight=1; ? #服务器1 ? weight是权重的意思，权重越大，分配的概率越大。
? ? server ? ?127.0.0.1:8081 ?weight=1; #服务器2 ? weight是权重的意思，权重越大，分配的概率越大
}?

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

cat /var/log/nginx/access.log
cat /var/log/nginx/error.log 

build: {<!--{C}%3C!%2D%2D%20%2D%2D%3E-->
    // assetsPublicPath: '/',//修改前
    assetsPublicPath: './',//修改后
}

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

    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/;
    }

systemctl restart nginx