Создание клона Slack, включая среды предварительного просмотра, с использованием Next.js и Supabase

Создание клона Slack, включая среды предварительного просмотра, с использованием Next.js и Supabase

TL;DR

В этом руководстве мы собираемся создать полнофункциональное приложение, похожее на Slack, с несколькими запущенными службами. Мы также настроим среды предварительного просмотра для каждого коммита в каждой ветке со всеми работающими службами. (предупреждение о спойлере — если вы предпочитаете смотреть прямо на код, вы можете проверить готовый продукт в этом репозитории).

Для этого мы будем использовать комбинацию supabase + Next.js. Мы также будем использовать инструмент под названием Preevy для предоставления сред предварительного просмотра для нашего проекта.

Начиная

Что касается серверной части, мы собираемся использовать Supabase, проект OSS, разработанный как альтернатива Firebase Google — платформа для БД, связи в реальном времени, аутентификации и многого другого.

Что касается внешнего интерфейса, мы будем использовать простое приложение Next.js — клон Slack, взятый из одного из примеров Supabase — вот ссылка на репозиторий, который мы будем использовать.

Хотя это приложение имеет множество внутренних служб и внешний сервер, мы собираемся показать, как легко настроить среду предварительного просмотра, автоматически создаваемую и развертываемую при каждой фиксации в каждой ветке.

Для этого мы будем использовать Preevy, инструмент с открытым исходным кодом для подготовки сред предварительного просмотра с минимальной конфигурацией. Preevy создаст и развернет наше приложение с помощью облачного провайдера, в данном случае дешевых виртуальных машин AWS Lightsail, предоставляя услуги с общедоступным общим URL-адресом для совместной работы команды.

Быстрая просьба 🤗

Я пытаюсь набрать первую тысячу звезд за Preevy. Можете ли вы помочь мне, пометив репозиторий звездочкой? Это помогает большему количеству разработчиков открыть для себя Preevy, а нам — продолжать создавать интересный контент для сообщества. Спасибо!

Почему это интересно

Среды предварительной версии меняют правила игры в быстро меняющихся рабочих процессах разработки. Они позволяют командам просматривать фактически работающие версии приложения во время проверки перед развертыванием в промежуточной или рабочей среде.

Среды предварительного просмотра (также называемые «предварительными развертываниями» или «временными средами») позволяют каждому заинтересованному лицу в команде просматривать и совместно работать над изменением кода во время PR, что ускоряет разработку продукта.

Поскольку supabase допускает локальную разработку, мы можем использовать ее для создания автономной среды — это означает, что мы можем легко создать приложение со всеми его зависимостями, основываясь только на исходном коде. Для работы приложения не требуется никаких внешних служб.

Таким образом, этот проект является отличным примером создания мультисервисного приложения с некоторыми отличными инструментами с открытым исходным кодом и показывает, как среды предварительного просмотра могут повлиять на ваш рабочий процесс и общий опыт разработчика.

Как это построить

1. Создайте docker-compose.yaml

Во-первых, мы собираемся создать файл docker-compose.yaml со всеми вспомогательными службами. Мы основываем наш компоновочный файл на основе собственного компоновочного файла супапазы. Наряду с самим docker-compose.yaml нам нужны некоторые конфигурации и файлы SQL для инициализации сервисов и БД. В основном они скопированы из репозитория supabase, поэтому мы не будем о них говорить.

2. Создайте Dockerfile для приложения Next.js

Нам нужно добавить приложение Slack clone в файл компоновки. Для этого нам нужно создать для него файл 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"]

Обратите внимание, что мы передаем аргументы NEXT_PUBLIC_SUPABASE_URL и NEXT_PUBLIC_SUPABASE_KEY, поэтому они используются в качестве переменных среды при сборке приложения, что позволяет подключаться к службам надбазы из нашего внешнего приложения.

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

4. Вставьте URL-адреса служб среды предварительного просмотра в переменные среды.

Чтобы службы могли общаться друг с другом, им нужны адреса друг друга. В исходном файле ./docker/.env.example из репозитория supabase localhost URL-адресов используются для подключения к различным службам, поскольку предполагается, что среда будет работать на частной машине разработчика. В нашем случае среда будет работать в среде предварительного просмотра и иметь общедоступные URL-адреса в Интернете.

Чтобы получить URL-адреса, Preevy предоставляет общедоступные URI, используя специальные переменные среды времени сборки, как описано в документации.

Мы можем заставить наши переменные среды поддерживать как URL-адреса Preevy, так и локальную разработку, используя подстановку параметров bash.

Например, вместо определения переменной SITE_URL с локальным URL

SITE_URL=http://localhost:3000

Мы определим

SITE_URL=${PREEVY_BASE_URI_STUDIO_3000:-http://localhost:3000}

Которому мы установим значение http://localhost:3000, если значение PREEVY_BASE_URI_STUDIO_3000 равно нулю, то есть мы работаем вне Preevy. Вы можете посмотреть измененный файл ./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. Создание рабочего процесса действия GH автоматически развертывается при каждом обновлении.

У 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 }}

Краткое содержание

Таким образом, использование инструментов и фреймворков с открытым исходным кодом, таких как supabase, Next.js и Preevy, может быть мощной комбинацией для создания масштабируемых приложений с полным стеком и более эффективных рабочих процессов разработки.

Следуя предоставленным шагам и используя Docker Compose, разработчики могут легко настроить среды предварительного просмотра, которые автоматически создаются и развертываются при каждой фиксации, облегчая эффективную проверку кода и совместную работу.

В средах предварительного просмотра заинтересованные лица могут просматривать работающие версии приложения в режиме реального времени, а разработчики могут получить более четкую обратную связь, более быстрые циклы разработки и гораздо более удобный опыт разработчиков.