使用next.js完成从开发到部署，一组开源技术大全
<p>next.js 是一个非常棒的轻量级的<code>react</code>同构框架，使用它可以快速的开发出基于服务端渲染的<code>react</code>应用。在next.js 官网推荐的是使用<code>now</code>来部署应用，但是对于国内用户或者说是有特殊需求的用户来说，部署到自定义服务器也许是大多数人希望的。借着近期公司官网改版，顺便分享下自己从开发到部署过程中所经历的点点滴滴。</p><p>依稀还记得第一次使用next.js 是在去年（2017年），那个时候使用的是next.js 2.x版本，<code>react</code>还是15版本，一年过去，现在<code>react</code>已经发展到16版本，而next.js 已经发展到6.0版本了，迭代速度瞠目结舌，在使用新版本的过程中也是遇到不少的坑。</p>
<h2 class="heading">用到的技术</h2>
<p>先说下这次用到了哪些技术，下面列举了项目中主要用到的技术或工具库。</p>
<ul>
<li>Koa 2</li>
</ul>
<blockquote>
<p>由express原班人马开发的下一代web框架，用来提供web服务。</p>
</blockquote>
<ul>
<li>nginx</li>
</ul>
<blockquote>
<p>是一个高性能的HTTP和反向代理服务器，也是一个IMAP/POP3/SMTP服务器（摘自百度百科），由俄罗斯人开发。用来提供静态文件服务、https证书、代理服务。</p>
</blockquote>
<ul>
<li>react 16.3</li>
</ul>
<blockquote>
<p>一个javascript ui库</p>
</blockquote>
<ul>
<li>next.js 6.0.1</li>
</ul>
<blockquote>
<p>一个轻量级的react同构应用框架</p>
</blockquote>
<ul>
<li>ant design</li>
</ul>
<blockquote>
<p>由蚂蚁金服开发的基于<code>react的</code>一套中后台产品组件库</p>
</blockquote>
<ul>
<li>react-motion</li>
</ul>
<blockquote>
<p>基于<code>react</code>的动画解决方案</p>
</blockquote>
<ul>
<li>react-waypoint</li>
</ul>
<blockquote>
<p>判断组件是否在当前可视区的<code>react</code> 组件</p>
</blockquote>
<ul>
<li>pm2</li>
</ul>
<blockquote>
<p>一个带有负载均衡功能的Node应用的进程管理器</p>
</blockquote>
<ul>
<li>isomorphic-fetch</li>
</ul>
<blockquote>
<p>同构WHATWG Fetch API</p>
</blockquote>
<h2 class="heading">开发阶段</h2>
<p>讲了这么多，让我们进入开发阶段，第一步构建项目架构，这里分享下自己的项目结构：</p>
<p>? .vscode</p>
<blockquote>
<p><code>vscode</code> 配置文件</p>
</blockquote>
<p>? component</p>
<blockquote>
<p>react组件</p>
</blockquote>
<p>? common</p>
<blockquote>
<p>公共部分，我放置的是导航栏信息、全局变量和全局样式等等</p>
</blockquote>
<p>? pages</p>
<blockquote>
<p>项目所有页面入口，也是next.js 各页面入口文件</p>
</blockquote>
<p>? static</p>
<blockquote>
<p>静态文件</p>
</blockquote>
<p>? styles</p>
<blockquote>
<p>各页面样式表</p>
</blockquote>
<p>? index.js</p>
<blockquote>
<p>node启动文件</p>
</blockquote>
<p>? .babelrc</p>
<blockquote>
<p>babel配置文件</p>
</blockquote>
<p>? .gitignore</p>
<blockquote>
<p>git 配置文件</p>
</blockquote>
<p>? ecosystem.config.js</p>
<blockquote>
<p>pm2配置文件</p>
</blockquote>
<p>? next.config.js</p>
<blockquote>
<p>next.js 配置文件</p>
</blockquote>
<p>? postcss.config.js</p>
<blockquote>
<p>postcss 配置文件</p>
</blockquote>
<p>? nginx.conf</p>
<blockquote>
<p>nginx配置文件</p>
</blockquote>
<p>? package.json</p>
<blockquote>
<p>npm配置文件</p>
</blockquote>
<p>在完成了项目结构配置之后，假设你已经在<code>package.json</code>中保存了我们所需要的所有依赖，让我们尝试着输入<code>yarn</code>来安装依赖。这里假设安装一切顺利，下面继续我们的开发之旅。</p>
<p>首先，在<code>pages</code>文件下新建一个<code>index.js</code>，这里就随便从我真实项目中抽取部分代码来作师范。</p>
<ol class="hljs-ln">
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-keyword">export <span class="hljs-keyword">default <span class="hljs-class"><span class="hljs-keyword"><span class="hljs-class"><span class="hljs-keyword">class<span class="hljs-class"> <span class="hljs-title"><span class="hljs-class"><span class="hljs-title">HomePage<span class="hljs-class"> <span class="hljs-keyword"><span class="hljs-class"><span class="hljs-keyword">extends<span class="hljs-class"> <span class="hljs-title"><span class="hljs-class"><span class="hljs-title">React<span class="hljs-class">.<span class="hljs-title"><span class="hljs-class"><span class="hljs-title">Component<span class="hljs-class"> {</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-keyword">static <span class="hljs-keyword">async getInitialProps({ req, pathname }) {</span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-keyword">const data = <span class="hljs-keyword">await fetch(<span class="hljs-string"><span class="hljs-string">`<span class="hljs-subst"><span class="hljs-string"><span class="hljs-subst">${ctx}<span class="hljs-string">/api/projects/common/list`).then(<span class="hljs-function"><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">res<span class="hljs-function"> => res.json())</span></span></span></span></span></span></span></span></span></span></span></span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">.then(<span class="hljs-function"><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">dt<span class="hljs-function"> => dt)</span></span></span></span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">.catch(<span class="hljs-function"><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">err<span class="hljs-function"> => {</span></span></span></span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-keyword">return {</span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-attr">success: <span class="hljs-literal">false,</span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-attr">message: err.message</span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">}</div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">})</div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-keyword">return { pathname,data };</span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">}</div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code"> </div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">render() {</div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-keyword">const { pathname, data } = <span class="hljs-keyword"><span class="hljs-built_in">this.props;</span></span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-keyword">return (</span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="xml"><span class="hljs-tag"><span class="xml"><span class="hljs-tag"><<span class="hljs-name"><span class="xml"><span class="hljs-tag"><span class="hljs-name">div<span class="xml"><span class="hljs-tag">></span></span></span></span></span></span></span></span></span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-tag"><span class="xml"><span class="hljs-tag"><<span class="hljs-name"><span class="xml"><span class="hljs-tag"><span class="hljs-name">Head<span class="xml"><span class="hljs-tag">></span></span></span></span></span></span></span></span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-tag"><span class="xml"><span class="hljs-tag"><<span class="hljs-name"><span class="xml"><span class="hljs-tag"><span class="hljs-name">title<span class="xml"><span class="hljs-tag">><span class="xml">首页-易科捷（武汉）生态科技有限公司<span class="hljs-tag"><span class="xml"><span class="hljs-tag"></<span class="hljs-name"><span class="xml"><span class="hljs-tag"><span class="hljs-name">title<span class="xml"><span class="hljs-tag">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-tag"><span class="xml"><span class="hljs-tag"></<span class="hljs-name"><span class="xml"><span class="hljs-tag"><span class="hljs-name">Head<span class="xml"><span class="hljs-tag">></span></span></span></span></span></span></span></span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-tag"><span class="xml"><span class="hljs-tag"><<span class="hljs-name"><span class="xml"><span class="hljs-tag"><span class="hljs-name">div<span class="xml"><span class="hljs-tag">><span class="xml">Welcome to next.js!<span class="hljs-tag"><span class="xml"><span class="hljs-tag"></<span class="hljs-name"><span class="xml"><span class="hljs-tag"><span class="hljs-name">div<span class="xml"><span class="hljs-tag">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">{/*这里省略代码*/}</div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-tag"><span class="xml"><span class="hljs-tag"></<span class="hljs-name"><span class="xml"><span class="hljs-tag"><span class="hljs-name">div<span class="xml"><span class="hljs-tag">></span></span></span></span></span></span></span></span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">);</div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">}</div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">}</div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code"> </div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="copy-code-btn">复制代码</span></div>
</div>
</li>
</ol>
<p>如果你的<code>package.json</code>中没有配置<code>next</code>启动脚本，请访问setup进行配置，下面我们在控制台运行<code>npm run dev</code>，如果一切顺利，打开浏览器，你将会看到<code>Welcome to next.js!</code></p>
<p>在<code>next.js</code>中开发体验和<code>react</code>几乎没有什么区别，但是在<code>webpack</code>配置这块可能需要下点功夫。一些常用的插件像<code>sass</code>、<code>css</code>等， <code>next.js</code>都已经给你提供了，你也可以使用社区开源的插件来完成你的开发之旅。详情请查看next.js官网。</p>
<h2 class="heading">部署</h2>
<p>在经历了开发阶段、测试等等一系列流程，现在终于等到了部署阶段。在<code>next.js</code>中生产阶段打包只需要运行<code>npm run build</code>即可，官方推荐不修改打包的文件夹名字（原名称为<code>.next</code>），这里个人推荐修改成<code>build</code>或者<code>dist</code>这些名称。在打包完成之后，需要编写<code>nodejs</code>启动入口文件，下面贴出实例代码：</p>
<ol class="hljs-ln">
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-keyword">const Koa = <span class="hljs-built_in">require(<span class="hljs-string">'koa')</span></span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-keyword">const next = <span class="hljs-built_in">require(<span class="hljs-string">'next')</span></span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-keyword">const Router = <span class="hljs-built_in">require(<span class="hljs-string">'koa-router')</span></span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code"> </div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-keyword">const port = <span class="hljs-built_in">parseInt(process.env.PORT, <span class="hljs-number">10) || <span class="hljs-number">3000</span></span></span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-keyword">const dev = process.env.NODE_ENV !== <span class="hljs-string">'production'</span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-keyword">const app = next({ dev })</span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-keyword">const handle = app.getRequestHandler()</span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code"> </div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">app.prepare()</div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">.then(<span class="hljs-function"><span class="hljs-params"><span class="hljs-function">()<span class="hljs-function"> => {</span></span></span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-keyword">const server = <span class="hljs-keyword">new Koa()</span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-keyword">const router = <span class="hljs-keyword">new Router()</span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-comment">// 首页</span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">router.get(<span class="hljs-string">'/', <span class="hljs-keyword">async ctx => {</span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-keyword">await app.render(ctx.req, ctx.res, <span class="hljs-string">'/', ctx.query)</span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">ctx.respond = <span class="hljs-literal">false</span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">})</div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-comment">// 关于</span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">router.get(<span class="hljs-string">'/about', <span class="hljs-keyword">async ctx => {</span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-keyword">await app.render(ctx.req, ctx.res, <span class="hljs-string">'/about', ctx.query)</span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">ctx.respond = <span class="hljs-literal">false</span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">})</div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-comment">// 产品</span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">router.get(<span class="hljs-string">'/products/:id', <span class="hljs-keyword">async ctx => {</span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-keyword">const {id} = ctx.params</span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-keyword">await app.render(ctx.req, ctx.res, <span class="hljs-string"><span class="hljs-string">`/products/<span class="hljs-subst"><span class="hljs-string"><span class="hljs-subst">${id}<span class="hljs-string">`, ctx.query)</span></span></span></span></span></span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">ctx.respond = <span class="hljs-literal">false</span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">})</div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-comment">// 案例</span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">router.get(<span class="hljs-string">'/case', <span class="hljs-keyword">async ctx => {</span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-keyword">await app.render(ctx.req, ctx.res, <span class="hljs-string">'/case', ctx.query)</span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">ctx.respond = <span class="hljs-literal">false</span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">})</div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-comment">// 联系我们</span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">router.get(<span class="hljs-string">'/contact', <span class="hljs-keyword">async ctx => {</span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-keyword">await app.render(ctx.req, ctx.res, <span class="hljs-string">'/contact', ctx.query)</span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">ctx.respond = <span class="hljs-literal">false</span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">})</div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-comment">// 详情</span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">router.get(<span class="hljs-string">'/view/:type/:id', <span class="hljs-keyword">async ctx => {</span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-keyword">const {id, type} = ctx.params</span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-keyword">await app.render(ctx.req, ctx.res, <span class="hljs-string">`/view`, {id, type})</span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">ctx.respond = <span class="hljs-literal">false</span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">})</div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-comment">// 如果没有配置nginx做静态文件服务，下面代码请务必开启</span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-comment">/* router.get('*', async ctx => {</span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-comment"> await handle(ctx.req, ctx.res)</span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-comment"> ctx.respond = false</span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-comment"> })*/</span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-comment">// 防止出现控制台报404错误</span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">server.use(<span class="hljs-keyword">async (ctx, next) => {</span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">ctx.res.statusCode = <span class="hljs-number">200</span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-keyword">await next()</span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">})</div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">server.use(router.routes())</div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">server.listen(port, <span class="hljs-function">() => {</span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-built_in">console.log(<span class="hljs-string"><span class="hljs-string">`> Ready on http://localhost:<span class="hljs-subst"><span class="hljs-string"><span class="hljs-subst">${port}<span class="hljs-string">`)</span></span></span></span></span></span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">})</div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">})</div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code"> </div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="copy-code-btn">复制代码</span></div>
</div>
</li>
</ol>
<p>一般的静态文件、gzip压缩无需交给<code>nodejs</code>来做，个人一直认为专业的事交给专业的人。这里将该项任务转移给<code>nginx</code>，特别注意上面实例代码中我注释的部分代码，若果你没有使用<code>nginx</code>来做静态文件服务，请务必开启，否则像<code>next.js</code>打包出来的<code>js</code>、<code>css</code>、图片文件等，都将报<code>404</code>。</p>
<p>在<code>next.js</code>生产打包阶段打包出来的<code>js</code>文件请求路径中带有版本号，而真实打包出来的文件夹却没有实际对应的目录，也就是打包出来的是虚拟目录，这里如果使用<code>nginx</code>就需要特别注意。好在<code>next.js</code>提供配置项来修改<code>build id</code>，以下是我的真实代码：</p>
<ol class="hljs-ln">
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-comment">// next.config.js</span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-built_in">module.exports = {</span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-attr">generateBuildId: <span class="hljs-keyword">async () => {</span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-comment">// For example get the latest git commit hash here</span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-keyword">return <span class="hljs-string">'v1'</span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">}</div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">}</div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="copy-code-btn">复制代码</span></div>
</div>
</li>
</ol>
<p>这样打包出来的虚拟路径大概是<code>_next/v1/page/xxx.js</code>，如果你使用<code>cdn</code>前缀，这里有一点区别，但是版本号依然存在。</p>
<p>还有一个坑就是<code>next.js</code>打包出来的有三个文件夹：<code>bundles</code>、<code>dist</code>、<code>static</code>，对于不知道源码的人来说，根本不知道实际请求文件在哪一个文件夹。于是我就看<code>next.js</code>源码，发现其实找的是<code>bundle</code>文件下的<code>page</code>，源码位置：L214</p>
<p>所以在配置<code>nginx</code>就需要使用别名。下面给出一段我的<code>nginx</code>真实配置代码：</p>
<ol class="hljs-ln">
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-comment"># 网站根目录文件</span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-attribute">location <span class="hljs-regexp">~ ^/(robots.txt|humans.txt|favicon.ico|sw.js|baidu_verify_7Kj6tQjI3v.html) {</span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-attribute">root /home/website/eco_website_pc/static/;</span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-attribute">if (<span class="hljs-variable">$request_filename <span class="hljs-regexp">~* sw.js){</span></span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-attribute">expires -<span class="hljs-number">1s;</span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">}</div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-attribute">expires <span class="hljs-number">10m;</span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code"> </div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">}</div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-comment"># static下的文件</span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-attribute">location<span class="hljs-regexp"> ^~ /static/ {</span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-attribute">alias /home/website/eco_website_pc/static/;</span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-attribute">if (<span class="hljs-variable">$request_filename <span class="hljs-regexp">~* sw.js){</span></span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-attribute">expires -<span class="hljs-number">1s;</span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">}</div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-attribute">expires <span class="hljs-number">10m;</span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code"> </div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">}</div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-comment"># next pages页面下的脚本</span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-attribute">location <span class="hljs-regexp">~ ^/(/_next/v1/) {</span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-attribute">alias /home/website/eco_website_pc/build/bundles/;</span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-attribute">if (<span class="hljs-variable">$request_filename <span class="hljs-regexp">~* sw.js){</span></span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-attribute">expires -<span class="hljs-number">1s;</span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">}</div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-attribute">expires <span class="hljs-number">10m;</span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code"> </div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">}</div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-comment"># next static下的静态文件</span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-attribute">location <span class="hljs-regexp">~ ^/(/_next/static/) {</span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-attribute">root /home/website/eco_website_pc/build;</span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-attribute">if (<span class="hljs-variable">$request_filename <span class="hljs-regexp">~* sw.js){</span></span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-attribute">expires -<span class="hljs-number">1s;</span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">}</div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-attribute">expires <span class="hljs-number">10m;</span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code"> </div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">}</div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="copy-code-btn">复制代码</span></div>
</div>
</li>
</ol>
<p>静态文件配置好了就需要配置<code>https</code>证书了，因为我们这次项目是公司官网，证书我就自己去免费弄了一个，这里我使用的freessl上面提供的亚洲诚信的证书。在申请完<code>ssl</code>证书之后需要去域名提供商那里去配置<code>TXT</code>记录，我这里使用的是阿里云，在完成验证后，freessl将会下载证书，拿到该证书之后需要去配置<code>nginx</code> <code>ssl</code>证书，下面贴出我的完整配置：</p>
<ol class="hljs-ln">
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-section">server {</span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-attribute">listen <span class="hljs-number">80;</span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-attribute">listen <span class="hljs-number">443 ssl;</span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-attribute">server_name wh-eco.com;</span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-attribute">charset utf-<span class="hljs-number">8;</span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-attribute">ssl_certificate /home/website/ssl/www/full_chain.pem;</span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-attribute">ssl_certificate_key /home/website/ssl/www/private.key;</span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-attribute">fastcgi_param HTTPS <span class="hljs-literal">on;</span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-attribute">fastcgi_param HTTP_SCHEME https;</span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code"> </div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-attribute">if (<span class="hljs-variable">$scheme = http ) {</span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-attribute">return <span class="hljs-number">301 https://<span class="hljs-variable">$host<span class="hljs-variable">$request_uri;</span></span></span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">}</div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-attribute">access_log /var/log/nginx/www.wh-eco.com.access.log;</span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-attribute">error_log /var/log/nginx/www.wh-eco.com.<span class="hljs-literal">error.log;</span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-attribute">location / {</span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-attribute">proxy_pass http://127.0.0.1:xxxx; <span class="hljs-comment">#保密 0.0</span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-attribute">proxy_set_header Host <span class="hljs-variable">$host;</span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-comment">#proxy_redirect off;</span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-attribute">proxy_set_header REMOTE-HOST <span class="hljs-variable">$remote_addr;</span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-comment"># 网站可能后期会使用websocket 特次升级请求协议</span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-attribute">proxy_http_version <span class="hljs-number">1.<span class="hljs-number">1;</span></span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-attribute">proxy_set_header Upgrade <span class="hljs-variable">$http_upgrade;</span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-attribute">proxy_set_header Connection <span class="hljs-string">"upgrade";</span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-attribute">proxy_set_header X-Real-IP <span class="hljs-variable">$remote_addr;</span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-attribute">proxy_set_header X-Forwarded-For <span class="hljs-variable">$proxy_add_x_forwarded_for;</span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-attribute">proxy_connect_timeout <span class="hljs-number">60;</span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-attribute">proxy_read_timeout <span class="hljs-number">600;</span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-attribute">proxy_send_timeout <span class="hljs-number">600;</span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">}</div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-comment"># 网站根目录文件</span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-attribute">location <span class="hljs-regexp">~ ^/(robots.txt|humans.txt|favicon.ico|sw.js|baidu_verify_7Kj6tQjI3v.html) {</span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-attribute">root /home/website/eco_website_pc/static/;</span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-attribute">if (<span class="hljs-variable">$request_filename <span class="hljs-regexp">~* sw.js){</span></span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-attribute">expires -<span class="hljs-number">1s;</span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">}</div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-attribute">expires <span class="hljs-number">10m;</span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code"> </div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">}</div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-comment"># static下的文件</span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-attribute">location<span class="hljs-regexp"> ^~ /static/ {</span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-attribute">alias /home/website/eco_website_pc/static/;</span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-attribute">if (<span class="hljs-variable">$request_filename <span class="hljs-regexp">~* sw.js){</span></span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-attribute">expires -<span class="hljs-number">1s;</span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">}</div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-attribute">expires <span class="hljs-number">10m;</span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code"> </div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">}</div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-comment"># next pages页面下的脚本</span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-attribute">location <span class="hljs-regexp">~ ^/(/_next/v1/) {</span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-attribute">alias /home/website/eco_website_pc/build/bundles/;</span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-attribute">if (<span class="hljs-variable">$request_filename <span class="hljs-regexp">~* sw.js){</span></span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-attribute">expires -<span class="hljs-number">1s;</span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">}</div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-attribute">expires <span class="hljs-number">10m;</span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code"> </div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">}</div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-comment"># next static下的静态文件</span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-attribute">location <span class="hljs-regexp">~ ^/(/_next/static/) {</span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-attribute">root /home/website/eco_website_pc/build;</span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-attribute">if (<span class="hljs-variable">$request_filename <span class="hljs-regexp">~* sw.js){</span></span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-attribute">expires -<span class="hljs-number">1s;</span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">}</div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-attribute">expires <span class="hljs-number">10m;</span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code"> </div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">}</div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-attribute">error_page <span class="hljs-number">500 <span class="hljs-number">502 <span class="hljs-number">503 <span class="hljs-number">504 = /error.html;</span></span></span></span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-attribute">error_page <span class="hljs-number">404 = /notfound.html;</span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-attribute">location = /error.html {</span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-attribute">root /home;</span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">}</div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-attribute">location = /notfound.html{</span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-attribute">root /home;</span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">}</div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">}</div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="copy-code-btn">复制代码</span></div>
</div>
</li>
</ol>
<p>至于<code>gzip</code>你可以根据你要求来做配置，贴一个我的示例配置：</p>
<ol class="hljs-ln">
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-attribute">gzip <span class="hljs-literal">on;</span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-attribute">gzip_comp_level <span class="hljs-number">6;</span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-attribute">gzip_vary <span class="hljs-literal">on;</span></span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-attribute">gzip_types</span></div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">application/atom+xml</div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">application/javascript</div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">application/json</div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">application/rss+xml</div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">application/vnd.ms-fontobject</div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">application/x-font-ttf</div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">application/x-web-app-manifest+json</div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">application/xhtml+xml</div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">application/xml</div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">font/opentype</div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">image/svg+xml</div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">image/x-icon</div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">image/jpeg</div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">image/gif</div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">image/png</div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">text/css</div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">text/plain</div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">text/x-component;</div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="copy-code-btn">复制代码</span></div>
</div>
</li>
</ol>
<p>在完成<code>nginx</code>配置之后需要做的是以<code>pm2</code>方式启动整个应用</p>
<ol class="hljs-ln">
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">pm2 start ecosystem.config.js</div>
</div>
</li>
<li>
<div class="hljs-ln-numbers"> </div>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="copy-code-btn">复制代码</span></div>
</div>
</li>
</ol>
<p>在运行完上述命令后，如果一切顺利，你就可以输入域名来访问你的应用了（假设你已经完成了域名解析工作）。</p>
<h2 class="heading">总结</h2>
<p>一入前端深似海</p>
</div>
<div id="MySignature" role="contentinfo">
漫思<br><br>
来源：https://www.cnblogs.com/sexintercourse/p/14421789.html
頁:
[1]