我们前端是微前端的项目,不同模块是分开的不同项目,用访问前缀区分。开发环境部署为了节约资源,直接使用一个nginx当做静态资源服务器,服务多个微前端,示意图如下:
下面是nginx使用的配置(server部分)
conf
server {
listen 8888;
server_name localhost;
access_log /var/log/nginx/mobile-access.log ;
# 静态资源
location /project1 {
alias /deploy/project1;
index index.html;
try_files $uri $uri/ /project1 /index.html;
autoindex off;
}
location /project2{
alias /deploy/project2;
index index.html;
try_files $uri $uri/ /project2/index.html;
autoindex off;
}
location /project3{
alias /deploy/project3;
index index.html;
try_files $uri $uri/ /project3/index.html;
autoindex off;
}
location /api {
proxy_pass http://127.0.0.1:8080;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_connect_timeout 300;
proxy_read_timeout 300;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /www/html;
}
}
特别注意的是,由于是前端项目, try_files 部分要按照上面的写,否则编译以后不能自动获取index.html,也就无法加载项目。
文件中/api部分为示意,一般是把流量转给后端网段。