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. 5.2 C++重载操作符的优先级

    参考:http://www.weixueyuan.net/view/6380.html 总结: 重载操作符不能改变操作符的优先级和语法特性. 重载操作符不能改变操作符的优先级和语法特性.例如上一节复数 ...

  2. 从今天开始 每天记录HTML，CSS 部分的学习笔记

    从今天开始 每天记录HTML,CSS 部分的学习笔记

  3. mvc项目中实现备份数据库（sqlserver2005）

    功能要求:mvc项目,实现数据库备份(bak文件) 实现步骤:<a id="backupDB" href="javascript:" >数据库备份& ...

  4. <Flume><Source Code><Flume源码阅读笔记>

    Overview source采集的日志首先会传入ChannelProcessor, 在其内首先会通过Interceptors进行过滤加工,然后通过ChannelSelector选择channel. ...

  5. 1) 上传多张图片时 ,对 $_FILES 的处理. upload ; 2)fileinput 上传多张图片. 3) 修改,删除的时候删除原来的资源,图片 update, delete , 删除 4)生成器中两个字段上传图片的时候,要修改生成器生成的代码

    1上传多张图片, 要对 $_FILES进行 重新处理. //添加 public function addCourseAlbumAction() { $CourseAlbumModel = new Co ...

  6. apache 服务器配置

    第一.强制www域名301跳转 RewriteEngine onRewriteCond %{HTTP_HOST} ^itbulu\.com [NC]RewriteRule ^(.*)$ https:/ ...

  7. getHibernateTemplate().save(t)执行不成功，数据不能插入到数据库

    BaseDaoImpl类中的代码如下 public void save(T t) {System.out.println(666);getHibernateTemplate().save(t);    ...

  8. jQuery中extend()实现原理

    jQuery.extend使用的几种方式 1.jQuery.extend(源对象) jQuery源代码: if(length == i){ target = this; --i; } 示例1: var ...

  9. Scrum_Sprint

    1.计划会议过程 经过一天的讨论研究,我们对该项目进行了需求分析,确定了这周所要实现的各个功能 并做好了任务看板,并将项目的各个功能分成一个个任务,进行了初步的分工 2.backlog BACKLOG ...

  10. 安卓 dex 通用脱壳技术研究（四）

    /*     当第一个类执行到此函数时,我们在dvmDefineClass执行之前,也就是第一个类加载之前     注入我们的dump代码:即DumpClass()函数 */ static void  ...