Logo

菜单

发布于 2026-01-06 2 阅读
0

构建带有预览环境的 Slack 克隆版

构建带有预览环境的 Slack 克隆版

太长不看

在本教程中，我们将构建一个类似 Slack 的全栈应用程序，其中包含多个运行的服务。我们还将为每个分支中的每次提交设置预览环境，其中包含所有正在运行的服务。（剧透预警——如果您更喜欢直接查看代码，可以在此仓库中查看最终产品）。

为此，我们将结合使用supabase和Next.js。我们还将使用名为Preevy 的工具来为我们的项目配置预览环境。

入门

在后端方面，我们将使用 Supabase，这是一个开源项目，旨在替代 Google 的 Firebase—— 一个用于数据库、实时通信、身份验证等的平台。

在前端方面，我们将使用一个简单的 Next.js 应用——一个 Slack 克隆版，取自 Supabase 的一个示例—— 这是我们将要使用的仓库的链接。

虽然此应用程序有很多后端服务和前端服务器，但我们将展示如何轻松设置预览环境，该环境会在每个分支的每次提交时自动构建和部署。

为了实现这一目标，我们将使用 Preevy，这是一款开源工具，能够以最少的配置来部署预览环境。Preevy 将使用云提供商（在本例中为价格低廉的AWS Lightsail虚拟机）构建和部署我们的应用程序，同时通过公开的、可共享的 URL 暴露这些服务，以便团队协作。

一个小小的请求🤗

我正在努力让Preevy获得 1000 个星标。您能帮我给这个项目点个星标吗？这有助于更多开发者发现Preevy，也能帮助我们持续为社区创作有趣的内容。谢谢！

为什么这很有趣

预览环境在快节奏的开发工作流程中发挥着变革性的作用。它允许团队在审核阶段查看应用程序的实际运行版本，然后再部署到预发布环境或生产环境。

预览环境（也称为“部署预览”或“临时环境”）使团队中的每个利益相关者都能在 PR 时查看和协作处理代码更改，从而加快产品开发速度。

由于 Supabase 支持本地开发，我们可以利用它构建一个完全独立的开发环境——这意味着我们可以仅基于源代码轻松构建包含所有依赖项的应用程序。应用程序无需任何外部服务即可运行。

因此，本项目是一个很好的例子，展示了如何使用一些优秀的开源工具构建多服务应用程序，并体验预览环境如何影响您的工作流程和整体开发体验。

如何建造它

1. 创建docker-compose.yaml

首先，我们将创建一个docker-compose.yaml包含所有 Supabase 服务的文件。我们的 Compose 文件基于Supabase 自身的 Compose 文件。除了 Compose 文件docker-compose.yaml本身，我们还需要一些配置和 SQL 文件来初始化服务和数据库。这些文件基本上是从 Supabase 的代码库中复制的，所以我们不再赘述。

Dockerfile2.为 Next.js 应用程序创建一个应用程序

我们需要将 Slack 克隆应用程序添加到 compose 文件中。为此，我们需要为其创建一个 Docker 文件。

以下是其内容

FROM node:18-alpine AS base

FROM base AS deps
RUN apk add --no-cache libc6-compat
WORKDIR /app

COPY yarn.lock ./
RUN yarn --frozen-lockfile


FROM base AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .
ARG NEXT_PUBLIC_SUPABASE_URL
ARG NEXT_PUBLIC_SUPABASE_KEY

RUN yarn build

FROM base AS runner
WORKDIR /app

ENV NODE_ENV production

RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs

COPY --from=builder /app/public ./public

COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static

USER nextjs

EXPOSE 1988

ENV PORT 1988

CMD ["node", "server.js"]
Enter fullscreen mode Exit fullscreen mode

请注意，我们传递了 ` NEXT_PUBLIC_SUPABASE_URLand`NEXT_PUBLIC_SUPABASE_KEY参数，以便它们在应用程序的构建中用作环境变量，从而允许从我们的前端应用程序连接到 supabase 服务。

3. 将应用程序的架构添加到组合服务卷中

Slack 应用需要数据库中存在特定的模式，例如频道表和消息表。我们需要在启动应用时将该模式加载到数据库中。示例仓库中的 SQL 文件就是该模式文件。

为此，我们将full-schema.sql文件添加到./docker/volumes/db文件夹中，并将其添加到 composes 的数据库服务卷中，如下所示：

  db:
    # Removed the rest of the configurations for clarity
    volumes:
      # add the following line after the rest of the volumes: 
      - ./volumes/db/full-schema.sql:/docker-entrypoint-initdb.d/init-scripts/100-full-schema.sql:Z
Enter fullscreen mode Exit fullscreen mode

4. 将预览环境服务的 URL 注入到环境变量中

为了使各项服务能够相互通信，它们需要彼此的地址。在supabase 代码库的./docker/.env.example原始文件中，由于假定环境运行在开发者的私有机器上，因此使用 URL 来连接不同的服务。而在我们的案例中，环境将运行在预览环境中，并使用公共互联网 URL。localhost

为了获取 URL，Preevy 使用特殊的构建时环境变量公开面向公众的 URI，如文档中所述。

我们可以利用 bash 的参数替换功能，使我们的环境变量同时支持 Preevy URL 和本地开发。

例如，SITE_URL与其使用本地 URL 定义变量，不如直接定义变量。

SITE_URL=http://localhost:3000
Enter fullscreen mode Exit fullscreen mode

我们将定义

SITE_URL=${PREEVY_BASE_URI_STUDIO_3000:-http://localhost:3000}
Enter fullscreen mode Exit fullscreen mode

http://localhost:3000如果该值为空，我们将设置该值，这意味着我们将在 Preevy 之外运行。您可以在此示例的仓库中PREEVY_BASE_URI_STUDIO_3000查看修改后的文件 -在这里。./docker/.env.example

5. 使用 Preevy 在本地计算机上部署环境

要从本地计算机创建预览环境，请继续阅读本节。您也可以跳过此步骤，直接按照下一节所述，将其配置为在 CI 环境中运行。

第一步是确保已按照文档中的详细说明Preevy进行安装和配置。

完成上述步骤后，请执行以下操作：

  1. 克隆此仓库https://github.com/livecycle/supabase-nexjs-preevy-example
  2. 在docker目录下运行cp .env.example .env
  3. 在docker目录下运行preevy up

就这样！

6. 创建 GitHub 操作工作流，即可在每次更新时自动部署

Preevy 提供了一个便捷的 GitHub 操作——livecycle/preevy-up-action，如其文档所述，以下是一个使用示例：

name: Deploy Preevy environment
on:
  pull_request:
    types:
      - opened
      - synchronize
permissions:
  id-token: write
  contents: read
  pull-requests: write
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: aws-actions/configure-aws-credentials@v2
        with:
          role-to-assume: arn:aws:iam::12345678:role/my-role
          aws-region: eu-west-1
      - uses: actions/checkout@v3
      - uses: livecycle/preevy-up-action@latest
        id: preevy
        with:
          profile-url: "s3://preevy-12345678-my-profile?region=eu-west-1"
          docker-compose-yaml-path: "./docker/docker-compose.yaml"
      - uses: mshick/add-pr-comment@v2
        with:
          message: ${{ steps.preevy.outputs.urls-markdown }}
Enter fullscreen mode Exit fullscreen mode

概括

总而言之，使用像supabase、Next.js和Preevy这样的开源工具和框架，可以有效地组合成可扩展的全栈应用程序和更高效的开发工作流程。

通过按照提供的步骤并利用Docker Compose，开发人员可以轻松设置预览环境，这些环境会在每次提交时自动构建和部署，从而促进高效的代码审查和协作。

借助预览环境，利益相关者可以实时查看应用程序的运行版本，开发人员可以从中获得更清晰的反馈、更快的开发周期和更好的开发体验。

文章来源：https://dev.to/livecycle/building-a-slack-clone-with-preview-environments-2dh6
学习 React 之前需要了解什么？
学习 ES6/JavaScript...