آموزش راهاندازی برنامه 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
توسعهدهندگان دربارهی ما چه میگویند
تجربه کار باliara_cloud@امروز خیلی خوب بود. یکی از سرویس هام رو منتقل کردم روش و راضیم. انقد سریع و جذاب کارم راه افتادم اصن باورم نمیشد! برعکس سرویس های PaaS دیگه با اون همه پیچیدگیشون. دمتون گرم
...
MohammadReza
keikaavousi
بعد از بسته شدن @fandoghpaas و ناراحتی همهمون از اینکه یه سرویس خوب و صادق نمیتونه از پس هزینهها بر بیاد، سرویسم رو منتقل کردم به پاس لیارا (https://liara.ir @liara_cloud) . تجربه راحت و خوب. تفاوتهایی داشت که کمی کار میخواست ولی تا الان کاملا راضی.
jadi
jadi
یه خسته نباشید باید به تصمیمliara_cloud@بگم،
بعد از چندین روز سرکله زدن با سرویس های مشابه بالاخره تصمیم گرفتم لیارا رو امتحان کنم و باور نمیشه ۱۰ دقیقه بیشتر وقت نبرد،
دمتون گرم.
Arch
EbadiDev
واسه سرویس PaaS با اختلاف لیارا بهترین رابط کاربری داره و یکی از مزیتهای سرویس دیتابیسشون اینه که خودشون به صورت دورهای بکآپ میگیرن.
...
Ali Najafi
me_ali_najafi
یکی از کارهای خوبی که جدیداً میکنم اینه که یه دیتابیس روی لیارا میسازم و به پروژه وصل میکنم اینطوری هم خونه و هم محل کار دیتابیس بروز رو دارم و راحت میتونم ادامه بدم کار روliara_cloud@
Navid
1navid
عاشقliara_cloud@شدم درسته در حد AWS نیست ولی خب تجربه خوبی واسه پروژه های داخل ایران ارائه میده، میتونم رو CD هم اجراش کنم
Amir H Shekari
vanenshi