目录
1、部署单个站点2、部署多个站点3、缓存问题解决1、部署单个站点
配置如下
server {listen 80;server_name localhost;location / {root /app; index index.html;try_files $uri $uri/ /index.html;}}
其中:
/app 是网站根目录
2、部署多个站点
server {listen 80;listen 443 ssl http2;server_name ;if ($ssl_protocol = "") {return 301 https://$host$request_uri; }# 前端location / {root /data/wwwroot/www;index index.html;try_files $uri $uri/ /index.html;}# 后台location ^~/admin {alias /data/wwwroot/admin;try_files $uri $uri/ /admin/index.html;}# 数据接口location /api {proxy_pass http://127.0.0.1:5000;}}
3、缓存问题解决
浏览器缓存分类：
强制缓存 Expires：依赖本地时间和服务器时间Cache-control：max-age=10 协商缓存 last-modified：文件修改时间ETag：文件指纹 禁用缓存 Cache-control：no-store
html默认当做了静态文件传输，会被浏览器缓存，每次打开都拿不到最新的页面
使用Charles抓包发现：
访问网站首页压根没有进行请求，直接从浏览器本地获取了index.html文件。看来浏览器使用了强制缓存策略
nginx 添加以下配置，告诉浏览器怎么缓存html文件
# 对html文件限制缓存location ~ .*\.(html)$ {# 不缓存# add_header Cache-Control no-store; # 或者用 协商缓存add_header Cache-Control no-cache;add_header Pragma no-cache; }# css/js文件location ~ .*\.(js|css)?$ {# 缓存有效期：7天expires 7d;access_log off;}# 图片资源location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|flv|mp4|ico)$ {expires 30d;access_log off;}
协商缓存的参数
Last-Modified / IF-Modified-Since 验证修改时间Etag / IF-None-Match 验证文件指纹
参考
/zh/guide/deployment.html
前端项目中 浏览器缓存的更新不及时问题及解决方法
中高级前端工程师都需要熟悉的技能–前端缓存
