AWS 上 NextJS、NodeJS 和 MongoDB 的超快预览环境

2025-05-26

AWS 上 NextJS、NodeJS 和 MongoDB 的超快预览环境

介绍

您是否曾梦想过轻松便捷地在云上部署应用程序？想象一下，您只需使用 AWS 凭证登录，平台就会自动为您完成所有繁琐的云配置工作，此外，它还提供一些其他平台所不具备的额外功能。

Qovery 就是这样的平台——它不仅允许您在自己的云帐户上部署基础设施和应用程序，而且还提供额外的酷炫功能，其中之一我们将在本文中看到。

不要把我们的话视为理所当然——来自 100 多个国家的 14000 名开发人员使用 Qovery 在 AWS 上部署他们的应用程序。

预览环境

想象一下，您正在开发一个新功能。您正在处理一个全栈应用程序——它有前端、后端和数据库。您对后端应用程序进行了一项更改——您如何测试它呢？如果有一项服务可以为您部署所有内容，让您能够快速且独立地测试所有更改，那就太好了……

Qovery 预览环境就是为了帮助您实现这一点而设计的。

它不仅部署您更改的应用程序，还在云中部署所有其他相关应用程序和数据库，以便您可以测试新功能并与代码审阅者合作。

图片描述

预览环境功能也适用于其他平台。Vercel 和 Netlify 允许您在将代码合并到生产环境之前测试更改。它非常适合单个前端应用程序，但 Qovery 上的预览环境概念远不止于此。

Qovery 不仅能够为您的前端创建预览环境，还能为后端和数据库创建预览环境——支持整个堆栈。运行一组后端微服务？不用担心，Qovery 可以满足您的需求。所有服务都将在新环境中复制。

预览环境优势

  • 节省时间- 您无需设置新环境来单独测试更改 - Qovery 为您完成所有工作
  • 生产力——更快的变更、更快的审查、更好的反馈循环——应用程序的生产力和质量显著提高
  • 更好的测试- 最好单独测试应用程序，但如果您必须手动准备测试环境，那么在复杂的堆栈中几乎不可能实现 - Qovery 可以“自动”为您完成所有工作
  • 独立性——每个环境都是完全独立的，这意味着更多的人可以完美地开展项目，并行测试他们引入的更改，而不会互相阻碍
  • 快速交付——更快的反馈循环、独立开发人员、更少的错误，意味着产品交付更快
  • 减少摩擦- 等待其他人测试您的更改令人沮丧 - 有了预览环境，每个人都有自己的测试环境

演示

AWS 基础设施

在开始部署之前，我们需要准备好并部署 AWS 基础设施。只需向你的云账户提供凭证即可轻松完成。你可以在本文中了解如何配置凭证 - https://hub.qovery.com/docs/using-qovery/configuration/cloud-service-provider/amazon-web-services/

图片描述

初始设置大约需要 15 分钟，然后您的集群就可以托管您的应用程序了。

全栈应用程序

在此示例中，我们将使用 Next.js 前端、Node.js 后端和 MongoDB 作为数据库。该应用将显示一个图片库，其中包含从后端获取的图片。预览环境功能将帮助我们在后端引入一项新的更改——从硬编码的 POC 图片列表转换为从数据库获取的列表。

前端

我们的简单图片库将如下所示

图片描述

为了生成应用程序，我们使用了npx create-next-app@latest，但源代码可以在这里找到 - https://github.com/pjeziorowski/gallery-demo/tree/master/frontend

生成的应用程序脚手架的主要变化是：

  • 添加Dockerfile
FROM node:alpine

RUN mkdir -p /usr/src
WORKDIR /usr/src

COPY . /usr/src
RUN npm install
RUN npm run build

EXPOSE 3000
CMD npm run start
Enter fullscreen mode Exit fullscreen mode

  • 向我们的后端添加一个查询（我们将在接下来的步骤中很快构建），该查询获取要在我们的图库中显示的图像列表

    function useImages() {
  return useQuery("images", async () => {
    const { data } = await axios.get(
      `${apiRoot}/api/v1/images`
    );
    return data;
  });
}

  • 此外，我们还调整了 HTML 和样式，以便演示显示图像列表

后端

我们的后端是本次演示的主角。在第一个版本中，后端显示的是硬编码的图片列表。下一步，我们将逐步扩展其功能。它将连接到数据库并从 MongoDB 获取列表。为了确保更改正确无误，我们将Preview Environment在将拉取请求合并到生产环境之前使用此功能。

后端是使用 Express 生成的npx express-generator --no-view，源代码可以在这里找到 - https://github.com/pjeziorowski/gallery-demo/tree/master/backend

我们对生成的应用程序脚手架引入的更改如下：

  • 添加 Dockerfile

    FROM node:16

WORKDIR /usr/src/app

COPY package*.json ./
RUN npm install
COPY . .

EXPOSE 8080
CMD [ "node", "src/index.js" ]

  • 创建/api/v1/images返回硬编码图像数组的端点

    router.get('/images', (req, res) => {
    res.json([
      {
        title: 'IMG_4985.HEIC',
        size: '3.9 MB',
        source:
            'https://images.unsplash.com/photo-1582053433976-25c00369fc93?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=512&q=80',
      }
  });
});

    下一步我们将改进该功能以使用 Mongo 数据库。

部署

创建新项目后，我们现在来设置我们的production环境。

首先，让我们部署前端。点击Add my first application，选择正确的仓库，Docker构建模式为 ，并公开端口3000。应用程序根路径为/frontend。

下一步：添加MongoDB数据库——稍后我们的后端会用到它。您可以通过点击Add“环境”页面中 Qovery 控制台中的按钮来添加数据库。

现在让我们部署后端。点击Add→ Application，选择/backend应用程序根路径、8080端口和Docker构建模式。

为了将来与 DB 的连接，让我们DATABASE_URL在后端设置中添加一个名为指向 Mongo 数据库内部 URL 的别名Environment Variable：

图片描述

此外，让我们API_ROOT在前端应用程序中创建一个名为的别名，指向后端的外部 URL：

图片描述

就这样！现在我们可以部署生产环境了。几分钟后，导航到前端应用，点击Open- 你应该会被重定向到图片库

图片描述

启用预览环境

要查看预览环境功能的实际效果，下一步是为我们的后端应用程序启用它。

为此，请导航至Environment→ Settings→Preview Env并为后端应用程序勾选它

图片描述

太棒了！该功能已启用。为了查看实际效果，让我们在后端应用中编辑代码，改为从数据库获取图像列表。

测试预览环境

让我们对后端进行一些小更新——连接到 MongoDB 并从那里获取图像。为了实现这一点，我们可以对函数进行以下修改：

const databaseUrl = process.env.DATABASE_URL
    || 'mongodb://localhost:27017/test';

const imageSchema = new mongoose.Schema({
  title: String,
  size: String,
  source: String
});

mongoose.connect(databaseUrl);

router.get('/', (req, res) => {
  imageSchema.find().then((data) => {
    res.json(
      data
    )
  });
});
Enter fullscreen mode Exit fullscreen mode

现在，让我们在代码库中创建一个新分支，并向生产环境（主分支）发起拉取请求。预览环境功能将为我们创建一个新环境，以便我们安全地测试刚刚引入的更改！

图片描述

现在，当我们在项目中显示环境时，我们将看到正在部署用于拉取请求的新环境：

图片描述

我们需要的所有资源都齐全了！数据库、后端、前端——现在我们可以在完全脱离生产环境的情况下测试变更，无需任何手动设置：

图片描述

预览环境说明

预览环境功能可按应用启用或禁用。它会创建环境的完整副本，以便您可以单独测试拉取请求中的新更改。拉取请求打开后，它会将您的数据库、后端和前端应用程序部署到一个全新的环境中。如果您更新拉取请求，所有新更改也会反映在新环境中，以便您在审核期间测试它们或修复问题。更棒的是，Qovery 还会为您管理所有环境变量，创建新的别名，就像您在生产环境中所做的那样，这样所有内容都可以真正单独测试，并且所有操作都会自动进行。拉取请求合并后，Qovery 会自动清理预览环境，以节省您的成本。

测试预览环境 PT II

几分钟后，您的预览环境应该就可以启动并运行了。现在您可以导航到前端应用程序并点击Open图片库中的 - ，您将看到一个空列表，因为数据库中还没有任何图片。

您可以通过 CLI 连接到 mongo 实例来手动添加一些镜像。凭证可以在数据库概览中找到：

图片描述

连接后，我们通过执行以下操作来添加图像：

db.createCollection("images")

db.images.insert([
       {
         title: 'IMG_4985.HEIC',
         size: '3.9 MB',
         source:
             'https://images.unsplash.com/photo-1582053433976-25c00369fc93?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=512&q=80',
       },
       {
         title: 'IMG_4985.HEIC',
         size: '3.9 MB',
         source:
             'https://images.unsplash.com/photo-1582053433976-25c00369fc93?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=512&q=80',
       },
       {
         title: 'IMG_4985.HEIC',
         size: '3.9 MB',
         source:
             'https://images.unsplash.com/photo-1582053433976-25c00369fc93?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=512&q=80',
       }
     ])
Enter fullscreen mode Exit fullscreen mode

现在，在预览环境中打开前端应用程序后，我们将看到放入数据库中的所有图像！看起来该功能运行良好，所以让我们合并 PR：

图片描述

现在发生的情况是，PR 合并后，预览环境会自动清理：

图片描述

太棒了！得益于 Qovery 预览环境，我们能够在完全脱离生产环境的情况下开发新功能，并在部署于云端的真实环境中进行测试，而且我们完全无需花费任何时间准备测试环境。

结论

在本文中，我们快速完成了一个包含前端、后端和数据库的全栈应用程序的创建过程。我们启用了预览环境功能，以便更快地开发新功能。我们了解了预览环境的优势、如何使用它以及如何将其集成到日常开发工作流程中。

文章来源：https://dev.to/pjeziorowski/blazingly-fast-preview-environments-for-nextjs-nodejs-and-mongodb-on-aws-o1k
Devto 翻译
PREV
React、反应式微服务、Kubernetes、GraphQL 和 gRPC - Appwish 发布 - 全栈教程系列和开源项目
NEXT
Windows 11，但适用于 Web Windows 11 Web