{"id":288,"date":"2022-02-24T14:49:24","date_gmt":"2022-02-24T14:49:24","guid":{"rendered":"https:\/\/webdevs.blog\/pl\/?p=288"},"modified":"2026-02-20T07:28:18","modified_gmt":"2026-02-20T07:28:18","slug":"netlify","status":"publish","type":"post","link":"https:\/\/webdevs.blog\/pl\/netlify\/","title":{"rendered":"Netlify – idealna przysta\u0144 dla Twojego kolejnego projektu"},"content":{"rendered":"\n

Pisz\u0105c ten artyku\u0142 zastanawia\u0142em si\u0119 jak najlepiej okre\u015bli\u0107 us\u0142ug\u0119 Netlify. Z jednej strony jest to hosting stron statycznych, z drugiej ca\u0142e zaplecze backendowe dla funkcji serverless, z trzeciej infrastruktura CI\/CD, z czwartej… Mo\u017cna by tak wymienia\u0107, powiedzmy wi\u0119c, \u017ce jest to zestaw narz\u0119dzi, kt\u00f3re u\u0142atwiaj\u0105 \u017cycie developerom. Zestaw bardzo pot\u0119\u017cnych narz\u0119dzi.<\/h4>\n\n\n\n

Do tej pory mia\u0142em okazj\u0119 postawi\u0107 na Netlify kilkana\u015bcie r\u00f3\u017cnych stron i aplikacji – od prostych formularzy zbieraj\u0105cych dane po system do zarz\u0105dzania projektami i relacjami z klientami. Poni\u017cej znajdziecie kilka ficzer\u00f3w platformy, z kt\u00f3rych korzystam i mog\u0119 z czystym sumieniem poleci\u0107:<\/p>\n\n\n\n

Continuous Integration\/Deployment<\/h2>\n\n\n\n

Tworz\u0105c nowy projekt w Netlify mo\u017cemy w prosty spos\u00f3b podpi\u0105\u0107 repozytorium z jednego z popularnych provider\u00f3w (GitHub, GitLab, Bitbucket). Nast\u0119pnie mo\u017cemy okre\u015bli\u0107 czy \u017ar\u00f3d\u0142owe pliki maj\u0105 zosta\u0107 przeniesione 1:1 czy raczej – co pewnie b\u0119dzie cz\u0119stszym scenariuszem – ma odby\u0107 si\u0119 proces buildowania (np. czy ma si\u0119 uruchomi\u0107 komenda npm run build bezpo\u015brednio w infrastrukturze Netlify). <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

A co je\u015bli mamy super ma\u0142y projekt i nie stworzyli\u015bmy dla niego repozytroium? Netlify pozwala na r\u0119czny upload ca\u0142ego katalogu z projektem z poziomu aplikacji.<\/p>\n\n\n\n

Du\u017c\u0105 zalet\u0105 jest tak\u017ce to, \u017ce mo\u017cemy okre\u015bli\u0107 z jakiego brancha chcemy by deploy zosta\u0142 wykonany. Mo\u017cemy tak\u017ce skonfigurowa\u0107 platform\u0119 tak, by ka\u017cdy Pull Request generowa\u0142 unikalny link z podgl\u0105dem projektu, a co wi\u0119cej dzi\u0119ki aplikacji na Githubie, bot automatycznie mo\u017ce aktualizowa\u0107 takiego PRa o odpowiedni komentarz:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

W panelu Netlify mamy te\u017c list\u0119 wszystkich deploy\u00f3w wraz opcj\u0105 przywracania, dzi\u0119ki temu mo\u017cemy szybko przywr\u00f3ci\u0107 stron\u0119\/aplikacj\u0119 do poprzedniego stanu.<\/p>\n\n\n\n

\n
\n

Wa\u017cna informacja w kontek\u015bcie hostowanych plik\u00f3w: tutaj nie mamy bezpo\u015bredniego dost\u0119pu do plik\u00f3w, kt\u00f3re s\u0105 w chmurze. Nie mo\u017cemy np. tak jak w przypadku tradycyjnych hosting\u00f3w, wej\u015b\u0107 na serwer i pobra\u0107 lub doda\u0107 pojedynczy plik. Pocz\u0105tkowo mo\u017ce si\u0119 to wydawa\u0107 ograniczeniem, natomiast dzi\u0119ki temu uzyskujemy pewno\u015b\u0107, \u017ce pliki na platformie zawsze b\u0119d\u0119 zgodn\u0105 w stu procentach z tymi, kt\u00f3re mamy w repo. Dodatkowo, mamy mo\u017cliwo\u015b\u0107 odpalania plugin\u00f3w i r\u00f3\u017cnych optymalizacji, minifikacji podczas procesu automatycznego deployu. <\/p>\n<\/div>\n<\/div>\n\n\n\n

Funkcje serverless<\/h2>\n\n\n\n

Je\u015bli do tej pory nie mieli\u015bcie z nimi do czynienia to koniecznie zajrzyjcie najpierw tutaj: serverless.css-tricks.com<\/a>. Do czego przede wszystkim mog\u0105 nam si\u0119 przyda\u0107? <\/p>\n\n\n\n

W przypadku aplikacji typu Single Page Aplication, a tak\u017ce niekt\u00f3rych stron, nie zawsze b\u0119dziemy chcieli by wszystkie dane by\u0142y jawne. Czasem potrzebny jest jaki\u015b backend tylko po to by ukry\u0107 klucz API serwisu, z kt\u00f3rego pobieramy dane, czasem pojawi si\u0119 jaka\u015b logika, kt\u00f3r\u0105 nie chcieliby\u015bmy wykonywa\u0107 po stronie przegl\u0105darki. Id\u0105c dalej czasem nawet nie b\u0119dziemy mogli wykona\u0107 requestu do zewn\u0119trznego endpointu API ze wzgl\u0119du na CORSy. Rozwi\u0105zaniem tych wszystkich problem\u00f3w s\u0105 w\u0142a\u015bnie funkcje serverless. <\/p>\n\n\n\n

W najprostszej postaci za pomoc\u0105 tych funkcji b\u0119dziemy tworzy\u0107 w\u0142asne endpointy, do kt\u00f3rych b\u0119dziemy si\u0119 odwo\u0142ywa\u0107 i one zwr\u00f3c\u0105 nam w odpowiedzi JSONa. Natomiast mo\u017ce to by\u0107 te\u017c plik pdf, albo screenshot, albo wyrenderowany dynamicznie html ca\u0142ej strony (tutaj warto zainteresowa\u0107 si\u0119 projektem, kt\u00f3ry powsta\u0142 przy okazji trzeciej wersji Nuxt.js: Nitro). <\/p>\n\n\n\n

Mo\u017cliwo\u015bci s\u0105 prawie nieograniczone. No prawie. Ogranicza nas 10 sekundowy limit czasu wykonania funkcji. Chyba, \u017ce zdecydujemy si\u0119 na:<\/p>\n\n\n\n

Background Functions<\/strong><\/h2>\n\n\n\n

Swego czasu pracowali\u015bmy w Coditive<\/a> nad projektem pobieraj\u0105cym i analizuj\u0105cym dane z kilku stron internetowych, czyli po prostu by\u0142 to scraper wykorzystuj\u0105cy headless chromium w postaci puppeteera<\/a>. Projekt nadawa\u0142 si\u0119 by uruchomi\u0107 go na platformie Netlify, gdyby w\u0142a\u015bnie nie limit 10 sekund wykonania funkcji. Ostatecznie zdecydowali\u015bmy si\u0119 na stack oparty o Express.js, czyli klasycznie na serwerze dzia\u0142a\u0142 proces Node odpalony na Ubuntu. Kilka miesi\u0119cy p\u00f3\u017aniej Netlify uruchomi\u0142o Background Functions, kt\u00f3re by\u0142o dok\u0142adnie tym czego wtedy potrzebowali\u015bmy, czyli:<\/p>\n\n\n\n