在云函数 SCF 里为 Next.js 跑 SSR
<p>很多时候我们都希望首屏速度快，SEO 友好，那么相比于客户端渲染，SSR 渲染将是这方面的优势。Next.js、Nuxt.js 都是 SSR 框架。本篇文章将介绍 Next.js。</p><p>通常我们在部署 SSR 的时候，会担心运维等问题，但如果我们把它部署在云开发上就可以不必担心~</p>
<p>试试看看喽~</p>
<h2 id="环境准备">环境准备</h2>
<ol>
<li>安装node.js</li>
<li>安装云开发工具 @cloudbase/cli</li>
</ol>
<pre><code>npm i @cloudbase/cli
</code></pre>
<h2 id="搭建云环境">搭建云环境</h2>
<ol>
<li>首先在打开云开发并新建环境</li>
<li>创建完成后会自动进入环境初始化阶段，这个阶段大概持续 2~3 分钟。</li>
</ol>
<h2 id="初始化项目">初始化项目</h2>
<p>当环境初始化完成后我们就可以进行初始化项目啦~</p>
<ol>
<li>使用 CLI 工具初始化一个云开发项目 <code>$ tcb init</code></li>
</ol>
<pre><code class="language-javascript">tcb init
? 选择关联环境 xxx -
? 请输入项目名称 nextSSR
? 选择模板语言 Node
? 选择云开发模板 Hello World
✔ 创建项目 cloudbase-next 成功！
</code></pre>
<p>初始化结束后的项目目录如下：</p>
<pre><code class="language-javascript">nextSSR
└─.
│.editorconfig
│.gitignorev1
│a.txt
│cloudbaserc.js
│README.md
│
└─functions
└─app
index.js
</code></pre>
<p>然后我们进入到项目中</p>
<pre><code>$ cd nextSSR
</code></pre>
<p>在 functions 文件夹下创建 next.js 应用：<code>$ npm init next-app functions/next</code></p>
<p>等待初始化 next.js 项目...</p>
<p>初始化完成后在 functions 文件夹下会多出一个 next 的文件夹，这个便是我们的 next 应用</p>
<h2 id="配置-next">配置 next</h2>
<ol>
<li>首先我们进入到 next 项目的根目录 <code>$ cd functions/next</code></li>
<li>然后安装 severless-http <code>$ npm install --save serverless-http</code></li>
<li>在 next 应用的根目录下 <code>项目根目录/functions/next应用根目录</code> 新建 <code>index.js</code>，并将下列代码添加进去</li>
</ol>
<pre><code class="language-javascript"> // index.js
const next = require('next')
const serverless = require('serverless-http')
const app = next({ dev: false })
const handle = app.getRequestHandler()
exports.main = async function(...args) {
await app.prepare()
return serverless((req, res) => {
handle(req, res)
})(...args)
}// next.config.js
module.exports = {
assetPrefix: '/next'
}
</code></pre>
<p>在 next 应用的根目录 (/function/next/<strong>next.config.js</strong>) 中新建 <code>next.config.js</code> 并将下列代码拷入</p>
<pre><code class="language-javascript">// next.config.js
module.exports = {
assetPrefix: '/next'
}
</code></pre>
<p>这样我们的项目就配置差不多了。</p>
<h2 id="项目的构建与发布">项目的构建与发布</h2>
<ul>
<li>首先我们进入到 <code>functions/next</code> 目录中</li>
</ul>
<p>执行 <code>$ npm run build</code></p>
<ul>
<li>然后回到项目根目录中，运行 cli 命令将代码上传到云函数</li>
</ul>
<pre><code>$ tcb functions:deploy next
</code></pre>
<ul>
<li>然后我们创建一个 http 服务</li>
</ul>
<pre><code>$ cloudbase service:create -f next -p /next
</code></pre>
<blockquote>
<p>-f 表示 HTTP Service 路径绑定的云函数名称 \ -p 表示 Service Path，必须以 <code>/</code> 开头</p>
</blockquote>
<pre><code class="language-javascript">$ cloudbase service:create -f next -p /next
✔ 云函数 HTTP service 创建成功！
</code></pre>
<h2 id="我们上传到了哪里了呢">我们上传到了哪里了呢？</h2>
<p>我们进入到云开发管理页面</p>
<p><img src="https://img2020.cnblogs.com/other/1718416/202007/1718416-20200702185510042-1756269967.jpg"></p>
<p>我们看到在云函数的函数代码中可以找到我们刚才上传的文件</p>
<p>我们点击预览即可浏览页面啦~</p>
<p>在函数配置可以通过触发云函数来进行浏览我们的页面</p>
<p><img src="https://img2020.cnblogs.com/other/1718416/202007/1718416-20200702185510329-1809823576.jpg"></p>
<p><img src="https://img2020.cnblogs.com/other/1718416/202007/1718416-20200702185510596-1029130894.jpg"></p>
<h2 id="对比">对比</h2>
<p>我们通过对比查看</p>
<ul>
<li>通过 SSR 渲染的页面加载速度</li>
</ul>
<p><img src="https://img2020.cnblogs.com/other/1718416/202007/1718416-20200702185510985-450423848.jpg"></p>
<ul>
<li>非 SSR 的加载速度</li>
</ul>
<p><img src="https://img2020.cnblogs.com/other/1718416/202007/1718416-20200702185511154-869370173.jpg"></p>
<p>可以看到有明显的速度提升啦~</p>
<h2 id="one-more-thing">One More Thing</h2>
<p>3 秒你能做什么？喝一口水，看一封邮件，还是 —— 部署一个完整的 Serverless 应用？</p>
<blockquote>
<p>复制链接至 PC 浏览器访问：https://serverless.cloud.tencent.com/deploy/express</p>
</blockquote>
<p>3 秒极速部署，立即体验史上最快的 ServerlessHTTP 实战开发！</p>
<blockquote>
<p><strong>传送门：</strong></p>
<ul>
<li>GitHub: github.com/serverless</li>
<li>官网：serverless.com</li>
</ul>
</blockquote>
<p>欢迎访问：Serverless 中文网，您可以在 最佳实践 里体验更多关于 Serverless 应用的开发！</p>
<hr>
<blockquote>
<p>推荐阅读：《Serverless 架构：从原理、设计到项目实战》</p>
</blockquote><br><br>
来源：https://www.cnblogs.com/serverlesscloud/p/13226461.html
頁:
[1]