نحوه دیپلوی اپلیکیشن React با Container Registry در سرور مجازی

با ظهور معماری Cloud-Native، روند توسعه و استقرار اپلیکیشن‌ها به‌شدت متحول شده، طوری‌که امروز با ابزارهای قدرتمندی روبه‌رو هستیم که همه‌چیز را از کدنویسی و پکیج‌کردن کد گرفته تا دیپلوی و اسکیل‌بندی سرویس‌ها، به‌صورت خودکار و قابل‌ کنترل در آورده است. این جریان در دنیای امروز با نام DevOps شناخته می‌شود، و بخش جدایی ناپذیرش، کانتینرها هستند.

در این آموزش از لیارا، قصد داریم یک اپلیکیشن React را در قالب یک کانتینر Docker پکیج کنیم، ایمیج داکرش را بسازیم، آن را روی یک Container Registry منتشر کنیم و در نهایت روی یک سرور مجازی دیپلوی کنیم.

در ادامه می‌خوانید:

• پیش‌نیازها
• مرحله اول: نصب داکر
• مرحله دوم: ایجاد اپلیکیشن React
• مرحله سوم: ساخت Dockerfile
• مرحله چهارم: ایجاد فایل پیکربندی Nginx
• مرحله پنجم: ساخت Docker Image
• مرحله ششم: ارسال (Push) Docker Image به Container Registry
• مرحله هفتم: ورود به سرور مجازی
• مرحله هشتم: دریافت (Pull) Docker Image از Container Registry
• مرحله نهم: اجرای Container
• جمع‌بندی
• سوالات متداول

پیش‌نیازها

برای استفاده بهینه از این مقاله، پیشنهاد می‌کنیم، الزامات نرم‌افزاری زیر را رعایت کنید:

• یک حساب کاربری در لیارا برای دسترسی به پلتفرم لیارا
• نصب Docker و npm روی سرور مجازی، در صورتی که Docker روی سرورتان نصب نیست، به این مقاله مراجعه کنید.
• سرور مجازی با سیستم‌عامل Ubuntu همراه با یک کاربر non-root با دسترسی‌های sudo و یک فایروال فعال (در صورتی که چنین کاربر فعالی در سرور مجازی خود ندارید، می‌توانید به این مقاله، مراجعه کنید).

قبل از شروع مقاله بیایید با برخی از مفاهیم پایه‌ای آشنا شویم.

کانتینر چیست؟

کانتینر (Container) نوعی محیط اجرای سبک و ایزوله شده در سطح سیستم‌عامل است که برای اجرای اپلیکیشن‌ها طراحی شده است. هر کانتینر یک پکیج کامل از نرم‌افزار، شامل کد برنامه، کتابخانه‌ها، وابستگی‌ها و تنظیمات لازم را در خود دارد. مهم نیست اپلیکیشن روی چه پلتفرمی توسعه پیدا کرده باشد؛ با استفاده از کانتینر می‌توان آن را بدون مشکل در هر محیطی تست و اجرا کرد، بدون اینکه نیاز به تنظیمات پیچیده یا وابستگی‌های اضافی باشد.

همین الان، هاست ابری React را در لیارا با سرعت بالا راه‌اندازی کنید.
✅ بدون نیاز به پیکربندی ✅ استقرار آسان ✅ مناسب برای React
خرید هاست React

ایمیج کانتینر چیست؟

صحبت از کانتینر بدون اشاره به ایمیج کانتینر (Container Image) کامل نیست. ایمیج کانتینر، یک پکیج اجرایی سبک، مستقل و قابل حمل از نرم‌افزار است که شامل تمام اجزای موردنیاز برای اجرای یک اپلیکیشن می‌شود؛ از کد برنامه و محیط اجرایی گرفته تا ابزارهای سیستمی، کتابخانه‌ها و تنظیمات. این ایمیج، پایه‌ای برای ساخت و اجرای کانتینرهاست و امکان اجرای برنامه را در هر محیطی با پایداری و سازگاری بالا فراهم می‌کند.

ایمیج کانتینر، زمانی که اجرا می‌شود، به یک کانتینر فعال تبدیل خواهد شد.

کانتینرها فرآیند بسته‌بندی، دیپلوی، توزیع و مقیاس‌پذیری کد اپلیکیشن را بسیار ساده می‌کنند. آن‌ها کد برنامه و تمام وابستگی‌های موردنیاز برای اجرا را در یک بسته منسجم، چندسکویی و قابل تکرار قرار می‌دهند.

در میان روش‌های مختلف کانتینری‌سازی، Docker یکی از شناخته‌شده‌ترین و پرکاربردترین ابزارهاست که در این مقاله به آن پرداخته‌ایم.

در ادامه، به‌صورت عملی بررسی خواهیم کرد که چطور می‌توان یک اپلیکیشن را کانتینری کرد.

برای آشنایی با کوبرنتیز (Kubernetes) و چگونگی کارکرد آن، مقاله زیر را می‌توانید مطالعه کنید.
کوبرنتیز(Kubernetes) چیست؟

مرحله اول: نصب داکر

در قدم اول باید Docker را نصب کنید. پس از نصب با اجرای دستور زیر مطمئن شوید که داکر به‌درستی روی سرور شما نصب شده باشد.

docker --version
Docker version 26.0.0, build 2ae903e

آموزش کامل نصب داکر روی اوبونتو 22.04 را در مقاله زیر مطالعه کنید.
 نصب داکر روی اوبونتو

مرحله دوم: ایجاد اپلیکیشن React

پس از نصب داکر، نوبت به اجرای اپلیکیشن React می‌رسد. باید یک پروژه React آماده روی سیستم‌تان داشته باشید یا آن را از یک مخزن (Repository) GitHub کلون کنید. اگر پروژه‌تان روی GitHub قرار دارد، آن را روی سیستم لوکال خود کلون کنید.

در غیر این‌صورت، می‌توانید یک اپلیکیشن نمونه‌ی React با استفاده از Vite ایجاد کنید. برای این‌کار، دستور زیر را اجرا کنید:

npm create vite@latest react-app -- --template react

دستور بالا، باید یک اپلیکیشن React داخل دایرکتوری react-app ایجاد کند. حالا برای اطمینان از اینکه اپلیکیشن به‌درستی کار می‌کند، دستور زیر را اجرا کنید تا اپلیکیشن اجرا شود:

cd react-app
npm install
npm run dev

منتظر بمانید تا اپلیکیشن شما کامپایل شود. پس از اتمام فرایند، باید پیامی مشابه زیر مشاهده کنید:

OutputVITE v5.2.11  ready in 712 ms
➜  Local:   http://localhost:5173/
➜  Network: use --host to expose
➜  press h + enter to show help

پس از اتمام کامپایل، شما باید بتوانید اپلیکیشن خود را در مرورگر http://localhost:5173 مشاهده کنید.

در نهایت، اپلیکیشن شما روی سیستم‌تان در حال اجراست. حالا تنها چیزی که باقی می‌ماند این است که اپلیکیشن را در قالب یک کانتینر بسته‌بندی کرده و آماده استقرار در محیط تولید (Production) کنید.

آموزش کامل راه‌اندازی برنامه React با NGINX در Docker را در مقاله زیر مطالعه کنید.
 راه‌اندازی برنامه React با NGINX

مرحله سوم: ساخت Dockerfile

داکر به شما این امکان را می‌دهد که کد اپلیکیشن خودتان را با استفاده از ایمیج‌های داکر (Docker Image) کانتینری کرده و اجرا کنید. برای ساخت این ایمیج، از Dockerfile استفاده می‌کنید که شامل دستوراتی است که نحوه ساخت ایمیج را توضیح می‌دهد. هر دستور در Dockerfile یک لایه جدید به ایمیج اضافه می‌کند. این لایه‌ها به‌صورت فقط خواندنی ذخیره می‌شوند و هر کدام به‌طور جداگانه با یک هش SHA-256 شناخته می‌شوند.

برای اطلاعات بیشتر در مورد ساختار ایمیج‌های داکر می‌توانید مستندات داکر را مطالعه کنید.

بنابراین، باید یک Dockerfile ایجاد کنید تا ایمیج اپلیکیشن را بسازید، که این فایل شامل دو مرحله مهم است:

• ساخت اپلیکیشن
• راه‌اندازی و اجرای Nginx برای میزبانی اپلیکیشن

بیایید هر کدام را جداگانه بررسی کنیم.

توجه: در دو مرحله بعدی، تمام دستورالعمل‌ها داخل Dockerfile قرار خواهند گرفت.

ساخت اپلیکیشن

برای ساخت اپلیکیشن، شما از داکر می‌خواهید که از آخرین نسخه ایمیج(Image) Node.js به‌عنوان پایه برای ساخت اپلیکیشن React خود استفاده کند. برای این‌کار دستور زیر را اجرا کنید:

FROM node:latest AS builder

حالا که ایمیج پایه را ساختیم، باید دایرکتوری داخل کانتینر را مشخص کنیم تا همه دستورات بعدی در آن اجرا شود. این دایرکتوری جایی است که پروژه شما قرار است در آن به‌طور کامل ساخته شود.

WORKDIR /app

پس از آن، باید فایل package.json را داخل کانتینر کپی کنیم و دستور npm install را اجرا کنیم تا تمام وابستگی‌های پروژه نصب شود.

این مرحله بسیار مهم است، زیرا باید مطمئن شویم که اپلیکیشن شما همه مواردی که برای اجرا نیاز دارد را در اختیار دارد. برای کپی فایل، دستور زیر را وارد کنید:

COPY package.json .
RUN npm install

حالا وقت آن است که باقی‌مانده فایل‌های پروژه را به کانتینر منتقل کنیم.

پس از کپی کردن فایل‌ها، باید دستور npm run build را اجرا کنیم تا اپلیکیشن را کامپایل کرده و به یک بسته آماده برای تولید تبدیل کنیم. این بسته به‌طور خودکار بهینه می‌شود تا بهترین عملکرد را داشته باشد و همه فایل‌ها، در فورلدر dist/ قرار می‌گیرند.

برای انتقال فایل‌های پروژه، دستور زیر را اجرا کنید:

COPY . ./
RUN npm run build

اگر به‌دنبال آشنایی با نحوه کار با hookها در React هستید، می‌توانید مقاله زیر را مطالعه کنید.
نحوه کار با hookها در React

راه‌اندازی و اجرای Nginx برای میزبانی اپلیکیشن

Nginx به‌عنوان یکی از پرسرعت‌ترین وب‌سرورها شناخته می‌شود که برای سرویس‌دهی اپلیکیشن‌های React کاملاً مناسب است.

اولین کاری که باید انجام دهید این است که تنظیمات پیش‌فرض Nginx را تغییر دهید، و به جای آن‌ها فایل تنظیمات مختص خودتان را قرار دهید.

این‌کار باعث می‌شود که Nginx دقیقا بداند چگونه درخواست‌ها را پردازش کند و اپلیکیشن را به درستی به کاربران نمایش دهد. تنظیمات خود را به صورت زیر جایگزین کنید:

FROM nginx:latest
RUN rm -rf /etc/nginx/conf.d/default.conf
COPY ./nginx/default.conf /etc/nginx/conf.d/default.conf

حالا باید اپلیکیشن ساخته شده در مرحله قبل را از کانتینر builder کپی کنید و در مسیر مورد نظر nginx قرار دهید. این‌کار تضمین می‌کند که nginx بتواند به فایل‌های اپلیکیشن دسترسی پیدا کند و به کاربران ارائه دهد.

برای انتقال فایل‌های اپلیکیشن React به nginx زیر را اجرا کنید:

COPY --from=builder /app/dist /usr/share/nginx/html

پس از آن‌که فایل‌های اپلیکیشن در مسیر مورد نظر قرار گرفتند، باید دایرکتوری داخل کانتینر nginx را به مسیری که فایل‌های اپلیکیشن در آن قرار دارند، تنظیم کنید.

تنظیم دایرکتوری داخل کانتینر nginx را با دستور زیر انجام دهید:

WORKDIR /usr/share/nginx/html

در نهایت، سرور nginx را با دستور زیر راه‌اندازی می‌کنیم. این دستور به Docker اعلام می‌کند که nginx را اجرا کرده و آن را به‌صورت مداوم در حال اجرا نگه دارد.

CMD ["/bin/bash", "-c", "nginx -g "daemon off;""]

پس از انجام تنظیمات بالا، با کنار هم قرار دادن تمام مراحل، فایل نهایی Dockerfile شما به شکل زیر خواهد بود:

# ------------------------
# Step 1: Build react app
# ------------------------

# Use node:latest as the builder image
FROM node:latest AS builder

# Set the working directory
WORKDIR /app

# Copy package.json and install app dependencies
COPY package.json .
RUN npm install

# Copy other project files and build
COPY . ./
RUN npm run build

# --------------------------------------
# Step 2: Set up nginx to serve the app
# --------------------------------------
# Use nginx:latest as the base image
FROM nginx:latest

# Overwriting nginx config with our own config file
RUN rm -rf /etc/nginx/conf.d/default.conf
COPY ./nginx/default.conf /etc/nginx/conf.d/default.conf

# Copy over the build created in the Step 1
COPY --from=builder /app/dist /usr/share/nginx/html

# Set the working directory
WORKDIR /usr/share/nginx/html

# Start nginx server
CMD ["/bin/bash", "-c", "nginx -g \"daemon off;\""]

بنابراین، یک فایل جدید با نام Dockerfile در ریشه (root) پروژه‌ی اپلیکیشن خود ایجاد کنید.

touch Dockerfile

سپس محتوای Dockerfileی که در مراحل بالا ساختیم را داخل این فایل قرار دهید.

تقریباً همه چیز آماده است. فقط یک بخش کلیدی باقی مانده تا بتوانید ایمیج(image) نهایی را بسازید. اگر به این فکر افتاده‌اید که فایل پیکربندی nginx کجاست، دقیقاً درست فکر کرده‌اید؛ این فایل همان قطعه حیاتی پازل است که برای تکمیل فرایند نیاز دارید.

اگر به‌دنبال تفاوت‌های وب‌سرور Apache و NGINX؛ هستید، مقاله زیر را بخوانید.
مقایسه وب‌سرور Apache و NGINX

مرحله چهارم: ایجاد فایل پیکربندی Nginx

برای اینکه مطمئن شویم، راه‌اندازی و اجرای Nginx به‌درستی انجام شده است، در ریشه پروژه، یک دایرکتوری به‌نام nginx ایجاد کنید و یک فایل به نام default.conf داخل این دایرکتوری قرار دهید. این فایل در ادامه با پیکربندی موردنیاز nginx جایگزین خواهد شد.

mkdir nginx
cd nginx && touch default.conf

اکنون، پیکربندی زیر را در فایل default.conf کپی کنید:

server {
  listen 80;
  add_header Cache-Control no-cache;
  location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
    expires -1;
  }
  error_page   500 502 503 504  /50x.html;
  location = /50x.html {
    root   /usr/share/nginx/html;
  }
}

این بخش به Nginx دستور می‌دهد که روی پورت 80 شروع به گوش دادن کند، مسیر فایل‌هایی که باید ارائه شوند را مشخص کند و همچنین رفتار پیش‌فرض را بر اساس کدهای وضعیت خطا تنظیم نماید.

با انجام این مرحله، همه‌چیز برای ساخت و استقرار ایمیج شما آماده است.

مرحله پنجم: ساخت Docker Image

برای ساخت docker image مطمئن شوید که به دایرکتوری اصلی پروژه رفته‌اید، جایی که Dockerfile قرار دارد و سپس این دستور را اجرا کنید:

docker build -t ghcr.io/<your-github-username>/react-example-app:1 -f Dockerfile

ایمیج(Image) با نام و تگی که با فلگ -t مشخص می‌کنید، شناسایی می‌شود. برای مثال، نام ایمیج شما react-example-app و تگ آن 1 خواهد بود.

بعد از اتمام فرایند ساخت Image، باید خروجی مشابه به این را مشاهده کنید:

[+] Building 113.9s (17/17) FINISHED
=> [internal] load build definition from Dockerfile
=> => transferring dockerfile: 982B
...
...
=> => writing image sha256:d125b102b094224c82ddb69f9ece98c7161c8660fe72fd5aec57e41a6d72cf2f
=> => naming to docker.io/library/react-app:v1.0

در آخر، برای اطمینان از این‌که Image شما به‌درستی ساخته شده است، از دستور زیر استفاده کنید:

docker image list

OutputREPOSITORY   TAG   IMAGE ID       CREATED         SIZE
react-app    v1.0  d125b102b094   6 minutes ago   188MB

حالا که Docker Image ساخته شده است، وقت آن رسیده تا برای توزیع و استقرار آماده شود.جذاب‌ترین قسمت در مورد داکر ایمیج این است که کاملاً مستقل عمل می‌کند و می‌تواند روی هر پلتفرمی که از داکر پشتیبانی می‌کند، اجرا شود.

اما قبل از اینکه بتوانید این ایمیج را توزیع کنید یا استقرار دهید، لازم است که در یک محل ذخیره‌ش کنید.

اینجا هم همان‌طور که انتظار می‌رود، Container Registry به کمک می‌آید تا بتوانید ایمیج خودتان را در یک مکان مرکزی ذخیره کنید.

برای آموزش نصب و راه‌اندازی Kubernetes روی سرور فیزیکی (بدون مجازی‌سازی)، مقاله زیر را می‌توانید مطالعه کنید.
نحوه نصب و راه‌اندازی Kubernetes

مرحله ششم: ارسال (Push) Docker Image به Container Registry

Container Registry یک مخزن مرکزی برای ذخیره ایمیج‌های کانتینری است که به شما این امکان را می‌دهد تا ایمیج‌های کانتینری را برای استقرار سریع ذخیره کنید.

شما می‌توانید ایمیج‌های خودتان را به یک Container Registry ارسال (Push) کرده و سپس از هر جایی که می‌خواهید، آن‌ها را دانلود کنید؛ این کار می‌تواند به صورت محلی، از یک کلاستر Kubernetes، یا در داخل یک خط لوله CI/CD انجام شود. حالا بیایید ببینیم چطور می‌توانیم ایمیج خودمان را به یک Container Registry در گیت‌هاب ارسال کنیم.

قبل از شروع به ارسال (Push) ایمیج‌ها به Container Registry، باید آن را تنظیم کنید. پیشنهاد می‌کنیم از Container Registry گیت‌هاب استفاده کنید. این سرویس ساده، خصوصی و امن می‌باشد و تنظیم کردن Container Registry گیت‌هاب بسیار ساده و سریع انجام می‌شود.

برای این مثال، می‌توانید یک مخزن (Repository) رایگان ایجاد کنید و نام آن را my-container-registry بگذارید.

پس از آن‌که مخزن (Repository) را در گیت‌هاب ایجاد کردید، باید یک توکن دسترسی (API Token) بسازید تا بتوانید به Container Registry دسترسی داشته باشید. این توکن را برای ورود به رجیستری استفاده خواهید کرد.

برای ساخت توکن در GitHub مراحل زیر را انجام دهید:

وارد گیت‌هاب شوید و به صفحه Developer Apps بروید.

روی دکمه Generate new token کلیک کنید.

یک نام مناسب برای توکن انتخاب کنید (مثلاً docker-registry-access).

در بخش Permissions، گزینه‌های زیر را فعال کنید:

• read:packages
• write:packages
• delete:packages (اختیاری)

روی Generate token کلیک کنید و توکن تولیدشده را کپی کنید.

توجه: این توکن فقط یک‌بار نمایش داده می‌شود. حتماً آن را یک جای امن نگه دارید، زیرا در مراحل بعدی (مثل login با Docker) به آن نیاز دارید.

بعد از ایجاد توکن، وارد رجیستری GitHub شوید. دستور زیر را وارد کنید:

توجه: API_TOKEN خود را از گیت‌هاب دریافت کرده و در کد زیر جایگزین کنید. نحوه دریافت توکن در قسمت بعدی مشاهده کنید.

docker login -u <your-github-username> -p API_TOKEN ghcr.io

پس از اجرای کد بالا، نام کاربری و پسورد خود را وارد کنید. فراموش نکنید که پسورد شما همان توکن است.

دستور بالا با استفاده از توکن، شما را وارد رجیستری ghcr.io می‌کند و امکان push کردن ایمیج را فراهم می‌سازد.

اگر همه موارد را درست انجام داده باشید، خروجی زیر را مشاهده خواهید کرد:

Login Succeeded

حالا که Login با موفقیت انجام شده، باید ایمیجی که در مرحله پنجم ساختید را برای ارسال به رجیستری tag کنید. برای این‌کار از دستور زیر استفاده کنید:

docker tag react-app:v1.0 ghcr.io/<your-github-username>/react-app:v1.0

سپس با دستور زیر، ایمیج را داخل رجیستری ارسال(Push) کنید:

docker push ghcr.io/<your-github-username>/eact-example-app:1

فراموش نکنید که<your-github-username> را با نام کاربری واقعی GitHub خود جایگزین کنید.

خروجی چیزی شبیه به زیر خواهد بود:

The push refers to repository [ghcr.io/your-username/my-container-registry/react-app]
f4e2a5cbb3d3: Pushed
98d3ff3c9f4d: Pushed
f63a4a2c68b3: Pushed
d74508fb6632: Pushed
v1.0: digest: sha256:3b1cf4a... size: 1573

ایمیجی که ایجاد کردید، حالا در Container Registry ذخیره شده و باید داخل پنل مدیریت گیت‌هاب (GitHub Packages) قابل مشاهده باشد.

حالا، ایمیج ساخته‌شده و با موفقیت به Container Registry منتقل شده و با تگ پیش‌فرض latest ذخیره شده است. زیرا هنگام تگ‌گذاری، نام مشخصی برای تگ در نظر گرفته نشده بود؛ در چنین شرایطی، داکر به‌طور خودکار از latest به‌عنوان تگ پیش‌فرض استفاده می‌کند.

البته توجه داشته باشید که امکان تگ‌گذاری تصاویر داکر با هر شناسه دلخواه وجود دارد. یکی از کاربردهای مهم این قابلیت، نسخه‌بندی (Versioning) است. به‌عنوان مثال، اگر تغییری در کد ایجاد کرده‌اید و قصد دارید آن را به نسخه‌ای خاص مانند v1.0 نسبت دهید، می‌توانید ایمیج را با این تگ مشخص کرده و به رجیستری ارسال کنید.

با استفاده از نسخه‌بندی، می‌توان به‌صورت ساخت‌یافته، نسخه‌های مختلف یک اپلیکیشن را مدیریت و رهگیری کرد. این رویکرد باعث می‌شود هر نسخه از ایمیج، نقطه‌ای مرجع برای استقرار یا بازبینی در آینده باشد و فرآیند انتشار و نگه‌داری نسخه‌ها نیز سامان‌دهی شود.

مرحله هفتم: ورود به سرور مجازی

برای راه‌اندازی و استقرار کانتینر خود، اکنون کافی است یک سرور مجازی اوبونتو بسازید و از ایمیج ساخته شده استفاده کنید. برای ایجاد سرور مجازی با اوبونتو این مقاله را مطالعه کنید. همچنین اگر به دنبال خرید سرور مجازی با کیفیت هستید، پیشنهاد می‌کنیم از سرویس سرور مجازی لیارا استفاده کنید. برای آشنایی بیشتر و خرید، به مستندات لیارا مراجعه کنید.

با استفاده از آدرس IP، می‌توانید از طریق SSH وارد سرور مجازی شوید. برای این کار، دستور زیر را وارد کنید:

ssh root@62.60.198.10
root@62.60.198.10's password:

با توجه به روش احراز هویت که هنگام راه‌اندازی سرور مجازی انتخاب کرده‌اید، ممکن است نیاز به وارد کردن رمز عبور برای ورود به سرور از طریق SSH داشته باشید یا نه.

زمانی که با موفقیت وارد سرور مجازی شدید، باید پیام خوش‌آمدگویی مشابه به پرامپت root را مشاهده کنید.

Welcome to Ubuntu 24.04 LTS (GNU/Linux 5.4.0-66-generic x86_64)
...
root@your-server-name:~#

حالا که وارد سرور مجازی خود شدید، می‌توانید تمام دستورات مورد نظر را در آن اجرا کنید. شما به محیط (root) سرور دسترسی پیدا کرده‌اید و می‌توانید از آن برای مدیریت سرور، نصب نرم‌افزارها، یا راه‌اندازی سرویس‌های مختلف استفاده کنید.

برای آشنایی با نحوه راه‌اندازی کلاستر K3s Kubernetes در اوبونتو 22.04، مقاله زیر را بخوانید.
راه‌اندازی کلاستر K3s Kubernetes 

مرحله هشتم: دریافت (Pull) Docker Image از Container Registry

پس از ورود به سرور مجازی، باید ایمیج اپلیکیشن را از رجیستری دریافت کرده (Pull) و اجرا کنید. ابتدا بررسی کنید که آیا Docker روی سرور شما نصب است یا خیر:

docker --version

اگر Docker نصب بود، ایمیج اپلیکیشن را با دستور زیر دریافت (Pull) کنید:

docker pull ghcr.io/your-username/my-container-registry/react-app:v1.0

سپس کانتینر را اجرا کنید:

docker run -d -p 80:80 ghcr.io/your-username/my-container-registry/react-app:v1.0

v1.0: Pulling from your-username/my-container-registry/react-app
f4e2a5cbb3d3: Pull complete
98d3ff3c9f4d: Pull complete
f63a4a2c68b3: Pull complete
d74508fb6632: Pull complete
Digest: sha256:3b1cf4a... (hash)
Status: Downloaded newer image for ghcr.io/your-username/my-container-registry/react-app:v1.0

این خروجی نشان می‌دهد که ایمیج با موفقیت از Container Registry (در اینجا GitHub Container Registry) دریافت شده و آماده برای استفاده است.

مرحله نهم: اجرای Container

برای اجرای کانتینر با استفاده از ایمیجی که به‌تازگی دریافت (Pull) کرده‌اید، می‌توانید از دستور زیر استفاده کنید:

docker run -d -p 80:80 ghcr.io/your-username/my-container-registry/react-app:v1.0

با استفاده از فلگ -d، کانتینر در پس‌زمینه اجرا می‌شود و از منابع سیستم استفاده نمی‌کند. فلگ -p 80:80 هم پورت 80 روی هاست را به پورت 80 کانتینر متصل می‌کند، بنابراین ترافیک به پورت کانتینر هدایت می‌شود.

پورت 80 به دلیل استاندارد بودنش برای ترافیک HTTP و جایی که nginx منتظر درخواست‌ها می‌باشد، باز می‌ماند.

برای اطمینان از اینکه کانتینر به درستی اجرا شده است، دستور زیر را اجرا کنید:

docker ps

شما باید کانتینر خود را در لیست مشاهده کنید. وضعیت آن باید چیزی شبیه به UP 2 seconds نشان دهد که به این معنی است که کانتینر به درستی راه‌اندازی شده و در حال اجراست.

تبریک می‌گویم:) اکنون اپلیکیشن React شما به صورت آنلاین منتشر شده و هر کسی می‌تواند به آن دسترسی پیدا کند.

کافی است آدرس IP سرور مجازی خود را در مرورگر وارد کنید تا بتوانید اپلیکیشن وب خود را مشاهده کنید.

همچنین برای متوقف کردن کانتینر، دستور زیر را اجرا کنید:

docker stop <container_id>

بعد از توقف کانتینر، می‌توانید آن را با اجرای دستور زیر حذف کنید:

docker rm <container_id>

همین حالا هاست ابری ساعتی رو سفارش بدید و پروژه‌تون رو با هزینه کم مدیریت کنید!
✅هاست SSD ✅ مناسب تمام CMSها ✅ هزینه ساعتی
خرید هاست ابری ساعتی

جمع‌بندی

در این راهنما، مراحل ساخت، ارسال و استقرار یک اپلیکیشن React با استفاده از GitHub Container Registry توضیح داده شد. ابتدا ایمیج کانتینر با Docker ساخته و سپس به رجیستری گیت‌هاب ارسال شد. پس از آن، با استفاده از SSH به یک سرور مجازی وارد شده و کانتینر را روی سرور راه‌اندازی کردیم. با استفاده از Docker، اپلیکیشن در پس‌زمینه اجرا شده و به پورت 80 دسترسی پیدا کرد.

در نهایت، این فرآیند را می‌توان با استفاده از ابزارهایی مانند GitHub Actions یا Concourse برای اتوماسیون توسعه و استقرار اپلیکیشن به صورت یکپارچه و خودکار تنظیم کرد. این روش‌ها می‌توانند به شما کمک کنند تا به راحتی از کدنویسی تا استقرار اپلیکیشن در فضای ابری را مدیریت کنید.

سوالات متداول

کانتینر رجیستری چیست؟

کانتینر رجیستری یک سرویس ابری است که برای ذخیره‌سازی و مدیریت ایمیج‌های کانتینر استفاده می‌شود.

چطور می‌توانم یک ایمیج کانتینر را به رجیستری ارسال کنم؟

برای ارسال یک ایمیج به کانتینر رجیستری، ابتدا باید ایمیج خود را با دستور docker build بسازید، سپس از دستور docker push برای ارسال آن به رجیستری استفاده کنید.

چرا از کانتینر استفاده می‌کنیم؟

زیرا کانتینرها این اجازه را می‌دهند که اپلیکیشن‌ها به صورت ایزوله‌شده در هر محیطی اجرا شوند، بدون اینکه به سیستم‌عامل یا زیرساخت‌های خاصی وابسته باشند.