Frumusețea Next.js și a aplicațiilor web statice este că vă permit să rulați proiectul aproape oriunde folosind stocarea obiectelor, ca pe AWS S3. Dar poate fi dificil să actualizezi manual fișierele de fiecare dată.

Cum putem folosi GitHub Actions pentru a automatiza și implementa în mod continuu aplicația noastră pe S3?

  • Ce sunt acțiunile GitHub?
  • Ce este implementarea continuă?
  • Ce vom construi?
  • Pasul 0: Configurarea unui nou proiect Next.js pe GitHub
  • Pasul 1: Crearea și implementarea manuală a unui proiect Next.js într-un nou compartiment S3
  • Pasul 2: Crearea unui nou flux de lucru Acțiune GitHub pentru a construi automat un proiect Next.js
  • Pasul 3: Configurarea unei acțiuni GitHub pentru a implementa un site static pe S3

Ce sunt acțiunile GitHub?

GitHub Actions este un serviciu gratuit de la GitHub care ne permite să automatizăm sarcinile de cod.

Am scris anterior despre modul în care le putem folosi pentru a automatiza sarcini precum rularea testelor în codul nostru și trimiterea notificărilor către Slack.

Acestea oferă un mod flexibil de a rula automat codul pe baza fluxurilor noastre de lucru existente. Acest lucru oferă o mulțime de posibilități, cum ar fi chiar implementarea site-ului nostru web!

Ce este AWS S3?

S3 (Simple Storage Service) este un serviciu de stocare a obiectelor de la AWS. Vă permite să stocați fișiere în cloud, făcându-le ușor disponibile în întreaga lume.

De asemenea, vă permite să utilizați aceste fișiere ca site web. Deoarece putem încărca un fișier HTML ca obiect, putem configura și S3 pentru a accesa acel fișier ca o cerere HTTP. Aceasta înseamnă că putem găzdui un întreg site web chiar în S3.

Ce este implementarea continuă?

Implementarea continuă, adesea menționată prin acronimul CD, este practica menținerii codului într-o stare eliberabilă și implementarea codului respectiv automat sau în cicluri scurte.

În special în cazul nostru de utilizare, vom configura proiectul nostru astfel încât, de fiecare dată când o nouă actualizare este împinsă sau fuzionată în ramura Git primară, site-ul nostru web va fi implementat.

Ce vom construi?

Mai întâi vom bootstrap un simplu Next.js app utilizând șablonul de pornire implicit Next.js și configurați-l pentru a compila în fișiere statice.

Dacă nu doriți să creați un proiect Next.js, puteți urmări chiar și un simplu fișier HTML și nu executați niciuna dintre comenzile de construire. Dar Next.js este un mod modern de a construi aplicații web dinamice, așa că vom începe de aici.

Cu fișierele site-ului nostru web gata de pornire, vom crea și configura o bucket S3 în AWS unde vom găzdui site-ul nostru web.

În cele din urmă, vom crea un nou flux de lucru GitHub Action care va actualiza automat fișierele site-ului web în S3 de fiecare dată când apare o nouă modificare în filiala noastră principală (main).

Pasul 0: Configurarea unui nou proiect Next.js pe GitHub

Vom începe cu șablonul implicit cu Next.js.

După ce navigați la directorul în care doriți să creați proiectul, rulați:

yarn create next-app my-static-website
# or
npx create-next-app my-static-website

Notă: Simțiți-vă liber să înlocuiți my-static-website cu numele la alegere. O vom folosi pentru restul acestui tutorial.

Dacă navigați la acel director și executați comanda de dezvoltare, ar trebui să puteți porni cu succes serverul de dezvoltare.

cd my-static-website
yarn dev
# or
npm run dev
Cum se utilizeaza actiunile Github pentru a implementa un site
Noua aplicație Next.js

Apoi, să configurăm proiectul nostru pentru a compila static.

În interiorul package.json fișier, actualizați fișierul build script pentru:

"build": "next build && next export",

Ceea ce va face este să spuneți Next să preia site-ul web și să îl exporte în fișiere statice, pe care le vom folosi pentru a găzdui site-ul.

Putem testa acest lucru executând comanda:

yarn build
# or
npm run build

Și odată terminat, ne putem uita în interiorul out director și vedeți toate fișierele noului nostru site web.

1611474130 343 Cum se utilizeaza actiunile Github pentru a implementa un site
Ieșire statică din Next.js

În cele din urmă, vrem să găzduim acest lucru pe GitHub.

În contul GitHub, creați un nou depozit. Acesta va furniza apoi instrucțiuni despre cum puteți adăugați un proiect existent la acel repo.

Și odată ce ne-ați trimis proiectul către GitHub, ar trebui să fim pregătiți să configurăm noul nostru proiect de site web!

1611474130 57 Cum se utilizeaza actiunile Github pentru a implementa un site
Repo nouă în GitHub

Urmați împreună cu angajamentele:

Pasul 1: Crearea și implementarea manuală a unui proiect Next.js într-un nou compartiment S3

Pentru a începe cu noul nostru S3 Bucket, mai întâi conectați-vă la contul dvs. AWS și navigați la serviciul S3.

1611474130 970 Cum se utilizeaza actiunile Github pentru a implementa un site
Fără găleți în S3

Vom dori să creăm o nouă bucket, folosind numele ales de noi, care va fi utilizat pentru punctul final S3 unde este găzduit site-ul nostru web. De asemenea, vom dori să ne configurăm bucket-ul S3 pentru a putea găzdui un site web.

Notă: acest tutorial nu vă va prezenta cum să găzduiți un site web pe S3, dar puteți consulta celălalt tutorial care vă va ajuta să găzduiți un site web pe S3 pas cu pas.

1611474130 903 Cum se utilizeaza actiunile Github pentru a implementa un site
Găzduire site web static în AWS S3

Odată ce avem bucket-ul S3 configurat ca site web, putem să ne întoarcem la folderul proiectului Next.js, să executăm comanda de construire și apoi să încărcăm toate fișierele din out director în noua noastră cupă S3.

1611474130 381 Cum se utilizeaza actiunile Github pentru a implementa un site
S3 Bucket cu aplicație statică

Și odată ce aceste fișiere sunt încărcate și am configurat bucket-ul nostru S3 pentru găzduirea site-ului web, ar trebui să putem vedea proiectul nostru live pe web!

1611474130 229 Cum se utilizeaza actiunile Github pentru a implementa un site
Aplicația Next.js găzduită de AWS S3

Pasul 2: Crearea unui nou flux de lucru Acțiune GitHub pentru a construi automat un proiect Next.js

Pentru a începe, va trebui să creăm un nou flux de lucru.

Dacă sunteți familiarizați cu GitHub Actions, puteți crea una manual, dar vom parcurge rapid cum să faceți acest lucru în interfața de utilizare.

Navigați la fila Acțiuni din depozitul dvs. GitHub și faceți clic pe „configurați un flux de lucru personal”.

1611474130 914 Cum se utilizeaza actiunile Github pentru a implementa un site
Nou flux de lucru cu acțiunea GitHub

GitHub oferă un șablon de pornire pe care îl putem folosi pentru fluxul nostru de lucru, deși vom dori să facem câteva modificări.

Să facem următoarele:

  • Opțional: redenumiți fișierul pentru a deploy.yml
  • Opțional: redenumiți fluxul de lucru pe CD (deoarece este puțin diferit de CI)
  • Opțional: eliminați toate comentariile pentru a ușura citirea
  • Scoateți pull_request definiție în on proprietate
  • Inlătură tot steps în afară de uses: actions/checkout@v2

Deci, în acest moment ar trebui să rămânem cu:

name: CD

on:
  push:
    branches: [ main ]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2

Numai acest cod va declanșa un proces care creează o nouă instanță de Ubuntu și verifică pur și simplu codul de la GitHub de fiecare dată când apare o nouă modificare main ramură.

Apoi, după ce verificăm codul, vrem să îl construim. Acest lucru ne va permite să preluăm acea ieșire și să o sincronizăm cu S3.

Acest pas va diferi ușor în funcție de dacă utilizați fire sau npm pentru proiectul dvs.

Dacă folosiți fire, sub steps definiție, adăugați următoarele:

- uses: actions/setup-node@v1
  with:
    node-version: 12
- run: npm install -g yarn
- run: yarn install --frozen-lockfile
- run: yarn build

Dacă utilizați npm, adăugați următoarele:

- uses: actions/setup-node@v1
  with:
    node-version: 12
- run: npm ci
- run: npm run build

Între ambele seturi de pași, ceea ce facem este:

  • Configurarea nodului: astfel încât să putem utiliza npm și nod pentru a instala și a rula scripturile noastre
  • Instalați fire (numai fire): dacă folosim fire, îl instalăm ca o dependență globală, astfel încât să îl putem folosi
  • Instalare dependențe: instalăm dependențele noastre și folosim o comandă specifică care ne asigură că folosim fișierul de blocare disponibil pentru a evita orice actualizare neașteptată a pachetului
  • Build: în cele din urmă, executăm comanda de build care va compila proiectul Next.js în out director!

Și acum putem transfera acel fișier direct la adresa noastră main ramură care va da startul unei noi runde a fluxului nostru de lucru pe care o putem vedea în fila Acțiuni.

1611474130 812 Cum se utilizeaza actiunile Github pentru a implementa un site
Flux de lucru nou în GitHub Actions

Pentru a vedea că funcționează, putem naviga în acea rulare, selecta fluxul nostru de lucru și putem vedea că toți pașii noștri au rulat, inclusiv construirea proiectului nostru!

1611474130 994 Cum se utilizeaza actiunile Github pentru a implementa un site
Jurnale de construire reușite pentru un flux de lucru GitHub Action

Urmați împreună cu comiterea!

Pasul 3: Configurarea unei acțiuni GitHub pentru a implementa un site static pe S3

Acum, că ne construim proiectul în mod automat, dorim să ne actualizăm automat site-ul în S3.

Pentru a face acest lucru, vom folosi Acțiunea GitHub aws-actions / configure-aws-credentials și AWS CLI.

Acțiunea GitHub pe care o folosim va include acreditările și configurația AWS și o va face disponibilă pentru a fi utilizată pe tot parcursul ciclului de viață al fluxului de lucru.

De acum, instanța Ubuntu oferită de GitHub Actions ne permite să folosim AWS CLI pe măsură ce este inclus. Deci vom putea folosi comenzile CLI chiar în fluxul nostru de lucru.

Alternativ, am putea folosi S3 Acțiune de sincronizare. Dar, folosind AWS CLI, câștigăm mai multă flexibilitate pentru a ne personaliza configurarea, o putem folosi pentru comenzi CLI suplimentare și, de asemenea, este, în general, plăcut să vă familiarizați cu AWS CLI.

Deci, pentru a începe, să adăugăm următorul fragment ca pași suplimentari în fluxul nostru de lucru:

- uses: aws-actions/configure-aws-credentials@v1
  with:
    aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
    aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
    aws-region: us-east-1

Ceea ce va face mai sus este să utilizați acțiunea de configurare a acreditării AWS pentru a configura cheia de acces AWS, cheia secretă și regiunea pe baza setărilor noastre.

Regiunea AWS poate fi personalizată în funcție de regiunea pe care o utilizați în mod obișnuit cu contul dvs. AWS. Sunt în nord-estul Statelor Unite, așa că voi păstra us-east-1.

Cheia de acces și Cheia secretă sunt acreditări pe care va trebui să le generați cu contul dvs. AWS. Modul în care este configurat codul nostru este că vom stoca acele valori în GitHub Secrets, ceea ce va împiedica scurgerea acelor chei. Când acțiunea rulează, Github schimbă acele valori în stele (***) astfel încât oamenii să nu poată accesa acele chei.

Deci, pentru a configura aceste secrete, mai întâi vrem să generăm chei de acces în AWS.

Navigați la consola AWS. În meniul utilizatorului, selectați Acreditările mele de securitate, apoi selectați Creați cheia de acces.

1611474131 352 Cum se utilizeaza actiunile Github pentru a implementa un site
Crearea unei chei de acces în AWS

Acest lucru vă va oferi două valori: ID cheie de acces si Cheie de acces secret. Salvați aceste valori, deoarece nu veți putea accesa din nou ID-ul cheii secrete.

1611474131 105 Cum se utilizeaza actiunile Github pentru a implementa un site
Găsirea secretului și a cheii de acces în AWS

Notă: nu uitați să NU includeți cheia de acces și cheia secretă în codul dvs. Acest lucru ar putea duce la compromiterea acreditării AWS de către cineva.

Apoi, în interiorul repo GitHub, navigați la Setări, Secrete, apoi selectați Nou secret.

Aici vom dori să adăugăm cheile AWS folosind următoarele secrete:

  • AWS_ACCESS_KEY_ID: ID-ul cheii dvs. AWS Access
  • AWS_SECRET_ACCESS_KEY: cheia dvs. AWS Secret

Și odată salvat ar trebui să ai cele două noi secrete.

1611474131 70 Cum se utilizeaza actiunile Github pentru a implementa un site
Crearea Secretelor în GitHub

Acum că avem acreditările configurate, ar trebui să fim gata să rulăm comanda pentru a sincroniza proiectul nostru cu S3.

În interiorul Acțiunii GitHub, adăugați următorul pas:

- run: aws s3 sync ./out s3://[bucket-name]

Notă: asigurați-vă că înlocuiți [bucket-name] cu numele cupei dvs. S3.

Această comandă va declanșa o sincronizare cu cupa S3 specificată, utilizând conținutul fișierului out director, unde se dezvoltă proiectul nostru.

Și acum, dacă ne angajăm modificările, putem vedea că acțiunea noastră este declanșată automat odată ce ne-am angajat în main sucursală, unde ne construim proiectul și îl sincronizăm cu S3!

1611474131 639 Cum se utilizeaza actiunile Github pentru a implementa un site
Sincronizare AWS S3 de succes în fluxul de lucru GitHub Action

Notă: Asigurați-vă că, înainte de a configura această acțiune, ați configurat bucket-ul S3 pentru a găzdui un site web (inclusiv permisiuni de deblocare pe bucket-ul S3) – în caz contrar, această acțiune poate eșua.

În acest moment, proiectul nostru arată probabil la fel, deoarece nu am făcut nicio modificare la cod.

1611474130 229 Cum se utilizeaza actiunile Github pentru a implementa un site
Aplicația Next.js pe AWS S3

Dar dacă efectuați o modificare a codului, cum ar fi schimbarea titlului paginii de pornire din interiorul pages/index.js și comiteți această schimbare:

<h1 className={styles.title}>
  Colby's <a href="https://nextjs.org">Next.js!</a> Site
</h1>

Putem vedea că schimbarea noastră declanșează fluxul de lucru pentru a începe:

1611474131 119 Cum se utilizeaza actiunile Github pentru a implementa un site
Nou flux de lucru GitHub Action din schimbarea codului

Și odată ce fluxul nostru de lucru se termină, putem vedea că conținutul nostru este acum actualizat automat pe site-ul nostru:

1611474131 274 Cum se utilizeaza actiunile Github pentru a implementa un site
Aplicație găzduită AWS S3 cu modificări de cod actualizate

Urmați împreună cu angajamentele:

Ce altceva putem face?

Configurarea CloudFront

Scopul acestei postări nu a fost să parcurgă întregul proces de configurare a unui site web pentru AWS, dar dacă difuzați un site web pe S3, vă recomandăm să includeți și CloudFront în fața acestuia.

Puteți consulta celălalt ghid al meu aici, care vă ajută să configurați CloudFront, precum și un ghid pas cu pas prin crearea site-ului în S3.

Invalidarea cache-ului CloudFront

Dacă site-ul dvs. web S3 se află în spatele CloudFront, este posibil să vă asigurați că CloudFront nu păstrează noile modificări în cache.

Cu AWS CLI, putem declanșa, de asemenea, o invalidare a cache-ului cu CloudFront pentru a ne asigura că înregistrează cele mai recente modificări.

Consultați documentele aici pentru a afla mai multe.

Implementări de solicitare pull

Dacă lucrați în mod constant la modificările site-ului web într-o cerere de extragere, uneori poate fi mai ușor să vedeți modificările live.

Puteți configura un flux de lucru nou care rulează numai în cazul cererilor de extragere, în care fluxul de lucru poate crea dinamic o bucket nouă bazată pe ramură sau mediu și poate adăuga un comentariu la cererea de extragere cu acea adresă URL.

S-ar putea să găsiți o acțiune GitHub care există pentru a gestiona comentariile privind solicitarea de extragere pentru dvs. sau puteți verifica Documente GitHub Actions.