TL; DR
در این آموزش، ما قصد داریم یک برنامه کاربردی Full Stack مانند Slack با چندین سرویس در حال اجرا بسازیم. ما همچنین محیط‌های پیش‌نمایش را برای هر commit در هر شاخه، با تمام خدمات در حال اجرا، راه‌اندازی می‌کنیم. (هشدار اسپویلر – اگر ترجیح می دهید مستقیماً به کد نگاه کنید، می توانید بررسی کنید که محصول نهایی در این مخزن موجود است).
برای انجام این کار از ترکیبی از supabase + Next.js استفاده خواهیم کرد. ما همچنین از ابزاری به نام Preevy برای ارائه محیط های پیش نمایش برای پروژه خود استفاده خواهیم کرد.
شروع شدن
از طرف دیگر، ما قصد داریم از Supabase استفاده کنیم، یک پروژه OSS که به عنوان جایگزینی برای Firebase گوگل طراحی شده است – یک پلتفرم برای DB، ارتباطات بلادرنگ، احراز هویت و موارد دیگر.
در قسمت جلویی همه چیز، ما از یک برنامه ساده Next.js استفاده خواهیم کرد – یک کلون Slack، که از یکی از نمونه‌های Supabase گرفته شده است – در اینجا پیوندی به مخزن است که از آن استفاده خواهیم کرد.
در حالی که این برنامه دارای بسیاری از خدمات باطن و یک سرور frontend است، ما می خواهیم نشان دهیم که چگونه می توان به راحتی محیط پیش نمایش را تنظیم کرد که به طور خودکار در هر commit در هر شعبه ساخته و مستقر می شود.
برای دستیابی به آن، از Preevy، یک ابزار منبع باز برای تهیه محیط های پیش نمایش با حداقل پیکربندی استفاده خواهیم کرد. Preevy برنامه ما را با استفاده از یک ارائه‌دهنده ابری، در این مورد ماشین‌های مجازی ارزان AWS Lightsail، می‌سازد و مستقر می‌کند، در حالی که خدمات را با URL عمومی و قابل اشتراک‌گذاری برای همکاری تیمی در معرض دید قرار می‌دهد.
یک درخواست سریع 🤗
من سعی می کنم اولین ستاره های 1K خود را برای Preevy کسب کنم. آیا می توانید با ستاره گذاری مخزن به من کمک کنید؟ این به توسعه دهندگان بیشتر کمک می کند تا Preevy را کشف کنند و به ما کمک می کند به ایجاد محتوای جالب برای جامعه ادامه دهیم. با تشکر!
چرا این جالب است
محیط های پیش نمایش یک تغییر دهنده بازی در جریان های کاری توسعه سریع هستند. آنها به تیم‌ها اجازه می‌دهند تا نسخه‌های در حال اجرا واقعی برنامه را در زمان بررسی، قبل از استقرار تا مرحله‌بندی یا تولید، بررسی کنند.
محیط‌های پیش‌نمایش (همچنین به‌عنوان «پیش‌نمایش‌های مستقر» یا «محیط‌های زودگذر» نیز شناخته می‌شوند) هر ذینفع در تیم را قادر می‌سازد تا تغییر کد را در زمان روابط عمومی مشاهده کرده و با آن همکاری کند، که باعث توسعه سریع‌تر محصول می‌شود.
از آنجایی که supabase اجازه توسعه محلی را می‌دهد، می‌توانیم از آن برای ایجاد یک محیط مستقل استفاده کنیم – به این معنی که به راحتی می‌توانیم برنامه را با تمام وابستگی‌هایش تنها بر اساس کد منبع بسازیم. هیچ سرویس خارجی برای کارکرد برنامه مورد نیاز نیست.
بنابراین این پروژه یک نمونه عالی از ساخت یک برنامه کاربردی چند سرویس با چند ابزار منبع باز عالی است و تجربه می کند که چگونه محیط های پیش نمایش می توانند بر گردش کار و تجربه کلی توسعه دهنده شما تأثیر بگذارند.
چگونه آن را بسازیم
1. ایجاد کنید docker-compose.yaml
اول، ما قصد داریم یک را ایجاد کنیم docker-compose.yaml فایل با تمام خدمات supabase. ما فایل نوشتن خود را از فایل نوشتن خود supabase پایه گذاری می کنیم. همراه با docker-compose.yaml به خودی خود، ما به برخی از تنظیمات و فایل های SQL برای مقداردهی اولیه سرویس ها و DB ها نیاز داریم. اساساً آنها از مخزن supabase کپی شده اند، بنابراین ما در مورد آنها صحبت نمی کنیم.
2. ایجاد یک Dockerfile برای برنامه Next.js
باید اپلیکیشن Slack clone را به فایل 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"]
توجه کنید ما در حال عبور از NEXT_PUBLIC_SUPABASE_URL و NEXT_PUBLIC_SUPABASE_KEY args بنابراین آنها به عنوان متغیرهای محیطی در ساخت برنامه استفاده می شوند، که امکان اتصال به سرویس های supabase را از برنامه frontend ما فراهم می کند.
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، localhost URL ها برای اتصال به سرویس های مختلف استفاده می شوند، زیرا فرض بر این است که محیط بر روی ماشین خصوصی توسعه دهنده اجرا می شود. در مورد ما، محیط قرار است در محیط پیش نمایش اجرا شود و URL های اینترنتی عمومی داشته باشد.
برای دریافت URL ها، Preevy URI های عمومی را با استفاده از متغیرهای محیط زمان ساخت خاص، همانطور که در اسناد توضیح داده شده است، در معرض دید عموم قرار می دهد.
ما می‌توانیم با استفاده از جایگزینی پارامتر bash، متغیرهای محیطی خود را از URLهای Preevy و توسعه محلی پشتیبانی کنیم.
به عنوان مثال، به جای تعریف کردن 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 null است، به این معنی که ما خارج از Preevy اجرا می کنیم. می توانید به اصلاح شده نگاه کنید ./docker/.env.example فایل در مخزن این مثال – در اینجا
5. استفاده از Preevy برای استقرار محیط در دستگاه محلی خود
برای ایجاد یک محیط پیش نمایش از دستگاه محلی خود این بخش را بخوانید. همچنین می توانید آن را نادیده بگیرید و آن را به طور مستقیم پیکربندی کنید تا در CI شما اجرا شود، همانطور که در بخش بعدی توضیح داده شد.
اولین قدم این است که مطمئن شوید Preevy همانطور که در مستندات توضیح داده شده است، نصب و پیکربندی شده است.
پس از انجام این کار، موارد زیر را انجام دهید:
- این مخزن را شبیه سازی کنید https://github.com/livecycle/supabase-nexjs-preevy-example
- درون
dockerدایرکتوری، اجرا کنیدcp .env.example .env - درون
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، توسعه‌دهندگان می‌توانند به راحتی محیط‌های پیش‌نمایش را راه‌اندازی کنند که به‌طور خودکار با هر commit ساخته و مستقر می‌شوند و بررسی و همکاری کارآمد کد را تسهیل می‌کنند.
با محیط‌های پیش‌نمایش، ذینفعان می‌توانند نسخه‌های در حال اجرا برنامه را در زمان واقعی بررسی کنند و توسعه‌دهندگان می‌توانند از بازخورد واضح‌تر، چرخه‌های توسعه سریع‌تر و تجربه توسعه‌دهنده بسیار بهتر بهره ببرند.
