浅谈Umijs如何实施微前端(二）发布和部署

接上篇

在本地调试完没有问题之后，就需要将对应的服务发布到服务器了，本实例中以CentOS Nginx部署为例，进行讲解

1. 部署环境

域名：example.com

服务器4台:

ip	作用
172.25.210.10	绑定域名，对外访问
172.25.210.11	部署主应用
172.25.210.12	部署子应用app1
172.25.210.13	部署子应用app2

2. Nginx配置

首先我们要对Nginx进行一些配置，如下

172.25.210.10

user  nginx;
worker_processes  auto;

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"';

    sendfile        on;
    keepalive_timeout  65;

    gzip  on;
    gzip_min_length 1k;
    gzip_buffers 4 16k;
    gzip_comp_level 2;
    gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png application/javascript;
    
    server {
        listen       80;
        server_name  localhost;

        client_max_body_size 20m;

        access_log  /var/log/nginx/access.log main;
        error_log /var/log/nginx/error.log;     
        #配置主应用代理
        location ^~/ {
            proxy_pass http://172.25.210.11:1000/;
            proxy_set_header   X-Forwarded-Proto $scheme;
            proxy_set_header   X-Real-IP         $remote_addr;
        }
        #配置子应用代理
        location ^~/app1 {
            proxy_pass http://172.25.210.12:1001/app1;
            proxy_set_header   X-Forwarded-Proto $scheme;
            proxy_set_header   X-Real-IP         $remote_addr;
        }
        location ^~/app2 {
            proxy_pass http://172.25.210.13:1002/app2;
            proxy_set_header   X-Forwarded-Proto $scheme;
            proxy_set_header   X-Real-IP         $remote_addr;
        }
        error_page   500 502 503 504  /500;
    }
}

172.25.210.11

server {
    listen       1000;
    server_name  localhost;
    client_max_body_size 20m;
    client_header_timeout 5m;
    fastcgi_connect_timeout 300s;
    fastcgi_send_timeout 300s;
    fastcgi_read_timeout 300s;
    location / {
        alias /data/ui/;
        index index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}

172.25.210.12

server {
    listen       1001;
    server_name  localhost;
    client_max_body_size 20m;
    client_header_timeout 5m;
    fastcgi_connect_timeout 300s;
    fastcgi_send_timeout 300s;
    fastcgi_read_timeout 300s;
    location /app1 {
        alias /data/ui/;
        index index.html index.htm;
        try_files $uri $uri/ /app1/index.html;
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}

172.25.210.13

server {
    listen       1002;
    server_name  localhost;
    client_max_body_size 20m;
    client_header_timeout 5m;
    fastcgi_connect_timeout 300s;
    fastcgi_send_timeout 300s;
    fastcgi_read_timeout 300s;
    location /app2 {
        alias /data/ui/;
        index index.html index.htm;
        try_files $uri $uri/ /app2/index.html;
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}

3. 分别启动nginx,至此部署完毕
4. 访问域名example.com/ 就可以访问主应用，访问example.com/sub-app1/ 访问子应用app1，访问example.com/sub-app2/ 访问子应用app2
5. 当然子应用也可以单独访问，访问example.com/app1/ 单独访问子应用app1，访问example.com/app2/ 单独访问子应用app2
6. 以上部署是在不同的服务器上，如果部署在同一台服务器上的话，只要新建不同的目录，然后配置nginx的转发就行了