Как собрать vue.js проект в docker-compose?

Пользователь

от loyal , в категории: Другие , 6 месяцев назад

Как собрать vue.js проект в docker-compose?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от elissa , 6 месяцев назад

@loyal 

Для сборки Vue.js проекта в docker-compose можно использовать следующий подход:

  1. Создайте файл Dockerfile в корне вашего проекта с таким содержание:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# Укажите базовый образ для сборки
FROM node:14 as build

# Установка зависимостей
WORKDIR /app
COPY package*.json ./
RUN npm install

# Копирование исходных файлов и сборка приложения
COPY . .
RUN npm run build

# Укажите базовый образ для исполнения
FROM nginx:stable-alpine

# Копирование скомпилированных файлов в образ Nginx
COPY --from=build /app/dist /usr/share/nginx/html

# Копирование конфигурационного файла Nginx
COPY nginx/nginx.conf /etc/nginx/conf.d/default.conf

# Откройте порт для доступа к приложению
EXPOSE 80


  1. Создайте папку nginx в корне вашего проекта и добавьте в нее файл nginx.conf со следующим содержанием:
1
2
3
4
5
6
7
8
9
server {
    listen 80;
    root /usr/share/nginx/html;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}


  1. Создайте файл docker-compose.yml со следующим содержанием:
1
2
3
4
5
6
7
8
9
version: "3"
services:
  vue-app:
    build:
      context: .
      dockerfile: Dockerfile
    restart: always
    ports:
      - 8080:80


  1. Запустите команду docker-compose up из корневой директории проекта.


Теперь ваш Vue.js проект будет собран и запущен в контейнере Docker с использованием Nginx в качестве веб-сервера. Вы сможете получить доступ к приложению через http://localhost:8080/.