-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
231 lines (136 loc) · 8.83 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小蒜头</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta property="og:type" content="website">
<meta property="og:title" content="小蒜头">
<meta property="og:url" content="https://www.ninn.top/index.html">
<meta property="og:site_name" content="小蒜头">
<meta property="og:locale" content="zh_CN">
<meta property="article:author" content="tao">
<meta name="twitter:card" content="summary">
<link rel="alternate" href="/atom.xml" title="小蒜头" type="application/atom+xml">
<link rel="icon" href="/favicon.png">
<link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="/css/style.css">
<meta name="generator" content="Hexo 5.2.0"></head>
<body>
<div id="container">
<div id="wrap">
<header id="header">
<div id="banner"></div>
<div id="header-outer" class="outer">
<div id="header-title" class="inner">
<h1 id="logo-wrap">
<a href="/" id="logo">小蒜头</a>
</h1>
</div>
<div id="header-inner" class="inner">
<nav id="main-nav">
<a id="main-nav-toggle" class="nav-icon"></a>
<a class="main-nav-link" href="/">Home</a>
<a class="main-nav-link" href="/archives">Archives</a>
</nav>
<nav id="sub-nav">
<a id="nav-rss-link" class="nav-icon" href="/atom.xml" title="RSS Feed"></a>
<a id="nav-search-btn" class="nav-icon" title="搜索"></a>
</nav>
<div id="search-form-wrap">
<form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit"></button><input type="hidden" name="sitesearch" value="https://www.ninn.top"></form>
</div>
</div>
</div>
</header>
<div class="outer">
<section id="main">
<article id="post-post2" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2019/12/02/post2/" class="article-date">
<time datetime="2019-12-01T16:00:00.000Z" itemprop="datePublished">2019-12-02</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2019/12/02/post2/">nginx下部署vue项目的缓存策略</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<h3 id="背景"><a href="#背景" class="headerlink" title="背景"></a>背景</h3><p>在部署vue项目的过程中，发现经常已经更新了项目的打包文件，但是其他人使用起来还是访问的老版本。而自己打开浏览器用开发者工具刷新查看请求，就是正常的发送If-None-Match来匹配ETag，然后正常返回200或者是304。</p>
<h3 id="原因"><a href="#原因" class="headerlink" title="原因"></a>原因</h3><p>问题实际上出现在Chrome的缓存策略上，如果我们没有设置Cache-Control，Chrome在我们第二次打开链接的时候就会使用缓存，而不会去管ETag相关的设置，<strong>但是在刷新的时候，又会正常的走ETag和 If-Match 头部的帮助下的缓存</strong>，所以我们自己打开开发者工具查看时总是正常的。</p>
<h3 id="解决方法"><a href="#解决方法" class="headerlink" title="解决方法"></a>解决方法</h3><p>知道问题的原因后，解决问题就很容易了。只需要在HTML的请求加上Cache-Control no-store就可以了。</p>
<figure class="highlight nginx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">location</span> / {</span><br><span class="line"> <span class="attribute">add_header</span> Cache-Control <span class="literal">no</span>-cache;</span><br><span class="line"> }</span><br><span class="line"><span class="attribute">location</span> <span class="regexp">~ .*\.(gif|jpg|png|css|js)(.*)</span> {</span><br><span class="line"> <span class="attribute">expires</span> max;</span><br><span class="line"> }</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<p>因为正则匹配的优先级高于/，所以静态文件都不会加上no-cache。因为vue里的js和css都是根据hash值生成文件名，所以缓存时间设置为最大约等于永久缓存是没有什么问题的。因为我们项目的图片文件名也是根据hash值生成的，所以也一并匹配了。如果你的项目不是，那就需要把<code>gif|jpg|png</code>去掉</p>
</div>
<footer class="article-footer">
<a data-url="https://www.ninn.top/2019/12/02/post2/" data-id="ckhomzg4y00003wa3cdfn14pv" class="article-share-link">分享</a>
</footer>
</div>
</article>
<article id="post-hello-world" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2019/06/20/hello-world/" class="article-date">
<time datetime="2019-06-19T16:00:00.000Z" itemprop="datePublished">2019-06-20</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2019/06/20/hello-world/">yii2缓存写入失败问题排查记录</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<h2 id="问题"><a href="#问题" class="headerlink" title="问题"></a>问题</h2><p>今天遇到了一个很奇怪的bug，只有同事的手机登录系统一直失败，其他人的都正常。</p>
<h2 id="发现原因"><a href="#发现原因" class="headerlink" title="发现原因"></a>发现原因</h2><p>在确认代码逻辑没问题后，发现是yii2写入缓存失败的问题。<br>我们yii2的缓存组件是使用文件组件，进入缓存所在的文件夹，发现有少数几个文件夹拥有者是root，而不是运行php-fpm的apache，而这几个文件夹的权限为775，所以apache没有写入的权限。</p>
<h2 id="解决问题"><a href="#解决问题" class="headerlink" title="解决问题"></a>解决问题</h2><p>使用chmod赋值777权限后，写入正常。<br>那么是什么导致这几个root文件的生成的呢？因为我们用了定时任务执行commonds，但是指定的用户是root，所以才出现了这个问题。把crontab里的用户指定改成apache，这问题就解决了。</p>
<h2 id="防范于未然"><a href="#防范于未然" class="headerlink" title="防范于未然"></a>防范于未然</h2><p>如果是有人登陆并手动执行了commonds的话，也可能会生成apache操作不了的文件，所以让运维把所有登陆用户和apache放在一个组里，这个问题就完全解决了。</p>
</div>
<footer class="article-footer">
<a data-url="https://www.ninn.top/2019/06/20/hello-world/" data-id="ckhomzg5400013wa32z0p54fz" class="article-share-link">分享</a>
</footer>
</div>
</article>
</section>
<aside id="sidebar">
<div class="widget-wrap">
<h3 class="widget-title">归档</h3>
<div class="widget">
<ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/12/">十二月 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/06/">六月 2019</a></li></ul>
</div>
</div>
<div class="widget-wrap">
<h3 class="widget-title">最新文章</h3>
<div class="widget">
<ul>
<li>
<a href="/2019/12/02/post2/">nginx下部署vue项目的缓存策略</a>
</li>
<li>
<a href="/2019/06/20/hello-world/">yii2缓存写入失败问题排查记录</a>
</li>
</ul>
</div>
</div>
</aside>
</div>
<footer id="footer">
<div class="outer">
<div id="footer-info" class="inner">
© 2020 tao<br>
</div>
</div>
</footer>
</div>
<nav id="mobile-nav">
<a href="/" class="mobile-nav-link">Home</a>
<a href="/archives" class="mobile-nav-link">Archives</a>
</nav>
<script src="//apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<link rel="stylesheet" href="/fancybox/jquery.fancybox.css">
<script src="/fancybox/jquery.fancybox.pack.js"></script>
<script src="/js/script.js"></script>
</div>
</body>
</html>