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

Netlify е уеб хостинг платформа и цялостен набор от инструменти за внедряване и управление на уеб приложения в облака.

Но функциите му се простират далеч отвъд това - функциите му без сървър ви позволяват да изпълнявате код от страна на сървъра без специален сървър.

Разгледайте как да настроите CI/CD конвейер за внедряване на Node.js REST API на Netlify с помощта на GitHub Actions.

CI/CD канали с GitHub действия: Общ преглед

Тръбопроводите за непрекъсната интеграция и непрекъсната доставка (CI/CD) са поредица от последователни, автоматизирани процеси, през които преминават софтуерните приложения, преди да бъдат изпратени до производство.

Обикновено CI/CD тръбопроводите се състоят от няколко ключови фази, включително фазите на източника, изграждането, тестването и внедряването.

Въпреки че е възможно тези фази да се изпълняват ръчно, автоматизирането им предлага няколко предимства, включително:

instagram viewer
  • Минимизиране на риска от човешки грешки.
  • Ускоряване на процеса на освобождаване.
  • Осигуряване на последователен работен процес за доставка на качествен софтуер до производството.

Какво е GitHub Actions?

GitHub Actions е инструмент, интегриран в GitHub, който предоставя широк набор от предварително изградени действия, които можете да използвате, за да дефинирате работни потоци като код директно в хранилището на вашия проект, за да автоматизирате CI/CD тръбопроводи.

Можете също така да създавате персонализирани действия, които да отговарят на нуждите на вашия специфичен проект, което ви позволява да изграждате и внедрявате приложения в производство безпроблемно. Едно от предимствата на GitHub Actions е неговата безпроблемна интеграция с други функции на GitHub, като заявки за изтегляне и проследяване на проблеми.

Това прави възможно задействането на работни потоци въз основа на конкретни събития, като например нов ангажимент, който гарантира, че вашите CI/CD тръбопроводи се задействат автоматично, когато е необходимо.

Настройте проекта Node.js

За да започнете, трябва да създадете експресен уеб сървър. За да направите това, създайте нова папка локално и променете директорията на вашия терминал.

mkdir експрес-netlify
cd експрес-netlify

След това създайте a package.json използване на файл npm, мениджърът на пакети на възли.

npm init -y

Накрая инсталирайте зависимостите, необходими в проекта.

npm инсталирайте експресно netlify-lambda serverless-http

The netlify-ламбда пакетът служи като локален сървър за разработка, който улеснява тестването на функции без сървър. сървър без сървър-http помага при адаптирането на приложения Express.js към формат, който е съвместим с манипулатори на функции без сървър.

Netlify не предоставя собствена поддръжка за хостване и изпълнение на пълноценни бекенд приложения. Вместо това предлага функции без сървър като алтернативно решение за работа с бекенд функционалността.

Тези функции управляват логиката от страна на сървъра, обработват HTTP API заявки и обслужват динамично съдържание, осигурявайки подобна на бекенда функционалност в парадигмата без сървър.

Можете да намерите кода на този проект в него GitHub хранилище.

Създайте Express Web Server

Създайте три папки: разст, функции, и src в главната директория на папката на вашия проект.

Преди да настроите Express сървъра, създайте празен index.html файл в разст папка. Този файл действа като контейнер, който позволява на Netlify успешно да внедри Express приложението и да обслужва API маршрутите.

Сега създайте a src/app.js файл и добавете следния код:

конст експрес = изискват("експресен");
конст без сървър = изискват("без сървър-http");
конст приложение = експрес();
конст рутер = експрес. Рутер();


router.get("/", (req, res) => {
 res.send("Здравей свят!")
});


app.use(`/.netlify/functions/app`, рутер);
модул.exports = приложение;
модул.exports.handler = без сървър (приложение);

Този код дефинира Express сървър с един маршрут за основния URL адрес, който обработва GET заявки. The app.use функция регистрира междинния софтуер на маршрута с приложението Express, като гарантира, че всички HTTP заявки, направени към пътя /.netlify/functions/app ще бъдат обработени правилно от рутера, дори в производствена среда.

Следователно, ако добавите нова крайна точка като напр /api/auth, то ще бъде достъпно на /.netlify/functions/app/api/auth. И накрая, кодът експортира приложението Express и функцията за манипулиране без сървър.

Това позволява локално тестване на сървъра и гарантира, че можете да го внедрите като функция без сървър в Netlify.

Дефинирайте файла Netlify.toml

В основната директория създайте нова Netlify.toml файл и добавете следния код.

[строя]
 база = "/"
 команда = "npm run build"
 публикува = "/dist/"
 функции = "функции/"
[build.environment]
 NODE_VERSION = "16"
[функции]
 външни_възлови_модули = ["експресен"]
 node_bundler = "esbuild"
[[пренасочва]]
 сила = вярно
 от = "/api/*"
 състояние = 200
 до = "/.netlify/functions/app/:splat"
[[пренасочва]]
 от = "/*"
 състояние = 200
 до = "/index.html"

Кодът определя настройките за конфигурация на компилация и внедряване за приложението Express на Netlify. Той включва настройки като базова директория, команда за изграждане, директория за публикуване и директория с функции.

Освен това той дефинира настройки за пренасочване, които трябва да управляват маршрутизирането на HTTP API заявки, като гарантира, че са правилно насочени към функциите без сървър на Netlify.

Актуализирайте файла Package.json

Отвори package.json файл и добавете тези команди към обекта скриптове.

"скриптове": {
"старт": "netlify-lambda serve src",
"строя": "netlify-lambda build src"
 },

Изпълнете следните команди, за да създадете и стартирате приложението локално.

npm изпълнява компилация
npm изпълнение стартиране

Сървърът ще стартира на порт 9000. Можете да продължите и да тествате API с помощта на Postman, като направите заявки до http://localhost: 9000/.netlify/функции/приложение

И накрая, преди да настроите работния поток GitHub Actions за автоматизиране на внедряванията в Netlify, създайте хранилище в GitHubи натиснете файловете на проекта.

Разположете експресното приложение в Netlify

Първо, разположете API на Netlify, преди да конфигурирате работния поток GitHub Actions. Следвайте тези стъпки, за да внедрите приложението Express в Netlify.

  1. Насочете се към Netlify и създайте акаунт и влезте в Преглед страница.
  2. Изберете и щракнете върху сайтове раздел.
  3. Кликнете върху Импортиране от Git бутон и изберете GitHub като платформа за доставчик на Git. Netlify ще ви подкани да се удостоверите с GitHub, за да му предоставите достъп до вашия акаунт и хранилищата на проекти.
  4. Изберете хранилището на проекта Express от списъка с показани хранилища.
  5. След като изберете хранилището, трябва да конфигурирате настройките за изграждане за процеса на внедряване. Netlify опростява този процес чрез автоматично откриване на технологията, използвана за изграждане на приложението, и предварително попълване на полетата с необходимите настройки за изграждане. В този случай командата за изграждане, публикуването и директорията с функции.
  6. Накрая щракнете върху Разположете сайт бутон, за да завършите процеса.

Създайте работен поток за действия на GitHub

Кликнете върху Действия в хранилището на GitHub на вашия проект. В Непрекъсната интеграция раздел, изберете и щракнете върху Конфигурирайте Node.js работния процес.

От редактора на GitHub преименувайте името на файла на Netlify.yml, изтрийте шаблонния код на работния поток на Node.js и добавете кода по-долу:

име:ИзгражданеиРазположетеда сеNetlify
На:
натиснете:
pull_request:
работни места:
изграждане:
работи на:ubuntu-22.04
стъпки:
-използва:действия/касиране@v3
# (Компилирайте в ./dist или друга директория... )
-име:Разположетеда сеNetlify
използва:nwtgck/[email protected]
с:
директория за публикуване:'./dist'
производствен клон:основен
github-токен:${{тайни. GITHUB_TOKEN}}
разгръщане-съобщение:„Внедряване от действия на GitHub“
enable-pull-request-comment:невярно
enable-commit-comment:вярно
overwrites-pull-request-comment:вярно
околна среда:
NETLIFY_AUTH_TOKEN:${{тайни. NETLIFY_AUTH_TOKEN}}
NETLIFY_SITE_ID:${{тайни. NETLIFY_SITE_ID}}
изчакване-минути:1

Ето разбивка на свойствата на работния поток:

  • На: Събития, които задействат действията в този работен процес.
  • работни места: Указва събитието, което конкретно действие трябва да изпълни, което е: събитията за изграждане и внедряване.
  • натичане: хост производствената среда за действието.
  • стъпки: Указва поредица от стъпки, включени за изпълнение на определена работа.
  • с: Дефинира аргументите, необходими за правилното изпълнение на действията.
  • околна среда: определя необходимите променливи на средата за работния процес.

И накрая, ангажирайте актуализациите, направени в този файл. GitHub трябва автоматично да задейства работния процес.

Първоначалното компилиране обаче ще задейства грешка, тъй като трябва да добавите секретни променливи, изисквани от работния процес: ИД на внедрения сайт и токена за удостоверяване на Netlify. Отидете до вашия Настройки на сайта в Netlify и копирайте ID на сайта.

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

Добавете двете променливи на средата като NETLIFY_SITE_ID и NETLIFY_AUTH_TOKEN както към променливите на средата, така и към секциите с тайни на хранилището във вашето хранилище на GitHub. След като направите тези промени, стартирайте отново работния процес. Netlify автоматично ще разположи всички последващи промени, които натиснете чрез този конвейер.

Продължете и тествайте API с помощта на Postman, като правите заявки към този URL адрес: /.netlify/functions/app.

Конфигуриране на CI/CD канали с GitHub Actions и Netlify

Като използвате функциите без сървър на Netlify, можете да внедрите пълноценни уеб приложения, които обхващат както клиентска, така и бекенд функционалност на Netlify.

В допълнение, настройването на CI/CD тръбопроводи за приложения с GitHub Actions предлага рационализиран подход за автоматизиране на процеса на изграждане и внедряване. Това ви позволява да дефинирате работни потоци, които осигуряват безпроблемен и надежден процес на разработка, като се започне от идеята и се стигне до етапа на издаване.