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. Pamulinawen--IPA--菲律宾伊洛卡诺语

    这是一首菲律宾的民谣(不是他加禄语/Tagalog, 而是伊洛卡诺语/Ilokano), 我们国家的著名歌手朱明瑛也翻唱过, 歌曲中文名为<<田野之歌>>.

  2. springMVC拦截css与js等资源文件的解决

    写了一个demo的ssm,使用jetty容器跑的,但是在页面的时候总是发现访问资源出现404. 换了多种写法不见效. 偶然发现日志中请求被springMVC拦截了,气死我了. 解决方式: Spring ...

  3. android 应用程序中执行Linux 命令

    ADB 无线调试命令son = "setprop service.adb.tcp.port 5555\n" + "stop adbd\n" + "st ...

  4. UBUNTU安装 Rabbitvsc可视化版本控制客户端软件

    sudo add-apt-repository ppa:rabbitvcs/ppa sudo apt-get update sudo apt-get install rabbitvcs-core ra ...

  5. SharePoint REST API - REST请求导航的数据结构

    博客地址:http://blog.csdn.net/FoxDave 从一个既定的URL获取其他SharePoint资源 当你用SharePoint REST服务进行开发的时候,你经常会从指定的一个 ...

  6. Oracal

    增删改查 1.增加数据表 Create table users ( userid VARCHAR2(4), username VARCHAR2(20), userpass VARCHAR2(20), ...

  7. easyUI datagrid值转义

    数据库表里面字段的值想用另一种命名形式展示,如1是 是,2是 否     解决方法: 用到formatter ,{field:'params', title:'参数', width:100, sort ...

  8. react-native-echarts 解决数据刷新闪烁，不能动态连续绘制问题(转载)

    最终能实现效果:动态绘制K线图,安卓,iOS正常显示 替换node_modules/native-echarts/src/components/Echarts/中的index.js和renderCha ...

  9. 读懂TCP状态转移

    读懂TCP状态转移过程,对理解网络编程颇有帮助,本文将对TCP状态转移过程进行介绍,但各状态(总共11个)含义不在本文介绍的范围,请参考文末的书目列表. TCP状态转换图(state transiti ...

  10. 【翻译】Context should go away for Go 2

    2017/08/06   每次blog.golang.org更新博客,我都迫不及待去读一下:最新的一篇, Contributors Summit,记录了Go贡献者们的一些讨论.我读到一句话,让我感觉得 ...