nginx部署Springboot加Vue和普通css、js、html技术栈的项目，linux部署前后端分离项目

Nginx静态网站部署与调试

• 1)npm管理js vuecli
  Npm run build 打包并部署
• 2)传统html+css直接引入js 传统静态
  直接拷贝就ok

静态网站动态调试-开发阶段

• vuecli项目可以npm run dev启动调试

• 传统导入js开发的模式,没法直接服务器方式调试,需要安装 live-server服务器,这个服务器很简单就是node一个模块.

npm install -g live-server
live-server --port=6002

Nginx配置虚拟主机 不同域名或端口转发不同的目录(前端项目)

• 虚拟主机，也叫“网站空间”，就是把一台运行在互联网上的物理服务器划分成多个“虚拟”服务器。虚拟主机技术极大的促进了网络技术的应用和普及。同时虚拟主机的租用服务也成了网络时代的一种新型经济形式。

基于端口配置虚拟主机

（1）上传静态网站：
前端传统项目项目 nginx/html_xxx下
前端vuecli项目 打包后 上传至 nginx/vuecli_xxx 下
（2）修改Nginx 的配置文件：conf/nginx.conf

 server {
        listen       8081;
        server_name  localhost;
        location / {
            root   html_xxx;
            index  index.html;
        }      
    }
    server {
        listen       80;
        server_name  localhost;
        location / {
            root   vuecli_xxx;
            index  index.html;
        }        
    }

（3）访问测试： 重新加载Nginx reload
地址栏输入http://localhost:82
地址栏输入http://localhost:83

基于域名配置虚拟主机

• 域名与IP绑定：
  一个域名对应一个 ip 地址，一个 ip 地址可以被多个域名绑定。
  本地测试可以修改 hosts 文件（C:\Windows\System32\drivers\etc）
  可以配置域名和 ip 的映射关系，如果 hosts 文件中配置了域名和 ip 的对应关系，不需要走dns 服务器。指定绑定规则 IP 域名 然后确定。做好域名指向后，修改nginx配置文件
  Hosts
  127.0.0.1 app_html_xxx
  127.0.0.1 admin_vuecli_xxx
  （1）上传静态网站：
  前端传统项目项目 nginx/html_xxx下
  前端vuecli项目 打包后 上传至 nginx/vuecli_xxx 下
  （2）修改Nginx 的配置文件：conf/nginx.conf

server {
        listen       80;
        server_name  app_html_xxx;
        location / {
            root   html_xxx;
            index  index.html;
        }
    }
    server {
        listen       80;
        server_name  admin_vuecli_xxx;
        location / {
            root   vuecli_xxx;
            index  index.html;
        }
    }

Nginx作为反向代理-不同域名或者不同地址转发给不同服务器

• 静态项目可以通过虚拟主机实现多个项目的部署,但动态tomcat网站就不行,nginx无法解释运行.

反向代理配置

修改Nginx 的配置文件：conf/nginx.conf

server {
		listen       80;
		server_name  java_web;

		#charset koi8-r;

		#access_log  logs/host.access.log  main;

		location / { 
		    proxy_pass http://127.0.0.1:6002; #访问域名为java_web都交给6002处理
		    index  index.html index.htm;
		}
	}

	server {
		listen       80;
		server_name  admin.com;

		#charset koi8-r;

		#access_log  logs/host.access.log  main;

		location / {
		    proxy_pass http://127.0.0.1:8082; #访问域名为 admin.com都交给8082处理
		    index  index.html index.htm;
		}
	}

反向代理的规则可以通过域名的不同来进行区别，也可以通过uri的不同来进行区别。

解决跨域：

server {
		listen       80;
		server_name  admin.mall.com;
 location / {
            # 检查域名后缀
		  if ($http_origin ~ \.mall\.com) {
				add_header Access-Control-Allow-Origin $http_origin;
				add_header Access-Control-Allow-Methods GET,POST,DELETE,PUT,OPTIONS;
				add_header Access-Control-Allow-Credentials true;
				add_header Access-Control-Allow-Headers DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,U-TOKEN;
				add_header Access-Control-Max-Age 1728000;
		   }
		   # options请求不转给后端，直接返回204
		   # 第二个if会导致上面的add_header无效，这是nginx的问题，这里直接重复执行下
		   if ($request_method = OPTIONS) {
				add_header Access-Control-Allow-Origin $http_origin;
				add_header Access-Control-Allow-Methods GET,POST,DELETE,PUT,OPTIONS;
				add_header Access-Control-Allow-Credentials true;
				add_header Access-Control-Allow-Headers DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,U-TOKEN;
				add_header Access-Control-Max-Age 1728000;
				return 204;
		   }
			# 其他请求代理到后端
		   proxy_set_header Host $host;
		   proxy_redirect off;
		   proxy_set_header X-Real-IP $remote_addr;
		   proxy_set_header X-Scheme $scheme;
		   proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
		   proxy_set_header X-Forwarded-Proto $scheme;
		   proxy_pass http://localhost:8081;
        }
    }

后台运行XXX-1.0.0.jar 并将日志写到output.log 中

nohup java -jar XXX-1.0.0.jar 2>&1 >output.log &