如何部署 Next.js 应用程序

How to Deploy a Next.js Application_
How to Deploy a Next.js Application_

部署 Next.js 应用程序涉及在互联网上创建 Next.js 网络应用程序，供世界各地的用户与之交互。

虽然有多种部署方案可供选择，但 Back4app 的容器即服务（CaaS）平台具有多项优势。这些优势使其成为任何希望通过简单步骤部署网络应用程序的开发人员的不二之选。

在本文中，您将构建一个 Next.js 应用程序，并学习如何使用 Back4app 的容器化服务托管和部署该应用程序。

主要收获

  • 您将学习如何利用容器即服务云模式快速高效地部署 Next.js 网络应用程序。
  • 您将发现 Next.js 的优势，如服务器端渲染、自动代码分割、内置路由和静态网站生成，从而增强用户体验。
  • 您将了解 Next.js 的潜在局限性，如学习曲线、有限的生态系统、服务器端渲染的复杂性和有限的路由灵活性。

什么是 Next.js？

Next.js 是在 React 库基础上扩展的开源框架，用于生成网络应用程序。利用 Next.js，您可以方便地构建服务器端渲染（SSR）和静态生成的 React 应用程序，这些应用程序的性能都能满足您的需求。

它由Vercel（前身为 Zeit）于 2016 年创建。近年来，Next.js 凭借其易用性和强大功能大受欢迎。

Next.js 的优势

Next.js 具有多项优势，是网络开发的热门选择。这些优势包括

服务器端渲染

Next.js 框架为其网络应用程序启用了服务器端渲染（Server-Side Rendering）功能。服务器端渲染允许页面在以 HTML 格式发送到客户端之前在服务器上进行预渲染。它能提供更好的搜索引擎优化（SEO）。

使用服务器端渲染时，网页会先在服务器上进行渲染，然后再发送到客户端，从而延长了网页的加载时间。这对使用较慢连接或设备的用户尤其有利。

此外，服务器端渲染还能在渲染页面前轻松从应用程序接口或数据库获取数据。

自动代码分割

代码拆分是指将 JavaScript 应用程序及其所有构建代码拆分成较小块的技术。Next.js 可根据页面路径自动拆分代码。

Next.js 的自动代码分割功能可加快初始页面加载速度。它还减少了发送到客户端的 JavaScript 数量，从而提高了性能和用户体验。

内置路由

Next.js 的内置路由系统是该框架的一大优势。有了内置路由系统，定义路由和在页面间导航就变得非常容易。Next.js 支持客户端和服务器端路由。

该路由系统支持动态路由，可提高开发人员的工作效率，改善应用程序性能，并提供流畅高效的用户体验。

应用程序接口路线

Next.js 应用程序自带默认 API 路由，允许开发人员直接在应用程序中创建无服务器 API 端点。API 路由是 Next.js 的一项强大功能，为构建网络应用程序提供了多项优势。

这些优势包括允许开发人员创建无服务器功能、定义和组织 API 端点，以及在服务器端渲染过程中获取数据。路由无需单独的后端服务器。它们还支持 REST 和 GraphQL API。

Next.js 使用 API 路由来有效处理 API 请求，从而轻松构建可扩展、高性能和搜索引擎友好的应用程序。

静态网站生成

静态网站生成是 Next.js 框架的一个关键优势。Next.js 使用静态网站生成功能在构建时预先渲染页面，并将其作为静态文件提供。通过将每个页面预渲染为 HTML 文件，该功能可确保快速的页面加载时间。

静态网站对搜索引擎优化非常友好，而且减少了攻击载体，因此更加安全。Next.js 生成的静态网站具有内在的可扩展性，因为它们可以处理高流量负载，而不会对服务器基础设施造成压力。

Next.js 可为静态网站提供离线支持，因此用户可以在没有互联网连接的情况下继续浏览和访问以前访问过的页面。

Next.js 的局限性

虽然 Next.js 是用于构建服务器端呈现 React 应用程序的强大而流行的框架，但您应该注意以下一些限制：

学习曲线

Next.js 引入了传统 React 开发中不熟悉的其他概念和约定。转而使用 Next.js 构建可能需要时间来理解和适应其特定的架构和功能。

Next.js 提供一系列配置选项，可根据项目要求进行定制。有了这些工具、库和插件选项，您必须花些时间熟悉 Next.js 生态系统。

有限生态系统

与 React 和 Angular 等成熟的框架/库相比，Next.js 是一个相对较新的框架。因此，它的生态系统仍处于成长和萌芽阶段。它不像更成熟的框架那样拥有广泛的库和插件。

您可能需要依赖社区支持的软件包，或为特定需求定制解决方案。

服务器端渲染复杂性

虽然服务器端渲染是 Next.js 的一项强大功能，但它也会给开发过程带来复杂性。

它通常需要更多的时间来学习和实施。使用服务器端渲染可能会导致服务器渲染错误或服务器与客户端渲染不一致。

在实现这种呈现方式时最好小心谨慎。您必须能够有效地管理数据获取和应用程序状态，因为服务器和客户端需要同步它们的状态。

路由灵活性有限

Next.js 有一个内置路由系统，采用基于文件的路由方法。其目的是在许多情况下简化路由。不过，它可能无法提供与更高级路由库相同的灵活性。

定制默认约定之外的路由行为可能需要额外的变通方法，而这些变通方法并不总是很方便。

Next.js 部署选项

Next.js 应用程序有多种部署选项，包括容器即服务（CaaS）和基础设施即服务（IaaS）。

您应该了解这些选项是什么、如何工作以及它们之间如何相互比较，以便最适合您构建的 Next.js 应用程序。

基础设施即服务（IaaS）

IaaS 是一种通过互联网提供虚拟化计算资源的云计算模式。使用 IaaS 时，开发人员可以在云提供商托管的虚拟机（VM）上部署和管理应用程序。

在 IaaS 平台上部署 Next.js 应用程序具有各种优势，包括控制性和灵活性。IaaS 平台还具有成本效益，因为它们遵循 “即用即付 “计划。这意味着您需要根据应用程序最终使用的资源来付费。

可用于部署 Next.js 应用程序的常用 IaaS 平台包括

  • Amazon Web Services (AWS) EC2
  • Google Cloud Platform (GCP) Compute Engine
  • Microsoft Azure Virtual Machines
  • DigitalOcean

容器即服务（CaaS）

CaaS是一种云计算模式，类似于IaaS 平台。不过，除了提供计算资源，它们还为部署和管理容器化应用程序提供了一个完全可管理的环境。

这意味着在处理应用程序的运行时，几乎不需要进行配置和工作。这也意味着对定制的控制非常少。

在以容器形式部署 Next.js 应用程序时，应用程序代码、运行时和依赖项会被捆绑到一个容器映像中。然后就可以在 CaaS 平台上部署和运行该映像。

您可以在以下一些流行的 CaaS 平台上部署 Next.js 应用程序：

  • Back4App
  • AWS Elastic Container Service (ECS)
  • Google Kubernetes Engine (GKE)
  • Azure Container Service (AKS)

CaaS 平台可简化部署。它们还能提高应用程序的可扩展性、可移植性和安全性。它抽象了基础设施管理，并提供内置的协调和扩展功能。

在 Back4App 上构建和部署 Next.js 应用程序

在本节中，我们将讨论如何使用 Next.js 框架构建网络应用程序，并使用 Back4app 容器服务将应用程序部署到 Back4app 平台。

您将学会如何浏览平台和使用容器服务，以便通过 Back4app 服务器访问您的网络应用程序。阅读本节后，您将学会如何部署 Next.js 应用程序。

什么是 Back4app Containers？

Back4app CaaS 平台是一个为您提供基于云的服务模式的平台，允许您管理和部署容器以及这些容器中的应用程序。

Back4App 容器是 Back4App 平台的一项强大功能，可为您提供灵活、可扩展和安全的应用程序运行环境。

这些容器支持多种编程语言，如 PHP、Python、Node.js 等。一些开发人员认为这是一个很好的免费Next.js 托管平台。

Back4app 的容器可以自动扩展，以满足您的需求。每个容器都与其他容器隔离，确保应用程序的数据得到保护。容器可与 Back4App 生态系统轻松集成。

这样，您就可以轻松地将容器连接到其他 Back4App 服务，如数据库和云功能。

项目介绍

在本教程中，您将使用 Next.js 构建一个基本应用程序。该应用程序将使用获取 API 从外部 API 获取随机建议。然后，应用程序将在您要构建的网络应用程序界面上显示建议。

您可以跳过构建 Next.js 应用程序，直接在 Back4app 上部署应用程序。在此GitHub代码库中查找应用程序的最终源代码。

先决条件

要跟上本教程并在 Back4app 上部署 Next.js 应用程序，您需要满足以下前提条件。

确保您拥有

编码你的 Next.js 应用程序

要为 Next.js 应用程序创建脚手架，请在 node.js 终端运行以下命令：

npx create-next-app@latest

运行上述命令后，终端会显示一系列提示。这些提示用于配置 Next.js 应用程序。

提示将与此终端截图类似。

next.js 命令行提示截图

Next.js 将配置您的应用程序，使其与提示答案相匹配。在此应用程序中不需要 App Router 和 Tailwind CSS。请为这些选项选择 “否“。

创建应用程序后，开始构建界面。

首先，在globals.css文件中添加以下全局样式：

/* globals.css */
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body{
  background-color: #151E3D;
  color: #8BACD9;
  inline-size: 60%;
  margin: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button{
  padding: 0.7rem 1rem;
  border-radius: 12px;
  background-color: aqua;
  color: #8BACD9;
  border: none;
}

button:hover{
  background-color: #151E3D;
  color: #8BACD9;
}

你可以在src目录的styles文件夹中找到globals.css文件。添加全局样式后，要将其应用到应用程序中，请将globals.css文件导入页面目录下的_app.tsx文件。

在_app.tsx文件中导入globals.css文件之前，首先需要创建一个布局组件来定义应用程序的布局。

为此，请在src目录中创建一个组件文件夹，并在该文件夹中创建一个Layout.tsx文件。在Layout.tsx文件中，写入以下代码：

// Layout.tsx
import React from "react";
import styles from "../styles/Home.module.css";
import { Comforter } from "next/font/google";

const comforter = Comforter({
  weight: ["400"],
  subsets: ["latin"],
});

function Layout(props: any) {
  return (
    <>
      <header className={styles.header}>
        <h1 className={comforter.className}>Advice Generator</h1>
      </header>
      {props.children}
    </>
  );
}

export default Layout;

上面的代码块定义了一个布局组件。在布局组件中，从Home.module.css文件导入样式，并从next/font/google模块导入Comforter函数。

使用Comforter函数，您可以配置comforter 字体，并通过将classNameprop 设置为comforter.className 将其应用于标题中的h1元素。

props.children表达式将在布局组件中呈现子组件。

您还应在Home.module.css文件中定义标题样式以及其他必要的样式。

例如

/* Home.module.css */
.header{
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.2rem;
  margin-block-start: 15%;
  margin-block-end: 1rem;
  opacity: 0.6;
}

.card{
  inline-size: 100%;
  margin: auto;
  border-radius: 12px;
  background-color: aqua;
  padding: 4rem 0;
  font-weight: bold;
  display: flex;
  flex-direction: column;
  gap: 3rem;
  align-items: center;
}

.card h3{
  color: #333333;
  text-transform: uppercase;
  letter-spacing: 0.2rem; 
}

@media (max-width: 768px) {

  .header{
    margin-block-start: 30%;
  }

  .card{
      font-size: 12px;
      padding: 2rem;
  }

}

现在，将global.css文件和布局组件导入_app.tsx文件，并将应用程序封装在布局组件中：

// _app.tsx
import Layout from "@/components/Layout";
import "@/styles/globals.css";
import type { AppProps } from "next/app";

export default function App({ Component, pageProps }: AppProps) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  );
}

您已经定义了应用程序的布局。接下来，您可以从应用程序接口获取建议，并将其显示在应用程序中。为此，您将使用页面目录中的index.tsx文件。

在index.tsx文件中，用以下代码覆盖现有代码：

// index.tsx
import React from "react";
import styles from "../styles/Home.module.css";
import { Montserrat } from "next/font/google";

const montserrat = Montserrat({ weight: ["100", "400"], subsets: ["latin"] });

export default function Home() {
  const [advice, setAdvice] = React.useState("");
  const [count, setCount] = React.useState(1);

  function handleClick() {
    setCount((prevState) => prevState + 1);
  }

  React.useEffect(() => {
    fetch("<https://api.adviceslip.com/advice>")
      .then((res) => res.json())
      .then((data) => setAdvice(data.slip.advice));
  }, [count]);

  return (
    <main>
      <div className={styles.card}>
        <h3 className={montserrat.className}>Advice No{count}</h3>
        <p className={montserrat.className}>{advice}</p>
        <button className={montserrat.className} onClick={handleClick}>
          generate
        </button>
      </div>
    </main>
  );
}

该代码块定义了主页。它导入了React库、用于样式设计的Home.module.css以及 Next.js 字体库中的 Google 字体Montserrat。

useEffect钩子是一个功能强大的工具，它允许您在 React 组件中执行侧效应。在此应用程序中，您使用useEffect钩子从 API 获取建议。然后将从 API 获取的建议设置为建议状态。

useEffect钩子最初会在组件渲染时运行，然后在计数状态的值发生变化时再次运行。这是因为您已将计数状态设置为依赖关系数组的值。

当您点击生成按钮时，handleClick函数将运行，并将计数状态递增 1。 这将导致useEffect钩子再次运行，从 API 获取新建议并更新建议状态。每次点击生成按钮，屏幕上就会显示一条新建议。

您的 Next.js 应用程序已完成！

要启动应用程序，请运行以下命令：

npm run dev

应用程序应在本地服务器http://localhost:3000 上运行。

完成建议生成界面

点击生成按钮将获取并显示一条新建议。它还会将 “建议编号 “每次递增 1。

带有生成按钮的建议生成器

将应用程序 Docker 化

在 Back4app 上部署 Next.js 应用程序之前，您必须对应用程序进行 Docker 化。Dockerize 应用程序会将应用程序及其依赖项打包到 Docker 容器中。

Docker 容器提供了一种轻量级、隔离和可移植的方式，让您的应用程序与所需的库和配置一起运行。

这使得将应用程序部署到任何安装了 Docker 的机器上变得非常容易。通过将应用程序 docker 化，可以简化部署、提高可移植性和可扩展性等。

下面是如何对 Next.js 应用程序进行 docker 化的分步指南：

步骤 1：在项目根目录下创建 Dockerfile
在 Next.js 项目的根目录下创建一个名为Dockerfile的新文件。该文件将包含 Docker 构建应用程序镜像的说明。

第 2 步：定义 Dockerfile
在Dockerfile 中输入以下代码：

FROM node:latest
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["npm", "run", "start"]


该 Dockerfile 有以下功能：

  • 从官方 Node.js 14 运行时开始。
  • 将工作目录设置为/app。
  • 将package.json和package-lock.json复制到 Docker 映像并安装依赖项。
  • 将应用程序代码的其余部分复制到 Docker 镜像中。
  • 构建 Next.js 应用程序。
  • 为应用程序公开 3000 端口。
  • 定义启动应用程序的命令。

这些规范描述了应用程序的运行环境。

第 3 步：构建 Docker 映像

在终端中运行以下命令来构建 Docker 镜像：

docker build -t advice-generator .

您可以将“advice-generator “替换为您想赋予 Docker 镜像的名称。

运行 Docker 容器

镜像构建完成后，可以使用以下命令将其作为容器运行：

docker run -p 3000:3000 advice-generator

该命令将 Docker 容器中的端口 3000 映射到机器上的端口 3000。

按照这些步骤将在 Docker 容器中运行 Next.js 应用程序。您可以在网络浏览器中导航至http://localhost:3000来访问它。

将 Next.js 应用程序推送到 GitHub

完成应用程序的 docker 化后，你需要将应用程序推送到 GitHub 仓库。要将应用程序推送到 GitHub 仓库，请在 GitHub 账户中新建一个仓库，然后在终端上的应用程序目录中运行以下命令：

git init
git add .
git remote add origin <your-repository-url> 
git commit -m 'initial commit'
git branch -M main
git push -u origin main
  • git init：该命令将在当前目录下初始化一个新的 Git 仓库。
  • git add：该命令会将当前目录下的所有文件添加到暂存区域。
  • git remote add origin: 该命令将本地仓库链接到远程仓库。将 替换为远程仓库的 URL。
  • git commit -m ‘initial commit’（初始提交）：该命令会将所有写入暂存区域的改动保存到一个新的提交中。
  • git branch -M main：这条命令会创建一个名为 main 的新分支，并切换到该分支。
  • git push -u origin main：该命令会将主分支中的提交推送到 origin 远程仓库。

将应用程序部署到 Back4app

要在 Back4app 上部署应用程序，您必须先创建一个 Back4app 帐户。为此，请按照以下步骤操作：

  1. 访问Back4app 网站。
  2. 点击 “注册 “按钮。
  3. 填写报名表并提交。

如果您已经建立了 Back4app 帐户，只需登录并进入下一步即可。

创建账户后，登录账户并点击“新应用程序”。

按钮。该按钮位于屏幕右上角。

您将看到与下图类似的屏幕。

back4app 应用程序选项


选择 “容器即服务“选项，使用容器构建和部署应用程序。构建过程不会太长。完成后，将 GitHub 账户链接到已构建的 CaaS 应用程序。

Back4pp CaaS 界面导入新的 GitHub 仓库


然后在 Back4app 应用程序中从链接的 GitHub 账户中选择要部署的版本库。

用于编辑 GitHub 仓库权限的 Back4app CaaS 界面


现在您已经选择了一个版本库，剩下的就是部署应用程序了。在此之前，您需要为应用程序命名并配置其部署。

用于创建和部署应用程序的 Back4app CaaS 界面


单击“创建应用程序 “按钮部署应用程序。

Back4app CaaS 界面可显示部署状态和成功部署情况


恭喜您，您已成功在 Back4app 上部署了应用程序。您可以通过上图中 Back4app 提供的链接访问网络上的应用程序。

结论

Next.js 是一个开源框架，用于构建服务器端渲染（SSR）的 React 应用程序。它还具有许多优势，包括静态网站生成、自动代码拆分、内置路由、API 路由等。这些优势使 Next.js 成为一个功能强大的框架。

使用 Back4pp 的 CaaS 部署 Next.js 应用程序可简化开发流程。Back4app CaaS 平台是部署 Next.js 应用程序的可扩展、安全且经济高效的解决方案。

它的用户友好界面、实时更新、GraphQL 和 REST API 支持、自动备份和无服务器环境使其成为开发人员的完美选择。

常见问题

什么是Next.js？

Next.js是一个流行的React框架，提供许多功能用于构建高性能且SEO友好的Web应用程序。Next.js提供的一些功能包括服务器端渲染、静态站点生成、自动代码拆分、API路由、内置CSS和Sass支持、TypeScript支持等。Vercel（前身为Zeit）创建并持续维护Next.js框架。

如何部署Next.js应用程序？

您可以使用Back4app部署Next.js应用程序。Back4app是一个强大的平台，提供可扩展和灵活的环境用于部署应用程序。
要在Back4app的CaaS平台上部署Next.js应用程序，请按照以下简单步骤操作：

1. 创建Next.js应用程序
2. Docker化应用程序
3. 将应用程序推送到GitHub仓库
4. 设置您的Back4app帐户
5. 在Back4app上创建应用程序
6. 将您的GitHub帐户链接到Back4app应用程序
7. 选择应用程序的仓库
8. 部署应用程序


Noble Okafor

Leave a reply

Your email address will not be published.