Docker развертывает проект vue
1. Напишите впереди:
Как легкая технология виртуализации, Docker обладает преимуществами непрерывной интеграции, контроля версий, переносимости, изоляции и безопасности. В этой статье используется Docker для развертывания клиентского приложения Vue, а идеи реализации и конкретные шаги представлены настолько подробно, насколько это возможно, чтобы облегчить справку студентам с похожими потребностями.
Docker — это механизм контейнера приложений с открытым исходным кодом, который позволяет разработчикам упаковывать свои приложения и зависимости в переносимый контейнер, содержащий код приложения, среду выполнения, зависимые библиотеки, файлы конфигурации и другие необходимые ресурсы. метод развертывания может быть достигнут с помощью контейнеров.Независимо от среды, в которой вы развертываете, приложения в контейнере будут работать в одной и той же среде. (Для получения более подробной информации посетите официальный сайт докераdocker)
Docker уже установлен по умолчанию, @vue/cli
Связанные версии:
-
Docker version 18.09.2, build 6247962
-
vue cli --version 3.3.0
-
macOS Mojave Verison 10.14.1
Операционная среда — macOS, если есть отличия от операционной системы ридера, настройте ее самостоятельно
Похожие изображения:
- nginx:latest
- node:latest
2. Конкретная реализация:
- Создайте проект vue с помощью vue cli, измените созданный проект, напишите запрос внешнего интерфейса на странице, соберите версию онлайн-ресурсов, создайте образ внешнего интерфейса проекта на основе образа докера nginx, а затем начните на основе этот интерфейсный образ проекта.Контейнер vuenginxcontainer.
- Запустите контейнер nodewebserver на основе образа узла, чтобы обеспечить внутренний интерфейс.
- Измените конфигурацию nginx для vuenginxcontainer, чтобы запрос интерфейса интерфейсной страницы перенаправлялся на nodewebserver.
- Небольшие оптимизации и улучшения.
3 Создайте vue-приложение
3.1 vue cli для создания проекта vue
yarn serve / npm run serve
3.2 Переписывание
Немного переписать страницу, и изменить msg в компоненте HelloWorld в App.vue на Hello Docker, добавить запрос интерфейса в созданный жизненный цикл
import axios from 'axios';
……
axios.get('/api/json', {
params: {}
}).then(
res => {
console.log(res);
}
).catch(
error => {
console.log(error);
}
)
……
В это время вы увидите сообщение об ошибке в консоли страницы:
3.3 Сборка проекта vue
Команда выполнения
yarn build / npm run build
distпапка
Если весь каталог dist переносится на сервер, к проекту можно получить прямой доступ, развернув его как сайт статического ресурса.
Далее давайте создадим такой сайт статического ресурса.
4 Создайте образ приложения vue
Nginx — это высокопроизводительный HTTP и обратный прокси-сервер, здесь мы выбираем образ nginx в качестве основы для создания нашего образа приложения vue.
4.1 Получить образ nginx
docker pull nginx
dockerImage Специальная файловая система. Образ Docker — это специальная файловая система, которая помимо предоставления программ, библиотек, ресурсов, конфигурации и других файлов, необходимых для выполнения контейнера, также содержит некоторые параметры конфигурации, подготовленные для выполнения (такие как анонимные тома, переменные среды, пользователи и т. д.). . Образ не содержит никаких динамических данных и его содержимое не будет изменено после построения.- Операции, связанные с образом Docker: Поиск образов
docker search [REPOSITORY[:TAG]], потяните зеркалоdocker pull [REPOSITORY[:TAG]], просмотреть список зеркалdocker image ls, удалить зеркало:docker image rm [REPOSITORY[:TAG]] / docker rmi [REPOSITORY[:TAG]]и т.п.- имя образа докера состоит из REPOSITORY и TAG
[REPOSITORY[:TAG]], TAG по умолчанию соответствует последнему
4.2 Создание файла конфигурации nginx
Создан в корневом каталоге проектаnginxПапка, создайте новый файл в этой папкеdefault.conf
server {
listen 80;
server_name localhost;
#charset koi8-r;
access_log /var/log/nginx/host.access.log main;
error_log /var/log/nginx/error.log error;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
Файл конфигурации определяет домашнюю страницу, на которую нужно указать как/usr/share/nginx/html/index.html, поэтому мы можем поместить созданный файл index.html и связанные статические ресурсы в/usr/share/nginx/htmlПод содержанием.
4.3 Создайте Dockerfile
FROM nginx
COPY dist/ /usr/share/nginx/html/
COPY nginx/default.conf /etc/nginx/conf.d/default.conf
- При создании пользовательского образа создайте его на основе файла Dockerfile.
FROM nginxКоманда означает, что образ построен на образе nginx:latest.COPY dist/ /usr/share/nginx/html/Команда означает копирование всех файлов из папки dist в корневом каталоге проекта в каталог /usr/share/nginx/html/ на зеркале.COPY nginx/default.conf /etc/nginx/conf.d/default.confКоманда означает копирование default.conf из каталога nginx в etc/nginx/conf.d/default.conf и замену конфигурации по умолчанию в образе nginx на локальную конфигурацию default.conf.
4.4 Создание образа приложения vue на основе Dockerfile
Запустите команду (будьте осторожны, чтобы не пропустить последний "." )
docker build -t vuenginxcontainer .
-tэто назвать зеркало.Он основан на Dockerfile текущего каталога для создания образа.
docker image ls | grep vuenginxcontainer
vueОбраз приложения vuenginxcontainer успешно создан. Далее мы запускаемdockerконтейнер.
4.5 Запустите контейнер приложения vue
Контейнер Docker Контейнер: объект среды выполнения образа. Отношения между образом и контейнером подобны классу и экземпляру в объектно-ориентированном программировании.Образ — это статическое определение, а контейнер — это объект при запуске образа. Контейнеры можно создавать, запускать, останавливать, удалять, приостанавливать и т. д.
Запустите контейнер на основе образа vuenginxcontainer и выполните команду:
docker run \
-p 3000:80 \
-d --name vueApp \
vuenginxcontainer
docker runЗапустить контейнер на основе образа-p 3000:80Сопоставление портов, которое сопоставляет порт 3000 хоста с портом 80 контейнера.-dзапустить в фоновом режиме--nameимя контейнера Посмотреть докер-процесс
docker ps
dockerКонтейнер развертывает службу статических ресурсов и может получать доступ к файлам статических ресурсов. Данных интерфейса /api/json нет.Дальше решим эту проблему.
5 сервисов интерфейса
Разверните другой контейнер узла для предоставления интерфейсных сервисов.
5.1 Экспресс-сервис
с веб-фреймворком NodeexpressЧтобы написать сервис, зарегистрируйте маршрут server.js, который возвращает данные в формате json:
'use strict';
const express = require('express');
const PORT = 8080;
const HOST = '0.0.0.0';
const app = express();
app.get('/', (req, res) => {
res.send('Hello world\n');
});
app.get('/json', (req, res) => {
res.json({
code: 0,
data :'This is message from node container'
})
});
app.listen(PORT, HOST);
console.log(`Running on http://${HOST}:${PORT}`);
запустить этоexpressприкладные потребностиnodeокружающей среды, мы основаны наnodeизображение для создания нового изображения
5.2 Получитьnodeзеркало
docker pull node
5.3 Напишите Dockerfile, который будетexpressзаявлениеdockerизменять
FROM node
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 8080
CMD [ "npm", "start" ]
При построении образа зависимости node_modules напрямую передаются черезRUN npm installДля установки создайте проект в проекте.dockerignoreфайл, чтобы игнорировать некоторые пропущенные файлы:
node_modules
npm-debug.log
5.4 Сборка образа nodewebserver
Запустите команду сборки:
docker build -t nodewebserver .
5.5 Запустите контейнер NODSERVER
На основе только что созданного образа nodewebserver запустите контейнер с именем nodeserver, чтобы предоставить порт службы интерфейса 8080 и сопоставить порт хоста 5000.
docker run \
-p 5000:8080 \
-d --name nodeserver \
nodewebserver
Просмотр текущего процесса докера
docker ps
6. Междоменная переадресация
Хотите перенаправить запросы из контейнера vueApp в контейнер nodeserver. Сначала вам нужно знать контейнер nodeserveripАдрес и порт.На данный момент известно, что внутренняя служба контейнера nodeserver прослушивает порт 8080, и вам необходимо знатьipВот и все.
6.1 Просмотрите IP-адрес контейнера nodeserver:
Загляните внутрь контейнераipЕсть несколько способов, вот два:
- Зайдите внутрь контейнера, чтобы увидеть
docker exect -it 02277acc3efc bash
cat /etc/hosts
- docker inspect [ containerId ] Просмотр информации о контейнере напрямую:
docker inspect 02277acc3efc
Найдите в нем информацию о конфигурации, связанную с сетями:
6.2 Изменить конфигурацию nginx
- Расположение конфигурации Nginx указывает на службу узла default.conf (Что интерфейс хочет знать о NginxНа конкретной конфигурации было написано расположение Nginx может ссылаться (Одна статья, чтобы понять сопоставление местоположения Nginx))
- Добавьте правило перезаписи, которое перенаправляет /api/{path} на интерфейс /{path} целевой службы. Добавьте в предыдущий файл nginx/default.conf:
location /api/ {
rewrite /api/(.*) /$1 break;
proxy_pass http://172.17.0.2:8080;
}
После модификации я понял проблему: контейнер vueApp запускается на основе образа vuenginxcontainer, а конфигурация nginx default.conf была встроена прямо в него при сборке образа в самом начале. Поэтому, если вам нужно изменить default.conf, вы должны пересобрать новый образ, а затем запустить новый контейнер на основе нового образа.
7. Улучшения
Может ли новая конфигурация вступить в силу после перезапуска контейнера сразу после изменения файла конфигурации?Конечно, да.
При сборке образа конфигурация Nginx не копируется в образ, а монтируется напрямую на хост, после каждой модификации конфигурации контейнер можно перезапускать напрямую.
7.1 Изменить Dockerfile
Измените Dockerfile в проекте vueclidemo.
FROM nginx
COPY dist/ /usr/share/nginx/html/
COPY nginx/default.conf /etc/nginx/conf.d/default.conf
БудуCOPY nginx/default.conf /etc/nginx/conf.d/default.confКоманда удаляется, а конфигурация nginx монтируется на хост с помощью команды mount. посмотри сноваCOPY dist/ /usr/share/nginx/html/команда, если содержимое проекта dist/ каждый раз меняется, то нужно пройти операцию сборки нового образа и запуска нового контейнера заново, так что эту команду тоже можно удалить, а контейнер запустить монтированием .
7.2 Перезапустите контейнер приложения vue
Чтобы запустить контейнер vuenginxnew напрямую на основе образа nginx, выполните команду:
docker run \
-p 3000:80 \
-d --name vuenginxnew \
--mount type=bind,source=$HOME/SelfWork/docker/vueclidemo/nginx,target=/etc/nginx/conf.d \
--mount type=bind,source=$HOME/SelfWork/docker/vueclidemo/dist,target=/usr/share/nginx/html \
nginx
--mount type=bind,source={sourceDir},target={targetDir}Смонтируйте sourceDir хоста в каталог targetDir контейнера.- Команда для запуска здесь длинная. Если сложно каждый раз вводить заново, мы можем сохранить полную команду в
shellдокументvueapp.sh, а затем выполнить напрямуюsh vueapp.sh.
Таким образом, каждый раз, когда вы изменяете конфигурацию nginx или перестраиваете приложение vue, вам нужно только перезапустить контейнер, и изменения вступят в силу немедленно. В это время мы посетим сноваhttp://localhost:3000/api/jsonВы можете видеть, что интерфейс может нормально вернуться, указывая на то, что переадресация вступает в силу.
7.3 Настройка балансировки нагрузки
Внутренние службы, как правило, работают на двух или нескольких компьютерах, чтобы обеспечить стабильность службы. Мы можем запустить еще один контейнер серверной службы и изменить
nginxконфигурации для оптимизации использования ресурсов, увеличения пропускной способности, уменьшения задержки и обеспечения отказоустойчивости конфигураций.
На основе аналогичных операций в предыдущем разделе 4.5 запустите новый контейнер и на основе аналогичных операций в разделе 5.1 просмотрите IP-адрес нового контейнера (172.17.0.3).
немного отремонтироватьnginx/default.conf(Добавить восходящий поток, изменить proxy_pass в расположении /api/):
upstream backend {
server 172.17.0.2:8080;
server 172.17.0.3:8080;
}
……
location /api/ {
rewrite /api/(.*) /$1 break;
proxy_pass backend;
}
8. Запишите это
Студенты, не привыкшие к командной строке, могут выбратьKitematicсправлятьсяdockerСостояние контейнера, каталог данных и сеть. Все операции над емкостью можно визуализировать, поэтому я не буду здесь слишком много рассказывать, желающие студенты могут испытать это на себе.
9 Резюме
Docker обеспечивает очень мощный автоматизированный метод развертывания и гибкость, разделяет несколько приложений и обеспечивает гибкость разработки, управляемость и переносимость. В этой статье в качестве примера используется проект vue для реализации проекта разделения передней и задней части.dockerЯ надеюсь, что полные этапы развертывания немного помогут студентам, которые хотят освоить докер.
10 Tail by hand
Передовая команда Kuaigou Taxi занимается обменом передовыми технологиями и регулярно публикует высококачественные статьи. Добро пожаловать, обратите внимание и лайкните.
Справочные ресурсы
Что интерфейс хочет знать о Nginx
Одна статья, чтобы понять сопоставление местоположения Nginx