本文介绍如何将 Next.js 应用部署到函数计算。与传统的部署方法相比,您可以跳过购买机器等步骤,将传统的 Next.js 应用一键部署至远端直接用于生产,并且拥有弹性伸缩、按量付费和免运维等特性。

背景信息

Next.js是一种 React 的服务端渲染框架,集成度极高,框架自身集成了 webpack、babel、express 等,使得开发者仅依赖 Next、react、react-dom 就可以非常方便地构建自己的 SSR React 应用,开发者甚至都不用关心路由。Next.js 的高度集成性,易于实现代码分割、路由跳转、热更新以及服务端渲染和前端渲染。

步骤一:准备环境

您无需安装 Docker,仅安装 Funcraft 即可,最简单的方式即直接下载可执行的二进制文件。

  1. 安装 Funcraft 到本机。详情请参见安装 Funcraft
  2. 执行 fun --version 检查安装是否成功。

步骤二:迁移应用

  1. 执行以下命令创建一个 Next.js 项目。若已有 Next.js 项目则跳过该步骤。
    npm init next-app                    
  2. 执行以下命令进入刚刚创建的示例项目或已存在的项目。
    cd nextjs
  3. 执行以下命令运行本地项目。
    npm run dev           
    效果如下。pre-view
  4. 执行以下命令编译 Next.js 项目。
    npm run build            
  5. 执行 fun deploy -y 命令将项目部署至函数计算。

    Funcraft 会自动进入部署流程。

    在部署过程中,根据提示进行相应的操作。

    1. 当 Funcraft 检测到这不是一个 Funcraft 项目,会提示协助创建。直接按回车键或者输入 Y
      create_project
    2. Funcraft 项目自动创建成功,提示是否进行部署。直接按回车键或者输入 Y 进行确认。
      confirm_deploy
      Funcraft 会将应用部署到线上。deploy_success

      部署成功后,您可以在日志中看到函数计算为您生成的临时域名,通过这个临时域名您可直接访问刚部署的应用。

      说明 临时域名仅用作演示以及开发,具有时效性。如需用作生产,请绑定已经在阿里云备案的域名,详情请参见 绑定自定义域名