2022-03-08-微前端qiankun部署

3. 线上部署

微前端部署，可多台机器部署，也可部署在同主机不同目录。

一、单主机部署

  1. 同端口部署，nginx核心配置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
server {
  listen       13000;
  #server_name localhost;
  index index.html;

  root /data/deployments/html-zyx/;

  error_page 500 502 503 504 /50x.html;

  add_header Cache-Control 'no-cache, must-revalidate, proxy-revalidate, max-age=0';
  add_header X-XSS-Protection "1; mode=block"; 
 
	location ^~ /zyx {
		alias /data/deployments/html/zyx-web-admin;
		index index.html index.htm;
		try_files $uri $uri/ /zyx/index.html;
	}

	location ^~ /zyx/sub/tag {
		alias /data/deployments/html/zyx-web-tag;
		index index.html index.htm;
		try_files $uri $uri/ /zyx/index.html;
	}

	location ^~ /zyx/sub/zd {
		alias /data/deployments/html/zyx-web;
		index index.html index.htm;
		try_files $uri $uri/ /zyx/index.html;
	}

	location ^~ /zyx/sub/gbmo {
		alias /data/deployments/html/gbmo-web;
		index index.html index.htm;
		try_files $uri $uri/ /zyx/index.html;
	}

	location ^~ /zyx/api/ {
			proxy_pass http://IP地址:20000;
			rewrite ^/zyx/api/(.*)$ /zyx/api/$1 break;
			proxy_redirect off;
			proxy_set_header Host $host;
			proxy_set_header X-Real-IP $remote_addr;
			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
			proxy_cookie_path / "/; httponly; secure; SameSite=Lax";
	}
}
  1. 单主机多端口部署
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
server {
        listen       80 default_server;
        listen       [::]:80 default_server;
        server_name  _;

        location ^~ /zyx {
            add_header Cache-Control 'no-cache, must-revalidate, proxy-revalidate, max-age=0';
            root /usr/local/openresty/nginx/html/zyx-web-main;
            index index.html;
            try_files $uri $uri/ /index.html;
        }
    }

    server {
        listen       9011 default_server;
	    listen       [::]:9011 default_server;
        server_name  _;

        location ^~ /zyx/sub/enterprise {
            add_header Cache-Control 'no-cache, must-revalidate, proxy-revalidate, max-age=0';
            root /usr/local/openresty/nginx/html/zyx-web-government-enterprise-through/;
            index index.html;
            try_files $uri $uri/ /index.html;
        }
    }
    server {
        listen       9012 default_server;
	    listen       [::]:9012 default_server;
        server_name  _;

        location ^~ /zyx/sub/portal {
            add_header Cache-Control 'no-cache, must-revalidate, proxy-revalidate, max-age=0';
            root /usr/local/openresty/nginx/html/zyx-web-portal/;
            index index.html;
            try_files $uri $uri/ /index.html;
        }
    }

二、多台主机部署

  1. 主应用nginx配置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
server {
    listen       80 default_server;
    listen       [::]:80 default_server;
    server_name  _;
    location ^~ /zyx {
        add_header Cache-Control 'no-cache, must-revalidate, proxy-revalidate, max-age=0';
        alias /usr/local/openresty/nginx/html;
        index index.html;
        try_files $uri $uri/ /index.html;

        if ($request_filename ~* .*.(html|htm)$)
        {
            expires -1s;
        }

        if ($request_filename ~* .*.(gif|jpg|jpeg|png|svg)$)
        {
            expires 30d;
        }

        if ($request_filename ~ .*.(js|css)$)
        {       
            expires 12h;
        }
    }
    # 访问子应用时，直接跳转相应主机ip，这里直接访问tsf上子应用部署组
    location /zyx/sub/portal {
      proxy_pass http://exp-zyx-web-portal;
    }
    location /zyx/sub/enterprise {
      proxy_pass http://exp-zyx-web-government-enterprise-through;
    }
    location /zyx/sub/tag {
      proxy_pass http://exp-zyx-web-tag;
    }
}
架构
#前端工程化 #qiankun #微前端 #nginx
2022-03-08-微前端qiankun部署
https://zhangyingxuan.github.io/2022-03-14-【架构】微前端qiankun部署/
作者
blowsysun
许可协议