DevUI – это команда, которая занимается как проектированием, так и проектированием, обслуживая HUAWEI CLOUD.DevCloudПлатформа и несколько промежуточных и серверных систем в Huawei предназначены для дизайнеров и проектировщиков.
Официальный сайт:devui.design
Библиотека компонентов Ng:ng-devui(Добро пожаловать в Звезду)
Официальное сообщение: добавление помощника DevUI (официальный devui)
Плагин DevUIHelper: DevUIHelper-LSP (Добро пожаловать в Star)

предисловие

Эта статья начинается сБиблиотека компонентов DevUIВозьмите веб-сайт в качестве примера, чтобы показать, как использовать конвейер DevCloud для автоматического развертывания внешнего приложения.

Эта статья может быть рассмотрена как«Научит вас создавать собственную библиотеку компонентов Angular»Продолжение, когда мы создаем библиотеку компонентов, как развернуть свой веб-сайт на сервере.

1 Настройте серверную среду

После того, как код разработан локально и отправлен в удаленный репозиторий кода, его необходимо развернуть на сервере, чтобы пользователи могли получить к нему доступ.

Таким образом, чтобы развернуть ваше приложение, первым шагом является покупка сервера. В целях экономии вы обычно покупаете облачный сервер для использования по требованию. Как подать заявку на облачный сервер не будет представлено. Следующее описывает, как создать службу Nginx на сервере Linux.

1.1 Установите Nginx

Веб-приложения обычно используют Nginx в качестве обратного прокси-сервера.

Чтобы пользователи могли получить доступ к нашему приложению, на сервере необходимо установить приложение Nginx.

Мы используем компиляцию исходного кода для установки последней версии Nginx, которая в основном делится на следующие шаги:

• скачать
• распаковать
• настроить
• компилировать
• Установить

1.1.1 Загрузите исходный код Nginx

доСтраница загрузки официального сайта NginxНайдите адрес исходного пакета Nginx для Linux, а затем используйте команду wget для загрузки исходного установочного пакета Nginx.

wget http://nginx.org/download/nginx-1.18.0.tar.gz

1.1.2 Декомпрессия

Разархивируйте его с помощью команды tar.

tar -zxvf nginx-1.18.0.tar.gz

1.1.3 Конфигурация

Сначала введите корневую директорию исходного кода nginx, а затем выполните скрипт настройки конфигурации.Здесь настраивается только директория установки nginx.

cd nginx-1.18.0
./configure --prefix=/usr/local/nginx

После выполнения обнаружилось, что сообщалось об ошибке.Оказалось, что отсутствует библиотека зависимостей.

[root@ecs-kagol nginx-1.18.0]# ./configure --prefix=/usr/local/nginx
checking for OS
 + Linux 3.10.0-862.14.1.5.h428.eulerosv2r7.x86_64 x86_64
checking for C compiler ... found
 + using GNU C compiler
 + gcc version: 4.8.5 20150623 (EulerOS 4.8.5-28) (GCC)
checking for gcc -pipe switch ... found
...
checking for PCRE library in /usr/local/ ... not found
checking for PCRE library in /usr/include/pcre/ ... not found
checking for PCRE library in /usr/pkg/ ... not found
checking for PCRE library in /opt/local/ ... not found

./configure: error: the HTTP rewrite module requires the PCRE library.
You can either disable the module by using --without-http_rewrite_module
option, or install the PCRE library into the system, or build the PCRE library
statically from the source with nginx by using --with-pcre=<path> option.

В основном нужно установитьpcre/zlib/opensslТри зависимые библиотеки, мы используем инструмент управления пакетами yum (аналогичный инструменту управления пакетами Node npm) для установки.

yum -y install pcre-devel zlib-devel openssl-devel

После установки зависимой библиотеки снова запустите скрипт configure, Nginx успешно настроен, и результаты настройки следующие:

...
checking for getaddrinfo() ... found
checking for PCRE library ... found
checking for PCRE JIT support ... found
checking for zlib library ... found
creating objs/Makefile

Configuration summary
  + using system PCRE library
  + OpenSSL library is not used
  + using system zlib library

  nginx path prefix: "/usr/local/nginx"
  nginx binary file: "/usr/local/nginx/sbin/nginx"
  nginx modules path: "/usr/local/nginx/modules"
  nginx configuration prefix: "/usr/local/nginx/conf"
  nginx configuration file: "/usr/local/nginx/conf/nginx.conf"
  nginx pid file: "/usr/local/nginx/logs/nginx.pid"
  nginx error log file: "/usr/local/nginx/logs/error.log"
  nginx http access log file: "/usr/local/nginx/logs/access.log"
  nginx http client request body temporary files: "client_body_temp"
  nginx http proxy temporary files: "proxy_temp"
  nginx http fastcgi temporary files: "fastcgi_temp"
  nginx http uwsgi temporary files: "uwsgi_temp"
  nginx http scgi temporary files: "scgi_temp"

Мы заметили, что после выполнения скрипта конфигурации генерируется файл Makefile, который используется для компиляции исходного кода Nginx.

1.1.4 Компиляция

По сравнению с настройкой этапы компиляции намного проще, достаточно выполнить команду make.

make

1.1.5 Установка

После компиляции он устанавливается, и этот шаг фактически сгенерирует соответствующие файлы в каталоге /usr/local/nginx.

make install

После установки все файлы, необходимые для запуска приложений Nginx, были сгенерированы в каталоге /usr/local/nginx.

1.1.6 Запустите и запустите Nginx

Выполните sbin/nginx в каталоге nginx, чтобы запустить Nginx напрямую.

/usr/local/nginx/sbin/nginx

1.1.7 Убедитесь, что запуск прошел успешно

Введите общедоступный IP-адрес сервера в локальном браузере, чтобы получить доступ к приложению Nginx.

Здесь отображается страница приветствия Nginx.После развертывания нашего веб-приложения на этой веб-странице будет отображаться домашняя страница нашего собственного веб-сайта.

2 Процесс развертывания вручную

После того, как мы разработаем код веб-сайта DevUI на этой машине, выполните сборку npn run, В это время мы получим все файлы статических ресурсов веб-сайта DevUI в каталоге dist, который можно сначала использовать локально.anywhereПосмотрите на эффект.

Для того, чтобы развернуть его на сервер и получить к нему доступ через сервер Nginx, нам нужно эти файлы залить в директорию nginx сервера.Передавать файлы по одному точно нереально.Его нужно сжать и запаковать,потом загружается на сервер и, наконец, распаковывается в html каталога nginx, даже если развертывание завершено.

Шаг 1: Сжать и упаковать tar

Шаг 2: Разархивируйте и разверните

2.1 Прессование и упаковка

Статические ресурсы, созданные с помощью npm run build, хранятся в каталоге dist.Для создания tar-архива вам нужно всего лишь выполнить следующую команду:

tar czvf devui.tar.gz ./dist

2.2 Распаковка и развертывание

Войдите на сервер, используйте команду rz, чтобы загрузить пакет tar, сгенерированный на предыдущем шаге, на сервер Linux, а затем используйте команду tar, чтобы распаковать его в каталог html nginx для завершения развертывания.

tar zxvf devui.tar.gz

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

Почему бы не автоматизировать это?

3 Используйте конвейер DevCloud для автоматического развертывания

DevCloudЭто платформа разработки программного обеспечения, которая объединяет методы исследований и разработок Huawei, передовые концепции исследований и разработок и передовые инструменты исследований и разработок.Для автоматизации развертывания веб-приложений нам в основном необходимо использовать DevCloud.流水线/编译构建/发布/部署4 услуги.

В основном делится на следующие 4 этапа:

1. Создайте проект DevCloud
2. Создать конвейер
3. Создать задачу сборки
4. Создание задачи развертывания

3.1 Создайте проект DevCloud

Поскольку все сервисы DevCloud размещаются через проекты, вам нужно сначала создать проект, вот проект Канбан.

войти первымГлавная страница DevCloud, выполните следующие действия, чтобы создать проект Канбан:

1. Нажмите «Создать проект» в правом верхнем углу.
2. Выберите канбан-проект
3. Введите название проекта
4. Конечно

После успешного создания проекта перейдите непосредственно на домашнюю страницу проекта и щелкните меню заголовка.构建&发布вниз流水线Нажмите кнопку для перехода на главную страницу сборочной линии.

3.2 Создайте конвейер

В правом верхнем углу главной страницы конвейера есть кнопка для создания конвейера. Нажмите, чтобы войти в процесс создания конвейера.

Создание пайплайна в основном делится на следующие этапы:

• Введите имя конвейера
• Выбираем шаблон, здесь выбираем пустой шаблон
• Выберите источник кода, просто используйте репозиторий кода Github напрямую.
• Пользовательский рабочий процесс

Выберите источник кода

Чтобы выбрать источник репозитория кода Github, нам нужно добавить точку расширения службы и получить авторизацию Github, чтобы конвейер DevCloud мог получить код Github для построения, развертывания и других шагов.

Шаги по добавлению точки расширения также очень просты:

• Введите имя точки расширения
• Выполнить авторизацию OAuth

С точками расширения вы можете выбрать репозиторий Github в качестве источника кода.

После выбора источника кода вы можете создать свой конвейер.

Конвейер, который можно создать заново, состоит из 3 этапов: первый этап связан с репозиторием кода Github, второй этап — это пустой этап сборки без задач, а третий этап — нередактируемый этап репозитория выпуска.

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

3.3 Создание задачи сборки

Просмотрите предыдущие шаги развертывания вручную:

1. исходный код сборки
2. Сжатый исходный код
3. Загрузить пакет на сервер
4. Разархивируйте пакет в каталог Nginx

Итак, сначала нам нужно добавить задачу сборки в конвейер:

1. Добавить задачу типа сборки в фазу сборки
2. Создать задачу сборки
3. Выберите конвейер, созданный на предыдущем шаге в выборе конвейера.

3.3.1 Добавление задачи типа сборки в фазу сборки

Добавьте задачу на этапе сборки, а затем выберите тип сборки на слайде. В настоящее время задачи сборки для этого типа нет, поэтому выбора нет, и сначала необходимо создать задачу сборки.

3.3.2 Создание задачи сборки

Нажмите кнопку «Создать» в задаче, которую нужно запланировать, чтобы перейти на страницу новой задачи сборки, и следуйте инструкциям, чтобы создать задачу сборки:

1. Введите имя задачи сборки
2. Выберите экземпляр Entpoint, который мы создали ранее, и репозиторий Github в этом примере.
3. Создавайте напрямую, без использования шаблонов
4. Добавьте два этапа сборки Npm, загрузите пакеты и опубликуйте библиотеки (ключ)
5. Настроить параметры сборки

сборка нпм

На этом шаге напрямую используется команда сценария сборки по умолчанию, и нужно только добавить команду пакета tar:

...

npm install # 安装依赖库

npm run build # 普通的NG CLI生产包构建命令

npm run tar # 新增

команда смолы:

"tar": "node scripts/tar.js",

tar.js

const fs = require('fs');
const tar = require('tar');

fs.stat('./result', (error, stats) => {
  if (error) {
    fs.mkdirSync('./result'); // 不存在result目录则创建一个空的
  }

  tar.c({ gzip: true }, ['dist']) // 将dist目录下的文件全部打包
  .pipe(fs.createWriteStream('./result/devui.tar.gz')); // 将生成的tar包（devui.tar.gz）放到result目录下
});

Загрузите пакет в репозиторий релиза

Архив был создан на последнем этапе сборки Npm. Целью этой задачи является загрузка архива в репозиторий выпуска, который является третьим этапом в предыдущем конвейере, чтобы архив можно было загрузить на целевой сервер во время развертывания. .

На этом шаге в основном необходимо указать путь к пакету сборки:

./result/devui.tar.gz

Номер версии выпуска и имя пакета не должны быть жестко заданы, а браться из параметров развертывания в следующем формате:

${releaseVersion}

вreleaseVersionЭто параметры сборки, которые необходимо настроить на следующем шаге.

Настроить параметры сборки

codeBranch — параметр по умолчанию, нам нужно добавить два параметра сборки releaseVersion и serviceName, один — это номер версии для каждой сборки, а другой — имя службы.

3.3.3 Выберите конвейер, созданный на предыдущем шаге в выборе конвейера

Вернувшись к конвейеру, вы можете выбрать конвейер, созданный на предыдущем шаге, и сохранить его.

На этом этапы сборки завершены, можно пробовать.

После запуска конвейера мы можем увидеть наш пакет сборки tar в репозитории релиза:

С пакетом сборки мы можем развернуть его на сервер, конечно, мы не выберем ручное развертывание, а создадим задачу развертывания в пайплайне для автоматизации всех процессов.

3.4 Создание задачи развертывания

Добавление задачи развертывания в конвейер аналогично добавлению задачи сборки и требует только следующих 3 шагов:

1. добавить новый этап
2. Добавить задачу типа развертывания на этап
3. Создание задачи развертывания (критично)
4. На шаге 2 выберите задачу развертывания, созданную на шаге 3.

Создать задачу развертывания

Аналогично созданию задачи сборки:

1. Введите имя задачи развертывания
2. Выберите пустой шаблон и создайте его напрямую
3. Добавьте два шага сборки: выбор источника развертывания и выполнение команды оболочки (ключ).
4. Настроить параметры развертывания

Выберите источник развертывания

Ключ в том, чтобы выбрать主机组,Заполнить软件包а также部署目录.

Пакет — это пакет ранее выпущенного репозитория, непосредственно из/devui/${releaseVersion}можно взять, где${releaseVersion}параметры развертывания, аналогичные предыдущим параметрам сборки.

Каталог развертывания — это каталог, в который tar-архив должен быть загружен на целевую машину.Мы передаем его в/devuiв каталоге.

Группу хостов нужно создать, выбираем рядом с группой хостов新建кнопку, чтобы перейти на страницу «Создать группу хостов», для создания группы хостов необходимо выполнить следующие шаги:

1. Введите имя группы хостов
2. Добавьте хост (эластичный облачный хост ECS, на который вы подавали заявку ранее)

Информация, которую необходимо заполнить для добавления хоста:

1. Имя процессора
2. IP-адрес хоста
3. Имя пользователя (корень)
4. пароль
5. номер порта (22)

выполнять команды оболочки

Выполнение команды оболочки — это команда оболочки, которую вы хотите выполнить после загрузки пакета tar на целевой сервер.Конечно, мы хотим распаковать пакет tar.

Выполните следующую оболочку:

rm -rf /usr/local/nginx/html/* # 删除之前部署过的静态资源
tar zxvf /devui/${serviceName}.tar.gz -C /usr/local/nginx/html # 解压tar包到nginx的html目录
mv /usr/local/nginx/html/dist/* /usr/local/nginx/html/

Настроить параметры развертывания

Параметры развертывания и параметры сборки настраиваются одинаково и здесь повторяться не будут.

После добавления задачи развертывания мы можем запустить конвейер и увидеть результат.

После завершения конвейера все четыре этапа будут отображаться зеленым цветом:

После развертывания посетите наш IP-адрес хоста, чтобы увидеть эффект веб-сайта, иОфициальный сайт DevUIэто то же самое.

3.5 Запланированные задачи

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

Чтобы обеспечить качество версии, мы также можем настроить стратегию развертывания в градациях серого и добавить задачи набора номера и тестирования, чтобы гарантировать, что каждое развертывание в действующей сети не будет неудачным.

Из-за ограниченного места я не буду представлять их по одному, заинтересованные партнеры могут обратить внимание наОфициальный сайт DevCloud, в котором подробно описывается игровой процесс всего процесса DevOps от планирования спроса до исследований и разработок, тестирования, эксплуатации и обслуживания.

4 Резюме

В этой статье подробно описывается, как автоматически развернуть исходный код репозитория Github веб-сайта на сервер.

Сначала представьте сервер приложений и создайте серверную среду, сосредоточившись на шагах по созданию службы Nginx на сервере Linux;

Затем кратко представил процесс ручного развертывания;

Наконец, в нем подробно рассказывается, как использовать конвейерный инструмент DevCloud для реализации автоматического развертывания.

Присоединяйтесь к нам

Мы команда DevUI, приглашаем вас приехать сюда, чтобы вместе с нами создать элегантную и эффективную систему человеко-машинного проектирования/исследований и разработок. Электронная почта для приема на работу:muyang2@huawei.com.

Текст/DevUI Кагол

Рекомендуемые статьи в прошлом

«Теперь начните писать для своего приложения Angular»

«Темный режим веб-интерфейса и разработка тем»

"Научить вас, как создать среду публикации в оттенках серого"