Изграждане на Slack клонинг, включително предварителни среди, използване на Next.js и Supabase

Изграждане на Slack клонинг, включително предварителни среди, използване на Next.js и Supabase

TL;DR

В този урок ще изградим приложение, подобно на Slack с пълен стек, с множество работещи услуги. Ние също така ще настроим среди за визуализация за всеки ангажимент във всеки клон, заедно с всички работещи услуги. (сигнал за спойлер — ако предпочитате да гледате направо кода, можете да проверите, че готовият продукт е в това репо).

За да направим това, ще използваме комбинация от supabase + Next.js. Също така ще използваме инструмент, наречен Preevy, за да предоставим среди за визуализация на нашия проект.

Приготвяме се да започнем

От задната част на нещата ще използваме Supabase, OSS проект, създаден като алтернатива на Firebase на Google — платформа за DB, комуникация в реално време, удостоверяване и др.

От външната страна на нещата ще използваме просто приложение „Next.js“ — клонинг на „Slack“, взет от един от примерите на Supabase — „ето връзка към репото“, което ще използваме.

Въпреки че това приложение има много бекенд услуги и фронтенд сървър, ние ще покажем как лесно да настроите среда за предварителен преглед, автоматично изграждана и внедрявана при всеки ангажимент във всеки клон.

За да постигнем това, ще използваме Preevy, инструмент с отворен код за предоставяне на среди за предварителен преглед с минимална конфигурация. Preevy ще изгради и внедри нашето приложение с помощта на облачен доставчик, в този случай евтини виртуални машини AWS Lightsail, като същевременно разкрива услугите с публичен, споделяем URL адрес за екипно сътрудничество.

Бърза молба 🤗

Опитвам се да спечеля първите ни 1K звезди за „Preevy“. Можете ли да ми помогнете, като маркирате хранилището със звезда? Това помага на повече разработчици да открият Preevy и ни помага да продължим да създаваме интересно съдържание за общността. Благодаря!

Защо това е интересно

Средите за визуализация променят играта в бързите работни потоци за разработка. Те позволяват на екипите да прегледат действителните работещи версии на приложението във времето за преглед, преди внедряване в етап или производство.

Средите за предварителен преглед (известни също като „предварителни прегледи на внедряване“ или „ефимерни среди“) позволяват на всяка заинтересована страна в екипа да преглежда и да си сътрудничи при промяна на кода по време на PR, което прави разработката на продукта по-бърза.

Тъй като supabase позволява „локално развитие“, ние можем да го използваме, за да изградим напълно „самостоятелна среда“ — което означава, че можем лесно да изградим приложението с всичките му зависимости само на базата на изходния код. Не е необходима външна услуга, за да работи приложението.

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

Как да го изградим

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

Първо, ще създадем docker-compose.yaml файл с всички supabase услуги. Ние базираме нашия файл за композиране от собствения файл за композиране на supabase. Заедно със самия docker-compose.yaml, имаме нужда от някои конфигурации и SQL файлове за инициализиране на услугите и DB. По принцип те са копирани от репото на supabase, така че няма да говорим за тях.

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

Трябва да добавим приложението за клониране на Slack към файла за композиране. За да направим това, трябва да създадем 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, така че те се използват като променливи на средата в компилацията на приложението, което позволява свързване към услугите на supabase от нашето приложение за интерфейс.

3. Добавете схемата на приложението към обема на услугата за композиране

Приложението Slack очаква определена схема в своята база данни, като таблиците с канали и съобщения. Трябва да заредим схемата в базата данни, когато я стартираме. „Ето SQL файла на схемата в примерното репо“.

За да направим това, добавяме файла full-schema.sql към папката ./docker/volumes/db и го добавяме към обемите на услугата 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 repo, 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, разработчиците могат лесно да настроят среди за предварителен преглед, които автоматично се изграждат и внедряват с всеки ангажимент, улеснявайки ефективния преглед на кода и сътрудничеството.

Със среди за предварителен преглед, заинтересованите страни могат да преглеждат работещите версии на приложението в реално време, а разработчиците могат да се възползват от по-ясна обратна връзка, по-бързи цикли на разработка и много по-добро изживяване на разработчиците.