Урок Как настроить среду для разработки под RageMP и автоматизировать релизы с помощью Github Actions + semantic-release

[Fernetti]

Хелоу май френдс, в этой статье я расскажу вам о том как быстро развернуть проект под разработку для RageMP и автоматизировать релизы с помощью Github Actions и semantic-release.
Писать проект мы будет на Typescript, для сборки проекта использовать Rollup, ESlint для линтовки нашего кода, а для релизов и версионности semantic-release.


Что же нам потребуется ?:

• Аккаунт Github​
• Github Desktop ( для более удобной работы с репозиториями )​
• Visual Studio Code или любая другая IDE ( в случае с WebStorm, Github Desktop вам не понадобится, так как в WS итак все реализовано удобно из коробки )​
• Git​
• И конечно же Node.js​

В последующем все примеры будут сделаны на основе работы с Visual Studio Code

Каков же наш план?:

• Создать репозиторий на Github
• C помощью Github Desktop клонировать репозиторий на наш компьютер
• Инициализировать проект
• Установить все нужные зависимости для проекта
• Написать конфигурации для инструментов, которыми мы будем пользоваться
• Написать конфигурацию для workflow

Ну что поехали ?

Создание репозитория​

	В левой части страницы вы увидите кнопку "New", нажав на которую вы сможете перейти к странице создания репозитория, так же вы можете кликнуть на стрелочку рядом с вашей аватаркой в верхнем правом углу и в выпадающем меню выбрать "Your repositories" ( Ваши репозитории ) и перейти на страницу, как не странно, ваших репозиториев​
	При переходе в раздел репозиториев в своем профиле, вы увидите список репозиторев, публичную информацию о своем аккаунте, так же можно перейти в раздел проектов и посмотреть ваши загруженные на Github Packages дистрибутивы, но нам снова нужна кнопочка "New", которая ярко подсвечена сочным зеленым цветом​
	Перейдя на страницу создания репозитория, вам нужно будет выбрать название для него, опционально написать описание (description), выбрать будет ли репозиторий публичный или приватный ( сможет ли кто-либо другой увидеть ваш репозиторий, при выборе приватного в будущем вы сможете дать права доступа своим комрадам ), выбрать добавлять ли readme файл ( этот файл нужен для редактирования зоны описания под файловым древом на странице репозитория ), .gitignore вы напишем с вами сами. Нажимаем кнопочку Create repository ​
	И вот мы получаем абсолютно пустой репозиторий, готовый к работе. Первым делом мы создадим ветку для разработки, для этого нам нужно будет нажать на main, и в поле ввода Find or create a branch вписать dev или development, затем нажать появившуюсь кнопочку Create branch..... Поздравляю ветку разработки вы создали, ветка master используется только для релизов май френдс.​

Github Desktop
Данный шаг предполагает, что вы уже установили Github Desktop​

	Когда вы впервые откроете Github Desktop, вы увидите приветственное окно и предложение авторизоваться с помощью Github. Аккаунт Github у нас уже предположительно имеется. Нажимаем Sign in to Github.com​
	Далее откроется окно с дополнительными настройками, но здесь вы можете просто нажать finish и продолжить работать, ничего критичного здесь нет.​
	Далее из списка выбираем созданный вами репозиторий и нажимаем Clone ....​
	И выбираем путь по которому клонировать репозиторий и нажимаем Clone​
	Все готово, теперь Github Desktop будет отслеживать изменения в папке с вашим репозиторием, изменим Current branch на ранее созданную ветку для разработки dev и можно переходить в Visual Studio Code​

Visual Studio Code
​

Мы зашли в VS Code, перед нами предстал пустой репозиторий и первое что нам нужно сделать это перейти в ветку разработки ( ту что мы создали ранее ) в VS Code.

Кликните на эту кнопку и в выпадающем сверху меню выберете ветку разработки.
​

Теперь можно инициализировать проект с помощью команды:

npm init

Заполняем информацию по проекту:

package name	название вашего проекта
version	версия, в дальнейшей semantic-release будет работать с этим полем и изменять его
description	описание вашего проекта
entry point	входной файл проекта, или файл на который будет ссылаться импорт из вне, после уставновки вашего модуля/проекта с помощью npm install
test command	команда для тестирования, можно сразу написать jest
keywords	ключевые слова, для seo и поиска в интернете, и на npm
git repository	вам предложат автоматический вариант, так как репозиторий уже инициализирован, так что нажмите просто ввод

Следующим шагом после инициализации проекта будет установка зависимостей, для начала установим все нужное для сборки проекта:

npm i --save-dev typescript@latest rollup@latest @rollup/plugin-typescript @rollup/plugin-node-resolve@latest @rollup/plugin-commonjs@latest @rollup/plugin-json@latest rollup-plugin-terser@latest

Ничего сверхестественного, сам typescript, сборщик rollup, плагин для сборки typescript, плагин для нахождения импортированных модулей из node_modules, плагин который конвертирует commonjs модули в ES6, чтобы не было проблем со сборкой, и компрессор.

Если разрабатываете серверную сторону то:

npm install --save-dev github:CocaColaBear/types-ragemp-s#v1.0

Если клиентскую:

npm install --save-dev github:CocaColaBear/types-ragemp-c#v1.0

В случае если в процессе создания репозитория вы пропустили пункт создать .gitignore файл, то ваша VCS покажет вам что у вас изменений на овердох** файлов, поэтому нужно создать файл с названием .gitignore ( точка перед названием обязательна ), и впишите в него папки которые не должны загружаться на github, а это:

node_modules/
dist/

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

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

Конфигурация rollup, файл @/rollup.config.js

import typescript from "@rollup/plugin-typescript";
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import json from "@rollup/plugin-json";
import { terser } from "rollup-plugin-terser";
import path from "path";

const production = process.env.production;

const SOURCE = {};

SOURCE.DIRECTORY = path.join(__dirname, "src");
SOURCE.FILE = path.join(SOURCE.DIRECTORY, "index.ts");

const DIST = {};

DIST.DIRECTORY = path.join(__dirname, "dist");
DIST.FILE = path.join(DIST.DIRECTORY, "index.js");


export default {
  input: SOURCE.FILE,
  output: [
    {
      file: DIST.FILE,
      format: "cjs",
      exports: "auto"
    }
  ],
  plugins: [
    json(),
    resolve(),
    commonjs(),
    typescript({
      typescript: require("typescript")
    }),
    production && terser()
  ]
}

Конфигурация typescript, @/tsconfig.json

{
  "compilerOptions": {
    "module": "ES6",
    "target": "ES5",
    "moduleResolution": "node",
    "allowJs": false,
    "resolveJsonModule": true,
    "allowSyntheticDefaultImports": true,
    "allowUnreachableCode": false,
    "allowUnusedLabels": false,
    "noUncheckedIndexedAccess": true,
    "noUnusedParameters": true,
    "noUnusedLocals": true,
    "alwaysStrict": true,
    "strictBindCallApply": true,
    "strictFunctionTypes": true,
    "strictNullChecks": true,
    "strictPropertyInitialization": true,
    "typeRoots": [ "./node_modules/@types" ],
    "lib": [ "ES2021" ]
  },
  "exclude": [
    "./node_modules"
  ]
}

Теперь преступим к установке зависимостей для ESlint и написанию конфига:

npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-airbnb-typescript

Кофнигурация ESlint, @/.eslintrc

{
  "env": {
    "es2021": true
  },
  "extends": [
    "airbnb-base",
    "airbnb-typescript/base"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "project": [ "./tsconfig.json" ]
  },
  "plugins": [
    "@typescript-eslint"
  ],
  "rules": {
  }
}

Теперь приступим к установки зависимостей semantic-release и написанию его конфига

npm i --save-dev semantic-release @semantic-release/changelog @semantic-release/exec @semantic-release/git @semantic-release/release-notes-generator @semantic-release/commit-analyzer @semantic-release/github @semantic-release/npm

Конфигурация semantic-release, @/.releaserc

Обратите внимание что в branches, вы должны указать свою главную ветку, она так же может называться master, а не main, а так же заменить ссылку на репозиторий в поле repositoryUrl на ссылку на ваш репозиторий

{
    "branches": [
      "main"
    ],
    "repositoryUrl": "https://github.com/FlowRage/core.git",
    "plugins": [
      [
        "@semantic-release/commit-analyzer",
        {
          "preset": "angular",
          "parserOpts": {
            "noteKeywords": [
              "BREAKING CHANGE",
              "BREAKING CHANGES"
            ]
          }
        }
      ],
      [
        "@semantic-release/release-notes-generator",
        {
          "preset": "angular",
          "parserOpts": {
            "noteKeywords": [
              "BREAKING CHANGE",
              "BREAKING CHANGES",
              "BREAKING"
            ]
          },
          "writerOpts": {
            "commitsSort": [
              "subject",
              "scope"
            ]
          }
        }
      ],
      "@semantic-release/github",
      "@semantic-release/changelog",
      "@semantic-release/exec",
      [
        "@semantic-release/npm",
        {
          "npmPublish": false
        }
      ],
      [
        "@semantic-release/git",
        {
          "assets": [
            "package.json",
            "CHANGELOG.md"
          ],
          "message": "chore(release): <%= nextRelease.version %> - <%= new Date().toLocaleDateString('en-US', {year: 'numeric', month: 'short', day: 'numeric', hour: 'numeric', minute: 'numeric' }) %> [skip-ci]"
        }
      ]
    ]
  }

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

Создаем папку .github
Внутри папки .github создаем папку workflows
А внутри workflows, создаем два файла development.yml и main.yml

Файл @/.github/workflows/development.yml

name: Development Actions

on:
  push:
    branches:
      - dev

jobs:
  lint:
    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [16.x]

    steps:
      - uses: actions/checkout@v3
      - uses: actions/checkout@v3
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v3
        with:
          node-version: ${{ matrix.node-version }}
          cache: "npm"
      - run: npm ci
      - run: npm run lint

  build:
    needs: [lint]

    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [16.x]

    steps:
      - uses: actions/checkout@v3
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v3
        with:
          node-version: ${{ matrix.node-version }}
          cache: "npm"
      - run: npm ci
      - run: npm run build

Файл @/.github/workflows/main.yml

name: Release/Production Actions

on:
  push:
    branches:
      - main

env:
  GH_TOKEN: ${{ secrets.GH_TOKEN }}

jobs:
  lint:
    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [16.x]

    steps:
      - uses: actions/checkout@v3
      - uses: actions/checkout@v3
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v3
        with:
          node-version: ${{ matrix.node-version }}
          cache: "npm"
      - run: npm ci
      - run: npm run lint

  build:
    needs: [lint]

    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [16.x]

    steps:
      - uses: actions/checkout@v3
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v3
        with:
          node-version: ${{ matrix.node-version }}
          cache: "npm"
      - run: npm ci
      - run: npm run build

  release:
    needs: [build]

    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [16.x]

    steps:
      - uses: actions/checkout@v3
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v3
        with:
          node-version: ${{ matrix.node-version }}
          cache: "npm"
      - run: npm ci
      - run: npm run release

Теперь вам нужно зайти в настройки профиля Github, в правом верхнем углу в выпадающем меню жмем Settings, далее в левой колонке в самом низу находим и жмем Developer Settings, и снова в левой колонке жмем Personal Access Token. Далее находим Generate new token, вписываем любое понравившееся имя для токена и выбираем скоп repo, чтобы в подпунктах все галочки стояли, а то смотри у меня xD

Копируешь токен, и бежим дальше, скопируй только, а то потом не сможешь его посмотреть. Заходишь на страницу репозитория и аналогично в меню под названием репозитория находишь Settings.
В настройках в левой колонки открываешь выпадашку Secrets и жмешь Actions. В открывшемся окне находишь New repository secret. Вписываешь в поле Name - GH_TOKEN, а в поле Value вставляешь скопированный токен и сохраняешь.

Эврика, готово.

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

• build: изменения, влияющие на систему сборки или внешние зависимости (примеры: gulp, broccoli, npm)
• ci: Изменения в наших файлах конфигурации и сценариях CI (примеры областей: Circle, BrowserStack, SauceLabs)
• docs: документация только меняется
• feat: новая функция
• fix: Исправление ошибки
• perf: изменение кода, повышающее производительность.
• refactor: изменение кода, которое не исправляет ошибку и не добавляет новую функцию.
• style: изменения, не влияющие на смысл кода (пробелы, форматирование, отсутствие точек с запятой и т. д.)
• test: Добавление отсутствующих тестов или исправление существующих тестов
• BREAKING CHANGE: обновления ломающие обратную совместимость, ака/или мажорные обновы

feat: adding some cool shit yo
fix: fixing critical bug


Я думаю ты понял

Тип коммита: описание коммита

Это пишется в заголовке коммита

Разные типы вызывают разные изменения, все кроме feat и BREAKING CHANGES вызывает патч, feat вызывает минор, BC вызывает мажорный релиз.


А так же добавим в наш @/package.json команды

{
    "scripts": {
        "build": "rollup -c",
        "build:production": "rollup -c --environment production",
        "lint": "eslint --fix src/**/*.ts",
        "release": "semantic-release"
      }
}

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

 

[queen]

+rep