Nginx部署前端

nginx 安装说明

一、下载
nginx download

https://nginx.org/en/download.html

二、解压，双击nginx.exe，如图

三、访问80端口查看，如图证明启动成功

四、如果没反应，说明80端口号被专用，可以先杀死80端口

1. netstat -ano | findstr “80”(查看占用80端口的进程号)
   
2. 打开任务管理器，找到PID(进程号)为7892的关闭即可，如图
   

注意：一个程序有2个进程，必须先关闭守护进程，再关闭主进程。或者右键守护进程，关闭进程树也一样。

操作Nginx命令

1. start nginx 启动
2. nginx -s reload 重启
3. nginx -s stop 关闭

注意：Nginx只能启动一次。 用cmd命令启动时，需要在nginx根目录

编写Nginx配置实现反向代理

1. 修改路径：
   conf - >nginx.conf
2. 编辑配置，配置反向代理服务

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

	#1. 每个反向代理服务 都是一个server{}
	#2. listen  nginx监听用户请求端口 默认80
	#3. server_name  拦截服务的名称/域名名称
	#4. location {}    开始执行反向代理
	#5. / 拦截的路径    拦截所有的请求
	#6. root 代表反向代理的是一个目录
	#7. index 代表访问的默认的页面
    server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   html;
            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;
    #    }
    #}

	# 配置图片代理  记得保存
	server {
		listen 80;
		server_name image.jt.com;
		location / {
			root  E:/images;
		}
	}
}
#所有的服务都在协议（http）之内写

3. 图片回显思路
   磁盘地址: E:\images\2021\10\15\a.jpg
   网络地址: http://image.jt.com\2021\10\15\a.jpg
   代理核心: http://image.jt.com 映射到 E:\images
   实现域名代理:

4. 在本机配置HOSTS文件
   位置: C:\Windows\System32\drivers\etc
   修改权限:
   如果勾选只读,则去掉即可
   

5. 打开hosts文件，编写如下内容

127.0.0.1 ieonline.Microsoft.com
#配置图片服务器
#192.168.126.129  image.jt.com
127.0.0.1  image.jt.com
#配置后端服务器
#127.0.0.1  manage.jt.com
192.168.126.129  manage.jt.com #这是linux的ip地址
#配置前端服务器
#127.0.0.1  www.jt.com
192.168.126.129  www.jt.com

发布前端项目

1. 路径说明
   开发阶段路径：http://localhost:8091/xxx/xxx
   生产网络路径：http://manage.jt.com/xxx/xxx

2. 修改前端main.js文件，请求后端路径
   

3. 修改前端addItem.vue文件，图片请求路径
   

4. 打包编译前端项目
   

5. 找到dist文件（编译打包好的前端项目文件）
   

6. 将打包后文件放到nginx根目录即可
   

7. 设置访问前端页面路径
   用户通过域名: http://www.jt.com:80 访问前端的项目路径 dist/index.html（相对路径）
   编辑conf.nginx文件

server {
		listen 80;
		server_name www.jt.com;
		location / {
			root  dist;
			index index.html;
		}
	}
	# 配置图片代理  记得保存
	server {
		listen 80;
		server_name image.jt.com;
		location / {
			root  D:/images;
		}
	}

编辑hosts文件

127.0.0.1 ieonline.Microsoft.com
#配置图片服务器
#192.168.126.129  image.jt.com
127.0.0.1  image.jt.com
#配置后端服务器
127.0.0.1  manage.jt.com
#192.168.126.129  manage.jt.com
#配置前端服务器
127.0.0.1  www.jt.com
#192.168.126.129  www.jt.com

8. 开启nginx，访问www.jt.com，前端代理测试，如图
   

实现负载均衡

需求：后端请求的网址: http://manage.jt.com 转向到 http://localhost:8091
代理规则: 反向代理.

1. 编辑nginx.conf文件(单台服务器)

#manage.jt.com:80 映射localhost:8091
	server {
		listen 80;
		server_name manage.jt.com;
		location / {
			#代理请求
			proxy_pass http://127.0.0.1:8091;
		}
	}

2. 负载均衡图解
   
3. 启动后台多个tomcat服务器
   
4. 在nginx.conf中配置tomcat集群(默认轮询策略)

#manage.jt.com:80 映射localhost:8091
	server {
		listen 80;
		server_name manage.jt.com;
		location / {
			#代理请求
			#proxy_pass http://127.0.0.1:8091;
			proxy_pass http://tomcats;
		}
	}
	#配置后端集群
	upstream tomcats {
		server 127.0.0.1:8091;
		server 127.0.0.1:8092;
	}

5. 负载均衡策略
   （1)、权重
   说明: 根据服务器的性能,手动分配服务器的负载.

#配置后端集群 1.默认轮询 2.权重 weight
	upstream tomcats {
		server 127.0.0.1:8091 weight=4;
		server 127.0.0.1:8092 weight=1;
	}

（2）、IP_HASH
需求: 让用户的请求与服务器绑定, 用户访问某台服务器,以后永远访问该服务器.

	upstream tomcats {
		ip_hash; 
		server 127.0.0.1:8091;
		server 127.0.0.1:8092;
	}

（3）、url_hash策略

（4）、fair策略

upstream s_siat{
    server 172.31.3.82:9170;

    server 172.31.3.82:9171;

 server 172.31.3.82:9173;
 fair;
   }

（5）、Sticky策略