Rakenduse React ja Node installimine AWS-is: parem lähenemisviis

Ühes oma eelmises ajaveebis, kuidas rakendust React ja Node AWS-is kiiresti juurutada, selgitasin, kuidas saame kiiresti oma reageerimisrakenduse, sõlmerakenduse kasutusele võtta ja võimaldada neil omavahel rääkida. Sisuliselt hõlmas see järgmisi samme:

  • Tehke oma reageerimisrakendusest tootmine
  • Pange need failid käsitsi oma sõlmeserveri avalikku kausta
  • Luba node.js staatiliste failide teenindamiseks
  • Seadista sõlme.js, postitab värskendused aws EC2 eksemplaris
  • edastada päring pordi 80 juurde serverisse node.js

Ülaltoodud töövoog töötab juhul, kui te ei pea regulaarselt juurutama. Järgmised sammud peame käsitsi tegema iga kord, kui reageerimisrakenduses toimub muudatus

  • Hoone reageerimise rakendus
  • Kopeerige reageerimisfailid avalikku kausta node.js
  • Juurutage rakendus node.js

Vaatame alternatiivset disaini ja automatiseerime kogu juurutamisprotsessi.

Uus arhitektuur

Selle kujunduse puhul lahutaksime oma rakenduse Node ja rakenduse React. Tutvustaksime nginxi, et hõlbustada suhtlemist reageeriva ja sõlme vahel.

Nginxi kasutamine reageerimiskoodi teenindamiseks ja sõlmeserveri pöördproksina toimimiseks

Uus töövoog

CI ja CD rakenduse reageerimiseksCI ja CD sõlmerakenduse jaoks

Deploy Node App

Seda käsitletakse minu ajaveebi postituses: Kuidas rakendust Node.js AWS-i GitLabiga installida

Juurutage rakendus React

See on väga sarnane, üsna palju lihtsam kui sõlme juurutamine, kuna me ei pea AWS EC2 eksemplari varitsema.

Nagu sõlmerakenduse juurutamine, peame ka meie .gitlab-ci.yml-faili seadistama. See fail oleks täpselt sama, mis sõlmerakendusel, välja arvatud üks muudatus. Peame ehitama oma reageerimisrakenduse npm run build 29 real

Nüüd, kui meil on meie reageerimisrakendus üles ehitatud, peame need failid teisaldama kausta, kust nginx saab lugeda. Kõik asjad sarnanevad sõlme juurutamisega, välja arvatud juhul, kui kopeerime faile ssh-ga reale 34 scp-ga

Seadistage Nginx

Nüüd, kui meie AWS-i kastis on nii sõlme kui ka reaalaja kood, vajame vahendeid, mille kaudu nad saavad omavahel rääkida.

Installigem Nginx meie Ubuntu kasti

sudo apt-get install nginx

Järgmisena muutke Nginxi pakutava vaikimisi lehe asukohta.

Muutke seda faili / etc / nginx / sites-available / default ja lisage järgmine koodirida serveriploki

asukoht / {
 juur / kodu / ubuntu / myFrontApp / dist;
 indeks index.html index.htm index.nginx-debian.html;
 }

Nii et meie vaikeleht oleks nüüd index.html aadressil / home / ubuntu / myFrontApp / dist.

Oletame, et reageeriv rakendus esitab sõlme serverile päringu API-ga. Umbes nagu http: // / api / user, et saada kõigi kasutajate loend. Seega peame tagama, et iga marsruut koos / api-ga suunatakse sõlmeserverisse.

Failisse / etc / nginx / sites-available / default lisame järgmised read

asukoht / api / {
 puhverserveri_pass http: // localhost: 8000 /;
 puhverserveri_http_versioon 1.1;
 proxy_set_header Upgrade $ http_upgrade;
 proxy_set_header Connection 'upgrade';
 proxy_set_header Host $ host;
 proxy_cache_bypass $ http_upgrade;
 }

Nii et kogu plokk näeb välja nagu nginxi failis allpool

server {
 kuula 80 vaikeserverit;
 kuula [::]: 80 vaikeserverit;
 asukoht / {
   juur / kodu / ubuntu / hssfrontend / dist;
   indeks index.html index.htm index.nginx-debian.html;
        }
 serveri_nimi _;
asukoht / api / {
    puhverserveri_pass http: // localhost: 8000 /;
    puhverserveri_http_versioon 1.1;
    proxy_set_header Upgrade $ http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $ host;
    proxy_cache_bypass $ http_upgrade;
 }
}

Salvestage see fail ja taaskäivitage nginx server sudo service nginx restart abil.

Kui see tehtud, on teil hea minna !!

Kui leidsite, et see lugu on huvitav või kasulik, siis toetage seda plaksutades.