آموزش راه‌اندازی برنامه 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