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

一张参考图

说明： 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
 
  • 效果

参考资料

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

nginx ssi + ngx_pagespeed 实现micro frontends 开发的更多相关文章

  1. 几个方便进行micro frontend 开发的工具&&类库

    nodejs 类库 从当前来说nodejs 的npm 偏多,因为毕竟面向的是web 编程 tailor 一个layout 服务(基于fragment 的开发方式)https://github.com/ ...

  2. nginx ssi 配置小细节（一）

    最近工作需要使用nginx的ssi (server side include)技术,在这里,将使用中的一点心得分享一下,也是一种备忘! 首先,nginx的ssi启用很简单,就只有三个最基本的指令: s ...

  3. Nginx - SSI Module

    SSI, for Server Side Includes, is actually a sort of server-side programming language interpreted by ...

  4. Nginx+Python+uwsgi+Django的web开发环境安装及配置

    Nginx+Python+uwsgi+Django的web开发环境安装及配置 nginx安装 nginx的安装这里就略过了... python安装 通常系统已经自带了,这里也略过 uwsgi安装 官网 ...

  5. Micro Frontends

    Micro Frontends - extending the microservice idea to frontend development https://micro-frontends.or ...

  6. Micro Frontends 微前端

    Micro Frontends https://martinfowler.com/articles/micro-frontends.html Integration approaches Server ...

  7. Micro Frontends & microservices

    Micro Frontends & microservices https://micro-frontends.org/ https://github.com/neuland/micro-fr ...

  8. nginx ssi 模块

    在nginx下与SSI配置相关的参数主要有ssi  ssi_sclient_error ssi_types三个.具体的用法如下 ssi on 开启ssi支持,默认是off ssi_silent_err ...

  9. 使用Nginx SSI功能辅助HTML页面设计

    SSI,Server Side Include,支持html静态文件内以 <!--#include file="/layout/header.html"-->  的方式 ...

随机推荐

  1. C++基础知识：构造与析构

    1.构造函数的定义: C++中的类可以定义与类名相同的特殊成员函数这种与类名相同的成员函数叫做构造函数构造函数在定义时可以有参数,但是没有任何返回类型的声明 2.构造函数的调用: 一般情况下C++编译 ...

  2. 1076 Wifi密码

    下面是微博上流传的一张照片:“各位亲爱的同学们,鉴于大家有时需要使用 wifi,又怕耽误亲们的学习,现将 wifi 密码设置为下列数学题答案:A-1:B-2:C-3:D-4:请同学们自己作答,每两日一 ...

  3. 2019.2.13 SW

  4. js 数组去重的几种方式及原理

    let arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,' ...

  5. golang统计出其中英文字母、空格、数字和其它字符的个数

    方法一 通过ASCII码表判断并统计 package main import "fmt" func charactortype() { var s2 string = " ...

  6. kbmMW功能＃5 - kbmMWProcess单元

    在新的kbmMW v.5.06.20版本中新加kbmMWProcess单元.通过TkbmMWProcess类的各种类方法,可以轻松地在Windows上对外部进程进行分组,启动和停止.在即将发布的小修补 ...

  7. array_reverse（）函数

    $a=array(1,2,4,5,6); print_r(array_reverse($a)); 结果:Array ( [0] => 6                              ...

  8. python day17面向对象-组合

    组合: 给一个类的对象封装一个属性,这个属性是另一个类的对象. class GameRole: def __init__(self, name, ad, hp): self.name = name s ...

  9. HDU6043 17多校1 KazaQ's Socks 水题

    题目传送:http://acm.hdu.edu.cn/showproblem.php?pid=6043 Problem Description KazaQ wears socks everyday. ...

  10. JVM 自带性能监测调优工具 （jstack、jstat）及 JVM GC 调优

    1. jstack:占用最多资源(CPU 内存)的Java代码 https://www.cnblogs.com/chengJAVA/p/5821218.html https://blog.csdn.n ...