آموزش راه‌اندازی برنامه Vue با NGINX در Docker


۲ فروردین ۱۴۰۰
آموزش راه‌اندازی برنامه vue با nginx در docker

شما در این مقاله یاد می‌گیرید که چگونه یک برنامه Vue را به همراه NGINX به‌صورت یک برنامه‌ی Docker راه‌اندازی کنید. بدون فوت وقت به‌سراغ ایجاد یک برنامه‌ی Vue با استفاده از Vue CLI می‌رویم:

npx @vue/cli create vue-nginx-docker

پس از اجرای موفقیت‌ آمیز دستور فوق یک پوشه جدید با نام vue-nginx-docker در مسیر فعلی شما ایجاد می‌شود و برای وارد شدن به آن پوشه بایستی دستور زیر را اجرا کنید:

cd vue-nginx-docker

برای دنبال کردن ادامه‌ی این آموزش و کار با Docker به فایل‌های Dockerfile و .dockerignore نیاز دارید:

# Linux
touch Dockerfile
# Windows
.>> Dockerfile

دلیل ما برای استفاده از فایل .dockerignore نادیده گرفتن پوشه‌ی node_modules در عملیات ایجاد Docker image نهایی است بنابراین با اجرای دستور زیر از مشکل‌هایی که ممکن است پوشه‌ی node_modules برای ما به‌وجود بیاورد، جلوگیری می‌کنیم:

echo "node_modules" > .dockerignore

پیکربندی و تنظیم Dockerfile

روش‌های متعددی برای پیکربندی Dockerfile وجود دارد اما ما تصمیم داریم از فرایند چند مرحله‌ی یا همان multi-stage process استفاده کنیم. در اولین stage با استفاده Node، برنامه‌ی Vue را build کرده و در دومین stage به‌سراغ راه‌اندازی برنامه با استفاده از NGINX می‌رویم.

جزئیات اولین stage

  • استفاده از node image
  • کپی کردن تمام فایل‌های مسیر فعلی به working directory مشخص شده
  • نصب وابستگی‌های پروژه
  • build کردن برنامه
# Name the node stage "builder"
FROM node:alpine AS builder
# Set working directory
WORKDIR /app
# Copy all files from current directory to working dir in image
COPY . .
# install node modules and build assets
RUN yarn install && yarn build

جزئیات دومین stage

  • استفاده از nginx image
  • حذف فایل‌های پیش‌فرض nginx
  • کپی کردن فایل‌های استاتیک و build شده از stage پیشین
  • تعریف یک entrypoint برای اجرای nginx
# nginx state for serving content
FROM nginx:alpine
# Set working directory to nginx asset directory
WORKDIR /usr/share/nginx/html
# Remove default nginx static assets
RUN rm -rf ./*
# Copy static assets from builder stage
COPY --from=builder /app/dist .
# Containers run nginx with global directives and daemon off
ENTRYPOINT ["nginx", "-g", "daemon off;"]

بایستی توجه داشته باشید که فایل‌های استاتیک پس از build کردن برنامه‌های توسعه داده شده با فریم‌ورک Vue به‌طور پیش‌فرض در پوشه‌ی dist قرار می‌گیرند و اگر برنامه‌ی شما در این مسیر پیش‌فرض build نمی‌شود بایستی COPY --from=builder= /app/dist . را تغییر دهید.

جمع‌بندی و ساخت Docker image نهایی

در این بخش هر دو stage قبل را در کنار هم قرار می‌دهیم و برنامه‌ را اجرا خواهیم کرد. Dockerfile نهایی ما به شکل زیر است:

# Multi-stage
# 1) Node image for building frontend assets
# 2) nginx stage to serve frontend assets

# Name the node stage "builder"
FROM node:alpine AS builder
# Set working directory
WORKDIR /app
# Copy all files from current directory to working dir in image
COPY . .
# install node modules and build assets
RUN yarn install && yarn build

# nginx state for serving content
FROM nginx:alpine
# Set working directory to nginx asset directory
WORKDIR /usr/share/nginx/html
# Remove default nginx static assets
RUN rm -rf ./*
# Copy static assets from builder stage
COPY --from=builder /app/dist .
# Containers run nginx with global directives and daemon off
ENTRYPOINT ["nginx", "-g", "daemon off;"]

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

docker build -t vue-nginx .

پس از اجرای موفقیت آمیز دستور فوق یک Docker image با نام vue-nginx ساخته می‌شود که می‌توانید آن را با اجرای دستور زیر راه‌اندازی کرده و برنامه‌ی خود را در آدرس localhost:8080 مشاهده کنید:

docker run --rm -it -p 8080:80 vue-nginx

منبع: https://typeofnan.dev/how-to-serve-a-vue-app-with-nginx-in-docker

خدمات رایگان لیارا

۲.۵ گیگابایت فضای ذخیره‌سازی ابری رایگان

۲.۵ گیگابایت Object Storage سازگار با پروتکل S3 با دیسک‌های SSD به‌صورت رایگان دریافت کنید.

هاست رایگان برای دیتابیس‌

دیتابیس‌های MariaDB، PostgreSQL و Redis را فقط با یک کلیک و به‌صورت رایگان تهیه کنید.

سرویس DNS رایگان

به سادگی دامنه‌تان را اضافه کنید و به صورت رایگان رکورد‌های آن را مدیریت کنید.

۱۰۰ هزار تومان اعتبار اولیه

بعد از ثبت نام در لیارا مبلغ ۱۰۰ هزار تومان اعتبار هدیه دریافت می‌کنید که با توجه به ساعتی بودن هزینه سرویس‌ها، می‌توانید تمامی خدمات پولی را برای چندین هفته رایگان استفاده کنید.

ارسال ۱۰۰ ایمیل تراکنشی رایگان در هر ماه

در سرویس ایمیل لیارا شما می‌توانید تا ۱۰۰ ایمیل رایگان در هر ماه ارسال کنید و فقط برای بیش از آن هزینه پرداخت کنید. (به‌همراه دسترسی SMTP)

هاست رایگان برای انواع وبسایت

تفاوتی ندارد برای وبسایت خود از Node استفاده می‌کنید یا Laravel و Django، در لیارا می‌توانید به صورت کاملا رایگان آن را میزبانی کنید.

توسعه‌دهندگان درباره‌ی ما چه می‌گویند

تجربه کار باliara_cloud@امروز خیلی خوب بود. یکی از سرویس هام رو منتقل کردم روش و راضیم. انقد سریع و جذاب کارم راه افتادم اصن باورم نمیشد! برعکس سرویس های PaaS دیگه با اون همه پیچیدگیشون. دمتون گرم
...

MohammadReza
liara testimonial
keikaavousi

بعد از بسته شدن @fandoghpaas و ناراحتی همه‌مون از اینکه یه سرویس خوب و صادق نمی‌تونه از پس هزینه‌ها بر بیاد، سرویسم رو منتقل کردم به پاس لیارا (https://liara.ir @liara_cloud) . تجربه راحت و خوب. تفاوت‌هایی داشت که کمی کار می‌خواست ولی تا الان کاملا راضی.

jadi
liara testimonial
jadi

یه خسته نباشید باید به تصمیمliara_cloud@بگم،
بعد از چندین روز سرکله زدن با سرویس های مشابه بالاخره تصمیم گرفتم لیارا رو امتحان کنم و باور نمیشه ۱۰ دقیقه بیشتر وقت نبرد،
دمتون گرم.

Arch
liara testimonial
EbadiDev

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

Ali Najafi
liara testimonial
me_ali_najafi

یکی از کارهای خوبی که جدیداً میکنم اینه که یه دیتابیس روی لیارا میسازم و به پروژه وصل میکنم اینطوری هم خونه و هم محل کار دیتابیس بروز رو دارم و راحت میتونم ادامه بدم کار روliara_cloud@

Navid
liara testimonial
1navid

عاشقliara_cloud@شدم درسته در حد AWS نیست ولی خب تجربه خوبی واسه پروژه های داخل ایران ارائه میده، میتونم رو CD هم اجراش کنم

Amir H Shekari
liara testimonial
vanenshi