Рубрики
Uncategorized

Как обслуживать приложение Vue с Nginx в Docker

Давайте создадим веб -сайт, используя структуру VUE и узнаем, как обслуживать его в контейнере Docker, используя Nginx. Tagged with Vue, Docker, WebDev, DevOps.

Давайте создадим веб -сайт, используя структуру VUE и узнаем, как обслуживать его в контейнере Docker, используя Nginx.

Если вам понравился этот пост, пожалуйста, дайте ему 💓, 🦄 или 🔖 и подумайте о подписке на мой бесплатный еженедельный информационный бюллетень Dev

Чтобы начать, мы собираемся использовать Vue CLI для создания приложения стартера VUE.

Мы будем называть это приложение Vue-Nginx-Docker Анкет

npx @vue/cli create vue-nginx-docker

Для этого учебника я буду использовать пряжу, поэтому, если вы хотите следовать, чтобы точно обязательно выбрать «пряжу» при создании приложения. Также хорошо выбрать NPM; Вам просто нужно будет настроить некоторые команды Docker соответственно.

После того, как приложение будет настроено, перейдите в папку New App:

cd vue-nginx-docker

Теперь мы знаем, что нам понадобится пара файлов для использования с Docker: A Dockerfile и .dockerignore файл. Давайте сделаем их сейчас.

touch Dockerfile

Для нашего .dockerignore Файл, давайте обязательно игнорируем наши файлы зависимости в node_modules Как и мы с git.

echo "node_modules" > .dockerignore

Время построить Dockerfile! Есть много способов, которыми мы могли бы сделать это, но сегодня мы будем использовать Многостадийный процесс:

  • Стадия 1: изображение узла для фронта зданий
  • Этап 2: nginx stage для обслуживания фронтальных активов

Этап 1: Строительство передних активов

Наш первый этап будет:

  • Используйте изображение узла
  • Скопируйте все наши файлы VUE в рабочий каталог
  • Установите зависимости проекта с пряжей
  • Создайте приложение с пряжей

Вот как это выглядит в Docker!

# Name the node stage "builder"
FROM node:10 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

Далее мы на самом деле обслуживаем контент, который только что построил!

Этап 2: наш сервер Nginx

Наш второй этап будет:

  • Используйте изображение Nginx
  • Удалить любые статические активы по умолчанию с изображения Nginx
  • Скопируйте наши статические активы из Строитель Изображение, которое мы создали на первом этапе
  • Укажите точку входа для нашего контейнера для запуска nginx

Вот как выглядит этот этап в Dockerfile:

# 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;"]

Важно отметить, что Vue создает статические активы в Dist Папка по умолчанию, поэтому мы копируем наши файлы оттуда. Если ваше приложение по какой -то причине строит файлы в другую папку, скорректируйте соответствующим образом.

Сделать все это вместе

Хорошо! Давайте соединим все это вместе и запустим наше приложение.

Наш многоэтапный Dockerfile теперь должен выглядеть так:

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

# Name the node stage "builder"
FROM node:10 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;"]

Теперь, когда мы собрали наш Dockerfile, давайте создадим изображение под названием vue-nginx :

docker build -t vue-nginx .

Теперь, когда наше изображение построено, мы можем запустить контейнер со следующей командой, которая будет обслуживать наше приложение на порту 8080.

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

Перейдите к http://localhost: 8080 И теперь вы должны увидеть наше приложение Vue по умолчанию!

Если вам понравился этот пост, пожалуйста, дайте ему 💓, 🦄 или 🔖 и подумайте о подписке на мой бесплатный еженедельный информационный бюллетень Dev

Оригинал: «https://dev.to/nas5w/how-to-serve-a-vue-app-with-nginx-in-docker-4p54»

Читайте ещё по теме: