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. Maven 加载ojdbc14.jar报错，解决方法

    因为oracle的ojdbc.jar是收费的,所以maven的中央仓库中没有这个资源,只能通过配置本地库才能加载到项目中去. 首先下载 ojdbc14  https://pan.baidu.com/s ...

  2. hdu-2063-过山车（匈牙利算法）

    过山车 Problem Description RPG girls今天和大家一起去游乐场玩,终于可以坐上梦寐以求的过山车了.可是,过山车的每一排只有两个座位,而且还有条不成文的规矩,就是每个女生必须找 ...

  3. CPU使用率过高分析方法

    项目过程中发现,应用服务器经常会出现CPU使用率较高的情况,需要定位出具体代码问题. 1.用top命令,根据CPU使用率排序,找出消耗cpu最高的进程 2.找出该进程下消耗CPU最高的线程(命令:to ...

  4. powerdesigner 使用

    1. 首先要确保机器安装了MySql的ODBC驱动,去http://dev.mysql.com/downloads/connector/odbc/5.1.html 下载 Connector/ODBC ...

  5. mysql 给表和字段加注释

    给表加注释: ALTER TABLE table_name COMMENT='这是表的注释'; 给列加注释: ALTER table table_name MODIFY `column_name` d ...

  6. DevExpress v18.1新版亮点——XAF篇（一）

    用户界面套包DevExpress v18.1日前正式发布,本站将以连载的形式为大家介绍各版本新增内容.本文将介绍了DevExpress eXpressApp Framework(XAF) v18.1 ...

  7. easyui弹框后销毁当前tab弹框不显示的解决方式

    var id=$("#pageId").val(); var message = "{\"id\":" + id+ ",\&quo ...

  8. display_errors","On");和error_reporting 区别和联系

    ini_set("display_errors","On");和error_reporting(E_ALL);   在用php做网站开发的时候 , 为防止用户看 ...

  9. python 时间戳算法

    根据当前时间戳获得整小时时间戳 unit = 3600 start_time = int(time.time())/3600 * 3600 根据当前时间戳获得整天时间戳 unit = 3600*24 ...

  10. 中国网建提供的SMS短信发送

    一个简单的发送短信的小demo 第一步: 兄弟们,首先你们去中国网建的官网去注册一个账户:网址http://sms.webchinese.cn/reg.shtml 第二步: 注册完成之后会有免费的测试 ...