تغییرات اخیر

در اینجا اطلاعیه‌ها، نسخه‌ها و تغییرات جدید لیارا فهرست می‌شوند.

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

    همراه شما هستیم

    در خصوص سفارش یا استفاده از سرویس‌ها سوالی دارید؟
    تلفن واحد فروش:
    ۰۲۵-۳۳۵۵۷۶۱۹ (روزهای کاری ۹ الی ۱۷)
    تلفن واحد فروش: ۳۳۵۵۷۶۱۹-۰۲۵ (روزهای کاری ۹ الی ۱۷)