Научите, как развертывать интерфейсные проекты с помощью Github Actions.

внешний интерфейс GitHub
Научите, как развертывать интерфейсные проекты с помощью Github Actions.

Это 96-я оригинальная статья без воды.Если вы хотите получить больше оригинальных статей, выполните поиск в общедоступном аккаунте и подпишитесь на нас~ Эта статья была впервые опубликована в блоге Zhengcaiyun:Научите, как развертывать интерфейсные проекты с помощью Github Actions.

明昼.png

Зачем использовать Github Actions?

Как мы все знаем, внешнее развертывание — это не что иное, как добавление упакованного кода в html-каталог nginx, и все готово, но всякий раз, когда продукт нужно часто менять или даже просто просят изменить слово в строке, вы всегда необходимо повторить следующие действия: изменить, упаковать, войти на сервер, загрузить код и перезапустить сервер. Время идет, не говоря уже о том, что ты больше не можешь этого выносить, ты не можешь этого выносить, даже если ты смотришь на меня рядом с этим. Вы когда-нибудь думали о том, чтобы иметь робота, который мог бы помочь нам выполнять эти повторяющиеся и неквалифицированные задачи? Да, как вы уже догадались, Github Actions — это тот бот, который нам нужен.

Что такое действия Github?

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

Давайте разберем процесс разработки обычных требований (как показано на рисунке выше). Вышеуказанные операции можно использовать повторно. Используя эту концепцию, Github интегрирует рынок действий, позволяя разработчикам писать операции как независимые скрипты и публиковать их на рынке действий, разрешая все, что используется разработчиками, это немного похоже на плагин в npm и vscode.

Github предоставляет нам сервер со следующей конфигурацией для запуска действий, соответствующих нашей конфигурации.

  • 2-core CPU
  • 7 GB of RAM memory
  • 14 GB of SSD disk space

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

Начало работы: разверните свой собственный интерфейсный проект

1. Выберите репозиторий проекта Github.

Здесь я выбираю проект, который я сделал, когда я начал изучать vue давным-давно, чтобы имитировать bilibilibilibili-vue, войдите в репозиторий проекта, вы можете увидеть соответствующую вкладку Actions, нажмите, чтобы войти.

2. Создайте новый рабочий процесс и настройте действия.

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

Здесь, поскольку я чисто фронтенд-проект, я выбираю шаблон Node.js.

Нажмите на шаблон node.js, он автоматически окажется в проекте.github/workflows 目录下生成 node.js.ymlфайл, мы можем изменить имя файла на имя нашего рабочего процесса. Конечно, здесь можно настроить и использовать множество рабочих процессов.ymlТакие файлы, как deploy.yml, test.yml, gh-page.yml и т. д.

# workflow名称。省略的话，默认为当前workflow文件名
name: Node.js CI
# 触发workflow的条件，
on:
push:
# 只有master分支发生push事件时，才会触发workflow
branches: [ master ]
pull_request:
branches: [ master ]
# jobs表示执行的一项或多项任务
jobs:
# 任务的job_id，具体名称自定义，这里build代表打包
build:

# runs-on字段指定运行所需要的虚拟机环境。注意：这个是必填字段
runs-on: ubuntu-latest
# 用于配置当前workflow的参数
strategy:
matrix:
node-version: [10.x, 12.x, 14.x, 15.x]
# See supported Node.js release schedule at https://nodejs.org/en/about/releases/
# steps字段指定每个job的运行步骤，可以包含一个或多个步骤，每个步骤都可以配置指定字段
steps:
# 切代码到 runner
- uses: actions/checkout@v2
# 在当前操作系统安装node
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v1
with:
node-version: ${{ matrix.node-version }}
# 该运行的命令或者action
# 安装依赖、运行测试、打包
    - run: npm install
    - run: npm test
    - run: npm run build

3. Конфигурация общих действий

Создать релиз тега

Здесь мы используем Action MarketplaceCreate Tag Releaseплагин

on:
  push:
    # Sequence of patterns matched against refs/tags
    tags:
      - 'v*' # Push events to matching v*, i.e. v1.0, v20.15.10
name: Create Release
jobs:
  build:
    name: Create Release
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@master
      - name: Create Release
        id: create_release
        uses: actions/create-release@latest
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} # This token is provided by Actions, you do not need to create your own token
        with:
          tag_name: ${{ github.ref }}
          release_name: Release ${{ github.ref }}
          body: |
            Changes in this Release
            - First Change
            - Second Change
          draft: false
          prerelease: false

Создайте сайт Github Pages

Здесь мы используем Action MarketplaceGitHub Pages v3плагин

name: github pages
	on:
	  push:
	    branches:
	      - master # default branch
	jobs:
	  deploy:
	    runs-on: ubuntu-18.04
	    steps:
	      - uses: actions/checkout@v2
	      - run: npm install
	      - run: npm run docs:build
	      - name: Deploy
	        uses: peaceiris/actions-gh-pages@v3
	        with:
	          github_token: ${{ secrets.GITHUB_TOKEN }}
	          publish_dir: ./docs-dist

Совместная разработка несколькими людьми, обнаружение облачного кода

name: Test
	
	on: [push, pull_request]
	
	jobs:
	  lint:
	    runs-on: ubuntu-latest
	    steps:
	    - uses: actions/checkout@v2
	    - uses: actions/setup-node@v1
	      with:
	        node-version: '12.x'
	
	    - name: Install dependencies
	      uses: bahmutov/npm-install@v1
	
	    - name: Run linter
	      run: npm run lint
	
	  test:
	    runs-on: ubuntu-latest
	    steps:
	    - uses: actions/checkout@v2
	    - uses: actions/setup-node@v1
	      with:
	        node-version: '12.x'
	
	    - name: Install dependencies
	      uses: bahmutov/npm-install@v1
	
	    - name: Run test
	      run: npm test
	
	  build:
	    runs-on: ubuntu-latest
	    steps:
	    - uses: actions/checkout@v2
	    - uses: actions/setup-node@v1
	      with:
	        node-version: '12.x'
	
	    - name: Install dependencies
	      uses: bahmutov/npm-install@v1
	
	    - name: Build
	      run: npm run build

Выше приведены некоторые распространенные конфигурации в Github, болееКонфигурация действийВы можете обратиться к официальному сайту.

4, с докером

Зачем использовать докер?

До того, как не было докера, я использовал веб-хук для автоматического развертывания, но позже, когда срок действия сервера истек и я заменил сервер, я мог только повторять операции одну за другой для выполнения миграции, и управление каталогом файлов было хаотичным. проектов увеличились, стоимость обслуживания увеличилась. Давайте рассмотрим пять основных преимуществ докера: непрерывная интеграция, контроль версий, переносимость, изоляция и безопасность — используются ли они для решения проблем, с которыми мы столкнулись выше?

Пример:bilibili-vue, студенты, которые не понимают, могут обратиться к моей конфигурации.

4.1 Создайте новую конфигурацию Nginx в корневом каталоге проекта

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

server {
listen 80;
server_name localhost;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
proxy_set_header Host $host;
if (!-f $request_filename) {
rewrite ^.*$ /index.html break;
}
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}

4.2 Новый корневой каталог проектаDockerfileдокумент

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

FROM nginx
COPY ./dist/ /usr/share/nginx/html/
# 第一步nginx配置文件名称
  COPY ./vhost.nginx.conf /etc/nginx/conf.d/bilibili-vue.conf
EXPOSE 80

4.3 Настройка службы образов контейнеров

Здесь я выбираюОблако AlibabaСлужба образов контейнеров, почему бы не использовать иностранныйdockhubНу, потому что это быстрее в использовании, и есть бесплатная персональная версия, которой нам достаточно для использования.

4.3.1 Первый шаг

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

4.3.2 Второй шаг

Затем создайте пространство имен, а затем создайте наше хранилище зеркал, где вы можете выбрать частное, если не хотите, чтобы другие загружали ваше зеркало. Затем нажмите «Далее», чтобы настроить источник кода. Здесь я выбираю локальный репозиторий. С одной стороны, это для унификации журналов, и все журналы можно увидеть в Github Actions. С другой стороны, образ можно напрямую отправить в зеркальный репозиторий через командную строку, которая имеет относительно высокую степень свободы.

4.3.3 Третий шаг

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

4.4 Как связать с действиями

Нам нужно только войти в экземпляр Alibaba Cloud Registry после сборки образа в Actions.Однако в это время, если открытый текст будет напрямую записан в yml, это точно не сработает.Github давно помогает нам в этом. , Вернитесь к проекту Github и следуйте инструкциям. Нажмите «Настройки» => «Секреты» => «Новый секрет репозитория», установите секрет и настройте имя пользователя (имя пользователя Alibaba Cloud) и пароль указанной выше учетной записи образа контейнера (набор пароля для входа в систему). при настройке службы образа контейнера выше).

5. Завершите действия

name: Docker Image CI # Actions名称
on: [push] # 执行时机
jobs:

# 这里我使用的是yarn，想用npm的同学将yarn命令修改为npm命令即可
build:
runs-on: ubuntu-latest
steps:
- name: checkout
uses: actions/checkout@master
# 安装依赖
- name: install
run: yarn
# 打包
- name: build project
run: yarn run build

# 打包镜像推送到阿里云容器镜像服务
- name: Build the Docker image
run: |
docker login --username=${{ secrets.DOCKER_USERNAME }} registry.cn-hangzhou.aliyuncs.com --password=${{ secrets.DOCKER_PASSWORD }}
docker build -t bilibili-vue:latest .
docker tag bilibili-vue registry.cn-hangzhou.aliyuncs.com/zlyyyy/bilibili-vue:latest
docker push registry.cn-hangzhou.aliyuncs.com/zlyyyy/bilibili-vue:latest # 推送
- name: ssh docker login # 使用appleboy/ssh-action@master登录服务器执行拉取镜像脚本，服务器ip、用户名、密码配置方式同容器镜像服务配置方式一样
uses: appleboy/ssh-action@master
with:
        host: ${{ secrets.SSH_HOST }} 
username: ${{ secrets.SSH_USERNAME }}
password: ${{ secrets.SSH_PASSWORD }}
script: cd ~ && sh bilibili-vue-deploy.sh ${{ secrets.DOCKER_USERNAME }} ${{ secrets.DOCKER_PASSWORD }}

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

echo -e "---------docker Login--------"
docker login --username=$1 registry.cn-hangzhou.aliyuncs.com --password=$2
echo -e "---------docker Stop--------"
docker stop bilibili-vue
echo -e "---------docker Rm--------"
docker rm bilibili-vue
docker rmi registry.cn-hangzhou.aliyuncs.com/zlyyyy/bilibili-vue:latest
echo -e "---------docker Pull--------"
docker pull registry.cn-hangzhou.aliyuncs.com/zlyyyy/bilibili-vue:latest
echo -e "---------docker Create and Start--------"
docker run --rm -d -p 8081:80 --name bilibili-vue registry.cn-hangzhou.aliyuncs.com/zlyyyy/bilibili-vue:latest
echo -e "---------deploy Success--------"

6. Процесс тестирования, просмотр журнала

Мы запускаем тест кода, и после открытия Actions мы можем видеть результаты автоматического запуска рабочего процесса в реальном времени, а также информацию журнала каждого шага.

Суммировать

На данный момент наше автоматическое развертывание прошло успешно.Нам больше не нужно каждый раз модифицировать код, вручную обновлять онлайн, и последующая миграция будет более удобной.Конечно, есть более автоматизированные методы развертывания, такие как прямое использование триггер Github + Alibaba Cloud Image Warehouse То же самое можно сделать, и контейнерные услуги не ограничиваются Alibaba Cloud.Tencent Cloud и другие поставщики облачных услуг также используют тот же способ. Выше приведены некоторые итоги моего личного использования Actions. Если есть какие-либо ошибки, пожалуйста, поправьте меня. Конечно, студенты, которые заинтересованы в большем количестве игрового процесса Actions, могут обмениваться информацией и учиться вместе. Конечно, это ограничивается геймплеем личного проекта.Внутренние проекты компании имеют более зрелые и полные решения по автоматизации.Например, система облачного лидера, которую мы используем внутри, предназначена для решения таких задач.Конкретные функции облачного лидера, что он делает делать, следите за обновлениями.

использованная литература

Начало работы с действиями GitHub

Что такое непрерывная интеграция?

Рекомендуемое чтение

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

Схема кэширования списка страниц H5

Карьера

ZooTeam, молодая, увлеченная и творческая команда, связанная с отделом исследований и разработок продукции Zhengcaiyun, базируется в живописном Ханчжоу. В настоящее время в команде более 40 фронтенд-партнеров, средний возраст которых составляет 27 лет, и почти 30% из них — инженеры полного стека, настоящая молодежная штурмовая группа. В состав членов входят «ветераны» солдат из Ali и NetEase, а также первокурсники из Чжэцзянского университета, Университета науки и технологий Китая, Университета Хандянь и других школ. В дополнение к ежедневным деловым связям, команда также проводит технические исследования и фактические боевые действия в области системы материалов, инженерной платформы, строительной платформы, производительности, облачных приложений, анализа и визуализации данных, а также продвигает и внедряет ряд внутренних технологий. Откройте для себя новые горизонты передовых технологических систем.

Если вы хотите измениться, вас забросали вещами, и вы надеетесь начать их бросать; если вы хотите измениться, вам сказали, что вам нужно больше идей, но вы не можете сломать игру; если вы хотите изменить , у вас есть возможность добиться этого результата, но вы не нужны; если вы хотите изменить то, чего хотите достичь, вам нужна команда для поддержки, но вам некуда вести людей; если вы хотите изменить установившийся ритм, это будет "5 лет рабочего времени и 3 года опыта работы"; если вы хотите изменить исходный Понимание хорошее, но всегда есть размытие того слоя оконной бумаги.. , Если вы верите в силу веры, верьте, что обычные люди могут достичь необыкновенных вещей, и верьте, что они могут встретить лучшего себя. Если вы хотите участвовать в процессе становления бизнеса и лично способствовать росту фронтенд-команды с глубоким пониманием бизнеса, надежной технической системой, технологиями, создающими ценность, и побочным влиянием, я думаю, что мы должны говорить. В любое время, ожидая, пока вы что-нибудь напишете, отправьте это наZooTeam@cai-inc.com

Категории