关于部署vue项目在Linux上的两种方式tomcat以及nignx（3）使用nignx进行部署

本文介绍: 能看到我前端发送的请求都是使用了/api这个公共的路径。那么我们就需要在nginx中设置监听有/api的请求路径，并将请求重写。

阿丹有话说：

前两篇文章主要讲解了将vue中tomcat 部署研究了。解决了在后台代码中通过过滤器来解决跨域问题。后期会继续出在tomcat中的代理配置等。本篇文章来将vue 项目部署在ni gnx上，并且通过反向代理来解决跨域请求以及请求转发。

首先我们再来了解一下nginx

Ngin x是一款高性能、高可靠性的反向代理服务器，它可以作为HTTP服务器、负载均衡器以及邮件代理，在We b 服务器领域得到广泛应用。Ngin x有着优秀的多进程架构，支持异步非阻塞I/O模型，同时占用内存少，响应速度快，对于高并发量的网络环境有着较好的适应性。 Ng in x的配置简单易懂，可扩展性强，在大型网站中极其受欢迎。它可以处理静态资源的请求，但更为重要的是，它可以缓存请求和加速静态内容的传输。Ng in x还支持各种标准的Web 服务协议，包括HTTP、HTTPS、SMTP和POP3等。总的来说，Ng in x是一款开源、高性能、灵活、稳定的Web 服务器软件，适用于各种规模的网站和Web 应用程序。

1、将vue 项目打包（如何打包查看关于部署vue项目在Linux上的两种方式tomcat以及nignx（1）使用tomcat进行部署_艺舟先生的博客-CSDN博客）

whereis 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;

    server {
        listen       80;
        server_name  localhost:8080;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   html;
	    proxy_pass http://127.0.0.1:8080;
            index  index.html index.htm;
        }

        #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 -t

nginx

nginx -s stop

nginx -s reload

nginx -s quit

lsof -i :<端口号>

netstat -lnp | grep <端口号>

kill <PID>

   server {
        listen       10001;
        server_name  XXX.XXX.XXXX:10001;#运行该项目的ip地址

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   html/dist;
            index  index.html index.htm;
        }

    #监听如果有/api的请求路径。开始反向代理
        location /api {
            root   html;
	    proxy_pass http://XXX.XXX.XXXX;
	 fastcgi_pass   XXX.XXX.XXXX:10001;
            index  index.html index.htm;
        }