托管 Next.js 应用
Next.js 是一款 React 框架,支持服务端渲染(SSR),本文将介绍如何将 Next.js 应用托管至云开发。
#
第 1 步:初始化项目使用 CLI 工具初始化一个云开发项目
cloudbase init
语言选择 Node
,模板选择 Hello World
cloudbase init? 选择关联环境 xxx - [xxx-xxx]? 请输入项目名称 cloudbase-next? 选择模板语言 Node? 选择云开发模板 Hello World✔ 创建项目 cloudbase-next 成功!
进入项目根目录:
cd cloudbase-next
然后创建一个 next 应用到 functions/next
内:
npm init next-app functions/next
#
第 2 步:配置项目我们接下来对 next 项目进行一些改造,让它满足云函数内部署的要求。
进入 next 根目录
cd functions/next
安装 serverless-http
npm install --save serverless-http
然后把以下文件添加至 functions/next/index.js
// index.jsconst 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);};
以下文件添加至 functions/next/next.config.js
:
// next.config.jsmodule.exports = { assetPrefix: "/next"};
#
第 3 步:构建与发布我们在 functions/next
目录下,运行
npm run build
然后回到项目根目录,运行
cloudbase fn deploy next
发布时,使用默认配置即可
cloudbase fn deploy next? 未找到函数发布配置,使用默认配置? Yes✔ [next] 函数部署成功!
然后我们建立一条 HTTP 服务路由:
cloudbase service create -f next -p next
随后我们便可以通过 URL 访问 Next.js 应用。
cloudbase service create -f next -p next✔ 云函数 HTTP service 创建成功!https://${env-id}.service.tcloudbase.com/next