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-fatFROM 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.cssRUN mkdir -p /var/ngx_pagespeed_cacheCOPY nginx.conf /etc/nginx/ADD index.html /usr/share/nginx/html/index.htmlADD index.css /usr/share/nginx/html/index.cssEXPOSE 80main 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=</head><body> main page <!--#include virtual="/web1/" --> <!--#include virtual="/web2/" --></body></html>- web1 dockerfile && config
# FROM openresty/openresty:alpine-fatFROM 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.cssRUN mkdir -p /var/ngx_pagespeed_cacheCOPY nginx.conf /etc/nginx/ADD index.html /usr/share/nginx/html/index.htmlADD index.css /usr/share/nginx/html/index.cssADD app.png /usr/share/nginx/html/app.pngEXPOSE 80web1 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</head><div >website1</div><img id ="logoinfo" src="web1/app.png" > - web2 ,同web1 类似，主要是页面布局，以及引用的资源不一样
启动&&测试
- 启动
docker-compose builddocker-compose up -d- 效果
