nginx ssi + ngx_pagespeed 实现micro frontends 开发
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
分类:
docker
, web框架
, 容器
, nginx
, 持续集成
, 云运维&&云架构
, docker-compose
, micro-frontends
, ngx_pagespeed
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· 没有源码，如何修改代码逻辑？
· 全程不用写代码，我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· .NET10 - 预览版1新功能体验（一）
2017-12-18 ArangoDB Foxx service 使用
2013-12-18 silverlight 进行本地串口调用的一种可行的解决方法