Цепочка инструментов для фронтенд-разработки GitLab и Docker

внешний интерфейс контейнер Docker GitLab

Набор инструментов для разработки интерфейса GitLab и Docker — Yayun Sauce

введение

Цель этой статьи — кратко рассказать о том, как построить частную среду разработки, строго говоря, это применимо не только к интерфейсу, о деталях можно пообщаться с блогерами в частном порядке. В процессе построения необходимо использовать хотя бы один сервер с памятью более 8G, если нет, то можно рассмотретьТенсент ОблакоКупить.

Все команды скрипта начинаются сCentos 7Например.

GitLab

Официальный сайт ГитлабСуществуют очень подробные руководства по установке, но поскольку скорость загрузки исходного кода с внутренних линий относительно низкая, блоггеры предпочитают загружать напрямую сЗеркальный сайт программного обеспечения с открытым исходным кодом Университета Цинхуаскачать и использоватьRPMУстановить.

yum update -y
yum install -y wget policycoreutils-python
wget https://mirrors.tuna.tsinghua.edu.cn/gitlab-ce/yum/el7/gitlab-ce-11.1.0-ce.0.el7.x86_64.rpm
rpm -ivh gitlab-ce-11.1.0-ce.0.el7.x86_64.rpm

После того, как выполнение завершено, его необходимо изменить/etc/gitlab/gitlab.rbКонфигурационный файл, теперь модифицируем только адрес доступа к серверу.

external_url 'http://www.bayunjiang.com'

Запустите команду инициализации после сохранения изменений.

gitlab-ctl reconfigure

теперь вы можете получить доступhttp://www.bayunjiang.comГлядя на веб-сайт GitLab, рекомендуется отключить внешнюю регистрацию, как только будет установлен пароль администратора.

Docker

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

wget https://mirrors.tuna.tsinghua.edu.cn/docker-ce/linux/centos/7/x86_64/stable/Packages/docker-ce-18.06.0.ce-3.el7.x86_64.rpm
rpm -ivh docker-ce-18.06.0.ce-3.el7.x86_64.rpm

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

mkdir -p /etc/docker
tee /etc/docker/daemon.json <<- EOF
{
    "registry-mirrors": ["https://registry.docker-cn.com/"]
}
EOF
systemctl daemon-reload
systemctl restart docker

При этом блогеры рекомендуют настроить запуск Docker при загрузке.

systemctl enable docker

GitLab Runner

По мере того, как уровень разработки интерфейса увеличивается, интерфейс обычно использует непрерывную интеграцию для создания кода проекта. GitLab очень просто использовать функцию непрерывной интеграции, нужно только добавить в корневую директорию кода проекта.gitlab-ci.ymlфайл.

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

docker run --name gitlab-runner --hostname gitlab-runner --restart always -v /srv/gitlab-runner/config:/etc/gitlab-runner -v /var/run/docker.sock:/var/run/docker.sock -d gitlab/gitlab-runner:alpine

После успешного запуска контейнера нам нужно войти в контейнер и зарегистрировать экземпляр GitLab Runner.

docker exec -t gitlab-runner sh
gitlab-runner register

Введите адрес веб-сайта GitLab, токен GitLab CI, описание бегуна, метку бегуна и параметры изображения по умолчанию, чтобы завершить регистрацию.Эти параметры можно найти в${网站地址}/admin/runnersоказаться.

Подробное описание параметров см.официальная документация.

GitLab CI

О GitLab CI уже упоминалось выше, теперь давайте вкратце настроим его. Предположим, у нас есть интерфейсный проект под названиемfe, где интерфейсная команда упаковкиnpm run build. Мы добавляем один в корневую директорию проекта.gitlab-ci.ymlфайл, справочное содержание выглядит следующим образом.

stages:
  - build

build-dev:
  stage: build
  image: "node:8.11.3-alpine"
  script:
    - npm install
    - npm run build
  cache:
    paths:
      - node_modules

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

общественная библиотека

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

Например, мы создаемHelloWorldпроект публичной библиотеки, а затем использовать в немnpm initинициализироватьpackage.jsonфайл, справочное содержание выглядит следующим образом.

{
  "name": "HelloWorld",
  "version": "1.0.0",
  "private": true,
  "description": "HelloWorld",
  "main": "index.js",
  "repository": {
    "type": "git",
    "url": "git@www.bayunjiang.com:bayunjiang/HelloWorld.git"
  },
  "author": "bayunjiang <master@bayun.org>",
  "license": "ISC"
}

вprivateПоле необходимо добавить самостоятельно, это поле может помешать публикации кода в общедоступной сети.

мы создаем новыйindex.jsфайл и напишите в нем образец функции.

const HelloWorld = () => {
  console.log('Hello World')
}

export { HelloWorld }

После сохранения и фиксации в удаленной ветке мы делаем ее на основе текущего кода.0.0.1Этикетка. Теперь мы можем напрямую добавить эту общую библиотеку в зависимости проекта.

npm install -S git+ssh://git@www.bayunjiang.com:bayunjiang/HelloWorld.git#0.0.1

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

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

"dependencies": {
    "@bayunjiang/HelloWorld": "git+ssh://git@www.bayunjiang.com:bayunjiang/HelloWorld.git#0.0.1"
}

В реальной разработке, если вам нужно использоватьHelloWorldМодули можно импортировать напрямую.

import { HelloWorld } from '@bayunjiang/HelloWorld'

HelloWolrd()

Docker Registry

Раньше, когда мы настраивали GitLab CI, мы использовали общедоступный сетевой образ напрямую.node:8.11.3-alpine, но теперь, когда у нас есть частный общедоступный репозиторий, загрузка общедоступного образа не имеет закрытого ключа SSH для доступа к частному репозиторию, поэтому нам нужно создать собственный образ Docker и поместить его во внутренний реестр Docker, чтобы GitLab мог его получить. .

docker run --name registry --hostname registry --restart always -p 5000:5000 -d registry

Если ошибки нет, то заходите${IP}:5000/v2Можно увидеть пустой объект.

Реестр Docker рекомендует использовать HTTPS-доступ, поэтому нам нужно настроить его с помощью сертификата, сертификат может перейти наТенсент ОблакоПрименять.

Справочник по конфигурации Nginx выглядит следующим образом.

server {
  listen 443 ssl;
  server_name docker.bayunjiang.com;
  ssl_certificate /etc/nginx/conf.d/ssl/docker.bayunjiang.com/ssl.crt;
  ssl_certificate_key /etc/nginx/conf.d/ssl/docker.bayunjiang.com/ssl.key;
  client_max_body_size 512m;
  location / {
    proxy_pass http://localhost:5000;
  }
}

Докер-образ

Теперь давайте напишем собственный образ Docker для запуска GitLab Runner.

Во-первых, нам нужно создать Dockerfile, в котором мы напишем следующее.

FROM node:8.11.3-alpine

# 安装 cnpm 加快依赖安装速度
RUN npm install -g cnpm --registry=https://registry.npm.taobao.org
# 替换国内 alpine 数据源
RUN sed -i 's/dl-cdn.alpinelinux.org/mirrors.ustc.edu.cn/g' /etc/apk/repositories && apk update
# 安装 openssh
RUN apk add openssh-client
# 安装 git
RUN apk add git
# 放入 SSH 私钥
RUN mkdir -p /root/.ssh
COPY id_rsa /root/.ssh/
RUN chmod 700 /root/.ssh && chmod 600 /root/.ssh/id_rsa
# 关闭远程主机 host key 检查
RUN ssh -o StrictHostKeyChecking=no git@www.bayunjiang.com

CMD ["/bin/sh"]

Затем поместите его в тот же каталогid_rsaфайл закрытого ключа, выполните следующую команду, чтобы создать образ и отправить его в реестр Docker.

docker build --rm -t docker.bayunjiang.com/node:base-1.0.0 .
docker push docker.bayunjiang.com/node:base-1.0.0

Наконец, мы помещаем интерфейсный проект в.gitlab-ci.ymlЗамените изображение, используемое в файле, на наше собственное изображение и заменитеnpmзаменитьcnpmЗаказ.

stages:
  - build

build-dev:
  stage: build
  image: "docker.bayunjiang.com/node:base-1.0.0"
  script:
    - cnpm install
    - cnpm run build
  cache:
    paths:
      - node_modules

Суммировать

Если предложено, добро пожаловать в топор.

Категории