ubuntu16环境 nginx服务器 vue项目的部署与发布

开发部署使用的服务器：nginx
linux环境：ubuntu16

修改记录：
2021.07.06做修订，测试可用
2021.03.19项目中测试可用

步骤：

# 第一步
修改好vue项目中的URL,使用npm run build命令打包为dist文件夹
# 第二步
下载nginx的压缩包，然后传输到服务器上
或者
在linux使用命令行下载
【wget http://nginx.org/download/nginx-1.13.6.tar.gz】
# 第三步
解压，使用的命令为
【tar -zvxf nginx-1.13.6.tar.gz】
# 第四步
因为Nginx是高度自由化的Web服务器，它的功能是由许多模块来支持。如果使用了某个模块，这个模块使用了一些类似zlib或OpenSSL等的第三方库，那么就必须先安装这些软件。Ubuntu下不像在centOS中使用yum直接在线安装，可以使用以下方法。使用的命令为：
【apt-get install libpcre3 libpcre3-dev 】
【apt-get install zlib1g-dev 】
如果不执行上面的命令，会报错
# 第五步
使用的命令为
【mkdir /usr/local/nginx】在/usr/local下新建nginx文件夹
【/usr/local/nginx-1.13.6/configure --prefix=/usr/local/nginx --with-http_gzip_static_module】
--prefix=/usr/local/nginx的目的是指定nginx编译安装后的路径，路径为/usr/local/nginx
--with-http_gzip_static_module的目的是为了配置gzip
# 第六步
编译nginx，使用的命令为
【make】
# 第七步
安装nginx，把生成的 2 进制复制到 prefix 指定的安装路径里（即上面指定的/usr/local/nginx）
【make install】
这一步结束后，会出现以下提示
make[1]: Leaving directory `/usr/local/nginx；
# 第八步
跳转到上面的文件夹下
【cd /usr/local/nginx】
# 第九步
修改config文件夹下的nginx.conf文件
第一处修改   server {
		#此处的端口号修改为实际发布的端口号（前提是在vue项目中并未指定发布的端口号，也就说没有在config目录下的prod.env.js文件当中配置我们后端服务器的IP地址和端口号）
        listen       8056;  
        server_name  localhost;
        #使用gzip的目的是为了加快前端的访问速度
        #可以参考https://blog.csdn.net/qq_43338182/article/details/103251320中的第三种方法
        gzip  on;
   		gzip_static on;
		gzip_min_length 1024;
		gzip_buffers 4 16k;
		gzip_comp_level 2;
		gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php application/vnd.ms-fontobject font/ttf font/opentype font/x-woff image/svg+xml;
		gzip_vary off;
		gzip_disable "MSIE [1-6]\.";
第二处修改
粘贴与location / 同级
location /api {
			# 此处是为了配置跨域 ，到时候会拼接到API接口的前面
			# 例如，访问的接口是/api/query
			# 实际访问的是 http://XXX:xxx/api/query（这是访问的后端地址）
			proxy_pass http://ip地址:端口号/api; #此处的/api并不多余，而是为了配置跨域，这个地方的名称适合location后面的一致的
            proxy_http_version 1.1;
            proxy_redirect  off;
            proxy_connect_timeout 30;
            proxy_set_header Host $host:$server_port;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            #proxy_cache cache_one;
            proxy_cache_valid   200 304 24h;
            proxy_cache_valid   any     10m;
            add_header  Nginx-Cache     "$upstream_cache_status";
            proxy_next_upstream error timeout invalid_header http_500 http_502 http_503 http_504;
		}
# 第十步
将vue项目打包生成的dist文件夹下的内容copy到/usr/local/nginx（前面指定的）/html文件夹下面（注意不是将整个dist文件夹，只是将里面的内容，即copy的是dist里面的内容，而不是整个dist文件夹）
#第十一步
启动ngnix，执行下面的命令
【sbin/nginx】
# 第十二步
在浏览器中输入地址，就可以访问了
####完毕

html文件夹下的内容为（除了50x.html其他都是从dist文件夹下copy的）

修改完毕后，config文件夹下nginx.config文件中的server部分如下：

server {
        listen       8056;
        server_name  localhost;
		gzip  on;
		gzip_static on;
		gzip_min_length 1024;
		gzip_buffers 4 16k;
		gzip_comp_level 2;
		gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php application/vnd.ms-fontobject font/ttf font/opentype font/x-woff image/svg+xml;
		gzip_vary off;
		gzip_disable "MSIE [1-6]\.";
        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   html;
            index  index.html index.htm;
        }
        #粘贴处
		location /api {
			proxy_pass http://localhost:8000/api;
            proxy_http_version 1.1;
            proxy_redirect  off;
            proxy_connect_timeout 30;
            proxy_set_header Host $host:$server_port;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            #proxy_cache cache_one;
            proxy_cache_valid   200 304 24h;
            proxy_cache_valid   any     10m;
            add_header  Nginx-Cache     "$upstream_cache_status";
            proxy_next_upstream error timeout invalid_header http_500 http_502 http_503 http_504;
		}

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

补充：如何停止nginx服务？

执行下面的命令，查看nginx占用的端口号
【ps -ef | grep nginx】
然后执行
【kill -9 端口号】
即可停止nginx服务（貌似要杀掉两个进程）

参考链接：

https://blog.csdn.net/weixin_40000999/article/details/111549827

https://blog.csdn.net/duguyuyun12345/article/details/83471821

https://blog.csdn.net/king_kgh/article/details/74973040

https://www.fujieace.com/nginx/make1-leaving-directory-usrlocalnginx.html

https://blog.csdn.net/zhuchunyan_aijia/article/details/79113964

https://blog.csdn.net/somanlee/article/details/69808788