nginx ssi + ngx_pagespeed 实现micro frontends 开发

nginx 的ssi 功能让我们可以将不同的拼接起来,ngx_pagespeed 是pagespeed 的nginx 模块,可以帮助
我们解决前端的一些性能优化的问题,通过简单的配置就可以搞定

一张参考图

nginx ssi + ngx_pagespeed 实现micro frontends 开发

说明: demo 只简单使用了nginx ssi + ngx_pagespeed,ngx_srcache 暂时还没用

环境准备

  • docker-compose file
 
version: "3"
services:
  main:
    build: ./
    ports:
    - "8080:80"
  web1:
    build: 
      context: ./web1
    ports:
    - "8180:80"
  web2:
    build: 
      context: ./web2
    ports:
    - "8181:80"
 
 
  • 说明
    main 是nginx ssi 的server ,web1 web2, 是两个不同的website,使用main 进行拼接,同时web1,web2 都是
    通过main proxy 的,放到这边我们同时可以做一些cache 的优化,而且可以将服务隔离
  • main dockerfile && config
 
# FROM openresty/openresty:alpine-fat
FROM pagespeed/nginx-pagespeed
# COPY nginx.conf usr/local/openresty/nginx/conf/
# ADD index.html /usr/local/openresty/nginx/html/index.html
# ADD index.css /usr/local/openresty/nginx/html/index.css
RUN mkdir -p /var/ngx_pagespeed_cache
COPY nginx.conf /etc/nginx/
ADD index.html /usr/share/nginx/html/index.html
ADD index.css /usr/share/nginx/html/index.css
EXPOSE 80

main nginx conf
proxy+ pagespeed

 
worker_processes 1;
events {
    worker_connections 1024;
}
http {
    include mime.types;
    default_type application/octet-stream;
    sendfile on;
    keepalive_timeout 65;
    root /usr/share/nginx/html;
    pagespeed on;
    pagespeed FileCachePath /var/ngx_pagespeed_cache;
    pagespeed EnableFilters combine_css;
    pagespeed EnableFilters collapse_whitespace;
    pagespeed EnableFilters combine_javascript;
    pagespeed EnableFilters combine_heads;
    pagespeed EnableFilters convert_to_webp_lossless;
    pagespeed StatisticsPath /ngx_pagespeed_statistics;
    pagespeed GlobalStatisticsPath /ngx_pagespeed_global_statistics;
    pagespeed MessagesPath /ngx_pagespeed_message;
    pagespeed ConsolePath /pagespeed_console;
    pagespeed AdminPath /pagespeed_admin;
    pagespeed GlobalAdminPath /pagespeed_global_admin;
    gzip on;
    server {
        listen 80;
        server_name localhost;
        charset utf-8;
        default_type text/html;
        location /ngx_pagespeed_statistics { 
         }
        location /ngx_pagespeed_global_statistics {
        }
        location /ngx_pagespeed_message { 
         }
        location /pagespeed_console { 
        }
        location ~ ^/pagespeed_admin {
        }
        location ~ ^/pagespeed_global_admin {
        }
        location / {
            ssi on;
            index index.html index.htm;
        }
        error_page 500 502 503 504 /50x.html;
        location = /50x.html {
            root html;
        }
        location /web2/ {
            rewrite ^/web2(.*) $1 break;
            proxy_ignore_client_abort on;
            client_body_buffer_size 10M;
            client_max_body_size 10G;
            proxy_buffers 1024 4k;
            proxy_read_timeout 300;
            proxy_pass http://web2;
            proxy_set_header Host $http_host;
            proxy_set_header X-Forwarded-For $remote_addr;
        }
        location /web1 {
           rewrite ^/web1(.*) $1 break;
            proxy_ignore_client_abort on;
            client_body_buffer_size 10M;
            client_max_body_size 10G;
            proxy_buffers 1024 4k;
            proxy_read_timeout 300;
            proxy_pass http://web1;
            proxy_set_header Host $http_host;
            proxy_set_header X-Forwarded-For $remote_addr;
        }
    }
}
​ 

main index page
ssi include

 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>main page</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
     main page
    <!--#include virtual="/web1/" -->
    <!--#include virtual="/web2/" -->
</body>
</html>
 
 
  • web1 dockerfile && config
# FROM openresty/openresty:alpine-fat
FROM pagespeed/nginx-pagespeed
# COPY nginx.conf usr/local/openresty/nginx/conf/
# ADD index.html /usr/local/openresty/nginx/html/web1/index.html
# ADD index.css /usr/local/openresty/nginx/html/web1/index.css
RUN mkdir -p /var/ngx_pagespeed_cache
COPY nginx.conf /etc/nginx/
ADD index.html /usr/share/nginx/html/index.html
ADD index.css /usr/share/nginx/html/index.css
ADD app.png /usr/share/nginx/html/app.png
EXPOSE 80
 
 

web1 nginx conf:
static website + pagespeed

 
worker_processes 1;
events {
    worker_connections 1024;
}
http {
    include mime.types;
    default_type application/octet-stream;
    sendfile on;
    keepalive_timeout 65;
    root /usr/share/nginx/html;
    pagespeed on;
    pagespeed FileCachePath /var/ngx_pagespeed_cache;
    pagespeed EnableFilters combine_css;
    pagespeed EnableFilters collapse_whitespace;
    pagespeed EnableFilters combine_javascript;
    pagespeed EnableFilters combine_heads;
    pagespeed EnableFilters convert_to_webp_lossless;
    gzip on;
    server {
        listen 80;
        server_name localhost;
        charset utf-8;
        default_type text/html;
        location / {
         index index.html index.html;
        }
        error_page 500 502 503 504 /50x.html;
        location = /50x.html {
            root html;
        }
    }
}
 
 

web1 index page

<head>
    <link rel="stylesheet" href="web1/index.css">
</head>
<div id="website1">website1</div>
<img id ="logoinfo" src="web1/app.png" >
 
  • web2 ,同web1 类似,主要是页面布局,以及引用的资源不一样

启动&&测试

  • 启动
docker-compose build
docker-compose up -d
 
  • 效果

    nginx ssi + ngx_pagespeed 实现micro frontends 开发

nginx ssi + ngx_pagespeed 实现micro frontends 开发

参考资料

https://github.com/rongfengliang/nginx-ssi-pagespeed
https://www.slideshare.net/ArifWider/a-highperformance-solution-to-microservice-ui-composition-xconf-hamburg

上一篇:JAVA开发中如何优化类的设计


下一篇:Java SE 之 DAO层接口设计思想