Развертывание интерфейсной эксплуатации и обслуживания

❝

Что касается эксплуатации и обслуживания, то я долгое время думал, что передок здесь ни при чем, надо сказать, что полтинник тут ни при чем. Однако с развитием фронтенд-инжиниринга постепенно ценятся знания об основных интерфейсных операциях и развертывании обслуживания.Если отдел эксплуатации и обслуживания вашей компании очень силен, то вы можете полностью игнорировать аспекты, связанные с эксплуатацией и обслуживанием. Просто Шу Цзян считает, что если вы хотите узнать больше об архитектуре интерфейса, вам все равно нужно иметь определенный запас знаний, связанных с эксплуатацией и обслуживанием. Конечно, производители облачных сервисов теперь хотят запускать свои собственные бессерверные сервисы (в следующей статье речь пойдет о ~), утверждая, что они делают интерфейс более ориентированным на развитие бизнеса, не беспокоясь о развертывании и обслуживании базовых приложений, которые могут быть более ориентированным на разработчиков Для развития бизнес-сферы заинтересованная детская обувь может пойти в игру

❞

1.npm

❝

npm — это официальный инструмент управления пакетами, предоставляемый Node.js. Он в основном используется для управления зависимостями проектов, выпусками и т. д. Вот несколько распространенных сценариев развертывания приложений. Здесь не представлены часто используемые команды npm.

❞

1.1 nrm

❝

nrm (менеджер реестра npm) — это инструмент управления источниками образов для npm, потому что ссылки, установленные npm по умолчанию, ведут к внешним ресурсам, а скорость доступа низкая, с помощью этого можно быстро переключаться между источниками npm.

❞

• Как установить

npm install -g nrm 

• Просмотр дополнительных ресурсов

nrm ls   

*npm ---- https://registry.npmjs.org/

cnpm --- http://r.cnpmjs.org/

taobao - http://registry.npm.taobao.org/

eu ----- http://registry.npmjs.eu/
...

• Добавить ссылку на частный репозиторий

nrm add name http://registry.npm.tree.com/  # 私有仓库链接
nrm use name # 使用本址的镜像地址    

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

1.2 Публикация пакета npm

❝

Какой процесс нам нужно выполнить, когда мы хотим опубликовать пакет npm?

❞

• Сначала зарегистрируйте учетную запись npm🔗
• настроить package.json

{
  "name": "kutil",
  "version": "1.0.0", #版本名称
  "scripts":[], # 可执行的脚本命令
  "repository": "https://github.com/xxx/xxx.git", #github仓库地址
  "author": "tree <shuxin_liu@kingdee.com>", #作者
  "description": "工具包“, #包的说明
  "keywords": [
    "utils",
  ]
}

• Настроить механизм упаковки

❝

Если это пакет инструментов, рекомендуется накопительный пакет, веб-пакет больше подходит для упаковки некоторых приложений, таких как SPA или изоморфные проекты.

❞

• Добавьте модульные тесты

❝

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

❞

• Документация по разработке readme.me

❝

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

❞

После выполнения вышеописанной серии операций, финальная ссылка релиза

npm login # 登录你上面注册的npm账号

npm publish # 登录成功后，执行发布命令

+ kutil@1.0.0 # 发布成功显示npm报名及包的版本号

2. jenkins

❝

В качестве расширяемого сервера автоматизации jenkins можно использовать как простой CI-сервер с такими функциями, как автоматическая сборка, тестирование и развертывание.Короче говоря, jenkins может облегчить нашу ежедневную итерацию обновления версии внешнего интерфейса (разработка, тестирование, производственная среда) д.), через него также можно автоматизировать ряд операций, в том числе: компиляцию, упаковку, мета-тестирование, сканирование кода и т. д., официальную документацию

❞

2.1 Как установить

• Скачать Дженкинс.

• Откройте терминал и перейдите в каталог загрузки.

• Команда выполненияjava -jar jenkins.war --httpPort=8080.

• Откройте браузер и перейдите по ссылке http: // localhost: 8080.

• Следуйте инструкциям для завершения установки.

Подробная блок-схема может относиться кАвтоматическое развертывание внешнего интерфейса Jenkins + github

2.2 Автоматическое развертывание с интерфейсными проектами

❝

Эта статья в основном знакомит с использованием конфигурации конвейера jenkins. Код конвейера определяет весь процесс сборки, который обычно включает этапы сборки, тестирования и доставки приложения. Ниже приведена конфигурация пути и хранилища.

❞

Конфигурация, связанная с изображением, выглядит следующим образом:

• SCM: выберите git или svn в качестве триггера кода
• Путь к сценарию: создайте файл jenkins в корневом каталоге проекта для записи конвейера.

Далее представлена ​​простая версия метода написания задач конвейера jenkinsfile для завершения компиляции и упаковки, статического сканирования, модульного тестирования и других ссылок, связанных со всем развертыванием переднего плана.

def gitUrl = "http://gitlab.****.com/shc/****.git"//GIT入口（随不同工程改变）
def gitCred = "***-***-4f00-a926-1848b670d97b"    //GIT 身份凭据
if ("DEV" == buildType) {
    buildScript = "build_development"
    try {
        node('k8s') {
            stage('下拉源码') {
                   checkout([$class: 'GitSCM', branches: [[name: '*/master']], doGenerateSubmoduleConfigurations: false, extensions: [], submoduleCfg: [], userRemoteConfigs: [[credentialsId: "${gitCred}", url: "${gitUrl}"]]])
                 #可由片段生成器生成，选择示例步骤 “checkout:Check out from version control”，生成流水线脚本获取
            }
            checkStatus('下拉源码')
            stage('代码构建编译') {
                sh "yarn run ${buildScript}"
            }
            checkStatus('代码构建编译')
            stage('代码静态扫描') {
                sh 'yarn run lint'
            }
            checkStatus('代码静态扫描')
            stage('单元测试') {
                 sh 'yarn run unit'
            }
            checkStatus('单元测试')
        }
    } catch(Exception e) {
       
    }
} 

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

3.Docker

❝

Docker — это контейнер виртуальной среды, который может упаковывать среду разработки, код, файлы конфигурации и т. д. в этот контейнер и, наконец, публиковать приложение.

❞

3.1 Как использовать

❝

Завершите традиционный процесс развертывания, централизовав операции развертывания в сценарии развертывания, и запустите клиентские приложения, запустив контейнеры Docker на сервере.

❞

Как установить

yum install docker-ce

Каталог проекта, проект развертывания должен подготовить Dockerfile и nginx.conf (если nginx не настроен, вы можете напрямую использовать официальный образ)

3.2 Конфигурация Dockerfile

❝

Dockerfile — это файл конфигурации, используемый для того, чтобы сделать команду сборки docker понятной для запуска этих операций, создания файла dockerfile и записи связанных конфигураций.

❞

FROM node:latest as builder 
WORKDIR /app
COPY package.json 
RUN npm install   
COPY . .
RUN npm run build


FROM nginx:latest
COPY nginx.conf /etc/nginx
COPY --from=builder /app/dist  /usr/share/nginx/html

//ps: 每一个指令的前缀都必须是大写的。

• ДОБАВИТЬ и КОПИРОВАТЬ: Скопируйте файл или каталог в образ, созданный Dockerfile.
• EXPOSE: указывает порт, используемый контейнером, на котором запущен образ, которых может быть несколько.
• RUN : директива указывает докеру выполнить команду внутри образа.
• FROM : имя образа, указанное FROM, это изображение называется базовым изображением и должно быть в первой инструкции без комментариев.
• Workdir: Установите рабочий каталог внутри контейнера

Nginx.conf настроен следующим образом

events {
    worker_connections  1024;
}
http{
    server {
        listen       80;
        server_name  localhost;
        location / {
            root   /usr/share/nginx/html;
            index  index.html index.htm;
        }   
    }
}

После создания файла и его записи используйте докер для создания образа.

3.3 Как создать образ

❝

Создайте образ с Dockerfile текущего каталога с пометкой frontend.

❞

docker build -t frontend .

• -t : указывает целевое изображение для создания
• . : каталог, в котором находится файл Dockerfile, можно указать абсолютный путь к файлу Dockerfile.

Изображение успешно создано

3.4 Просмотр изображения

docker image ls | grep frontend

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

4.5 Как начать

❝

Используйте внешний интерфейс образа докера: последний, чтобы запустить контейнер в указанном режиме сопоставления порта 80, и назовите внешний интерфейс контейнера.

❞

docker run --name frontend -p 80:80 frontend:latest

• -p: указать сопоставление портов в следующем формате: хост (хост) порт: порт контейнера Сопоставить порт 80 хоста с портом 80 контейнера
• -name: указать имя для контейнера;

Завершите развертывание докера

Docker также можно интегрировать в конвейер автоматического развертывания jenkins, описанный в предыдущем разделе.

  stage('部署到开发联调环境') {
                echo "auto deploy to test environment"
                sh "docker build -t frontend ."
                sh "docker run --name frontend -p 80:80 frontend:latest"
  }

4.PM2

❝

PM2 - это инструмент управления процессом узла, вы можете использовать его для упрощения громоздких задач во многих приложениях узла. Это незаменимый выбор для демона приложения NODEJS. Удобно управлять веб-сервисами, которые могут иметь независимо от доступа к платформе Nodejs такие как Nextjs. Express, KOA и другие предельные приложения

❞

4.1 Общие сценарии применения

• Разверните узел koa2 или экспресс-проектное приложение
• Разверните интерфейсные приложения SSR (внутренняя обработка), такие как nuxt.js (Vue) и next.js (React), для создания фреймворков приложений обработки на стороне сервера.

4.2 Как использовать

• Установить :npm install -g pm2
• Запустите проект узла:pm2 start app.js 或者 pm2 start bin/www
• Остановите службу PM2:pm2 stop bin/www
• Остановить все службы pm2:stop all
• Перезапустите службу pm2:pm2 restart bin/www
• pm2 вся информация о процессе:pm2 list

После запуска выглядит так

4.3 Расширенные приложения

❝

Добавьте process.json в корневой каталог проекта.

❞

{
 #apps是一个数组，每一个数组成员就是对应一个pm2中运行的应用
  "apps": [{
    "name": "app",  #名称
    "script": "./", #程序入口
    "cwd": "./",           #应用程序所在的目录
    "error_file": "./logs/err.log",#错误输出日志
    "log_date_format": "YYYY-MM-DD HH:mm Z" #日期格式
  }]
}

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

"script":{
    "pm2":"pm2 start processes.json"
}

См. дополнительные команды и информацию о конфигурациидокументация pm2

5.Nginx

❝

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

❞

5.1 Эти вещи о внешнем интерфейсе Nginx

Для получения подробной информации см. предыдущуюВнешний интерфейс Nginx

5.2 Дополнение

• выпуск оттенков серого

❝

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

❞

Традиционная градация серого предназначена для распределения трафика на сервер через Nginx. Вот простая конфигурация правила градации серого. Хорошо настроить правила маршрутизации в nginx. Если правила сложные, вы можете комбинировать nginx + lua для работы в градациях серого. Логика

1. Реализуйте публикацию в оттенках серого в соответствии с файлом cookie.

❝

Различайте, получая номер версии, установленный файлом cookie.

❞

upstream test1 {
    server 192.168.0.1:8080 max_fails=1 fail_timeout=60;
}

upstream default {
    server 192.168.0.0:8080 max_fails=1 fail_timeout=60;
}

server {
  listen 80;
  server_name  www.****.com;
  set $group "default";
    if ($http_cookie ~* "version=V1"){
        set $group test1;
    }

  location / {                       
    proxy_pass http://$group;
    proxy_set_header   Host             $host;
    proxy_set_header   X-Real-IP        $remote_addr;
    proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
    index  index.html index.htm;
  }
 }

2. Реализовать публикацию в оттенках серого в соответствии с IP

❝

Различать по внутреннему и внешнему сетевому IP

❞

upstream test1 {
    server 192.168.0.1:8080 max_fails=1 fail_timeout=60;
}

upstream default {
    server 192.168.0.0:8080 max_fails=1 fail_timeout=60;
}

server {
  listen 80;
  server_name  www.xxx.com;
  set $group default;
  if ($remote_addr ~ "10.0.0.110") {
      set $group test1;
  }

location / {                       
    proxy_pass http://$group;
    proxy_set_header   Host             $host;
    proxy_set_header   X-Real-IP        $remote_addr;
    proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
    index  index.html index.htm;
  }
}

Пожалуйста, выпейте 🍵 Не забудьте подключиться три раза~

1. После прочтения не забудьте поставить лайк 🌲 соусу, там есть 👍 и мотивация

2. Обратите внимание на интересные вещи в интерфейсе официального аккаунта и пообщайтесь с вами об интересных вещах в интерфейсе.

3. Статья размещена на GithubfrontendThingsСпасибо, Стар✨

В этой статье используетсяmdniceнабор текста