Kā mitināt leņķisko vietni, izmantojot Netlify un GitHub

Mitinot Angular vietni tiešsaistē, varat izvēlēties starp daudzām pieejamajām platformām. Viens no tiem, ko varat izmantot bez maksas, ir Netlify.

Ja glabājat savas vietnes avota koda kopiju GitHub repozitorijā, varat izmantot Netlify, lai mitinātu šo vietni.

Netlify arī automātiski pārizvieto jūsu vietni, kad veicat jaunas izmaiņas jūsu mitinātajā repozitorija filiālē.

Kā izveidot pamata leņķa lietotnes piemēru

Varat izveidot vienkāršu Angular lietojumprogrammu, izmantojot redaktoru, piemēram, Visual Studio Code. Pēc tam varat mitināt šo vietni, izmantojot Netlify.

1. Izveidot a jauna Angular lietotne.
2. Izveidojiet vienkāršu mājas lapu. Nomainiet kodu mapē app.component.html failu ar šādu galvenās lapas saturu:

   <div klase=
   
   
   
   
   
   instagram viewer
   
   "konteinera tumšā galvene">
   <h2>Mūsu biznesa vietne</h2>
   </div>
   <div klase="konteiners-balts">
   <div klase="saturu">
   <h2>Mūsu biznesa vietne</h2>
   <lpp>Uzziniet, kā ātri izveidot, izstrādāt un uzturēt savu profesionālo vietni.</lpp>
   </div>
   </div>
   <div klase="konteiners-oranžs">
   <div klase="saturu">
   <h2>Ko mēs daram</h2>
   <lpp>Mēs piedāvājam jums rīkus, lai izstrādātu vietnes un unikālus risinājumus jūsu klientiem. Nodrošinām arī apmācību
    uzturēšana un citas ar vietni saistītas tēmas.</lpp>
   </div>
   </div>
   <div klase="konteiners-balts">
   <div klase="saturu">
   <h2>Par mums</h2>
   <lpp>Mēs esam mazs uzņēmums, kas darbojas Melburnā, Austrālijā. Mūsu telpas ir unikāli izstrādātas, lai to varētu darīt arī klienti
    apmeklējiet mūs personīgi.</lpp>
   </div>
   </div>
   <div klase="konteiners-tumšā kājene">
   <lpp>Autortiesības 2022</lpp>
   </div>

3. Pievienojiet lietotnei Angular stilu, pievienojot tai CSS app.component.css fails:

   * {
    fontu ģimene: "Arial", sans serif;
   }
   .header {
    polsterējums: 30 pikseļi 50 pikseļi;
   }
   .kājene {
    polsterējums: 5 pikseļi 50 pikseļi;
    teksta līdzināšana: centrs;
   }
   .konteiners-tumšs {
    fona krāsa: #202C39;
    krāsa: balta;
    displejs: flex;
    izlīdzināt vienumus: centrs;
   }
   .konteiners-oranžs {
    fona krāsa: #FFD091;
    krāsa: #202C39;
   }
   .konteiners-balts {
    fona krāsa: whitesmoke;
    krāsa: #202C39;
   }
   .saturs {
    polsterējums: 100 pikseļi 25%;
    displejs: flex;
    flex-direction: kolonna;
    līnijas augstums: 2rem;
   fonta izmērs: 1.2em;
    izlīdzināt vienumus: centrs;
    teksta līdzināšana: centrs;
   }

4. Pievienojiet stilu vispārējai lietotnei Angular stili.css:

   body {
    piemale: 0;
    polsterējums: 0;
   }

5. Lai pārbaudītu lietotni, dodieties uz tās saknes mapi, izmantojot termināli vai komandrindu. Ierakstiet ng kalpot komanda:

   ng kalpot

6. Pagaidiet, līdz kods tiek apkopots, un apmeklējiet http://localhost: 4200/ tīmekļa pārlūkprogrammā, lai skatītu savu lietotni.
7. Iekš .browserslistrc failu, noņemiet iOS safari versiju 15.2–15.3. Tas novērsīs saderības kļūdu rādīšanu konsolē, kad veidojat projektu.

   pēdējā 1 Chrome versija
   pēdējā 1 Firefox versija
   pēdējās 2 Edge galvenās versijas
   pēdējās 2 galvenās Safari versijas
   pēdējās 2 iOS galvenās versijas
   Firefox ESR
   nēios_saf 15.2-15.3
   nēsafari 15.2-15.3

8. Izveidojiet savu kodu, izmantojot būvēt komanda terminālī:

   būvēt

9. Iekš .gitignore fails, noņemt vai komentēt /dist līniju. Noņemot to, tiks nodrošināts dist mape atrodas to failu kopā, kurus nosūtāt uz savu GitHub repozitoriju.

   # /dist

Kā nospiest leņķisko kodu uz GitHub

Jums būs jāsaglabā savs kods attālā repozitorijā, lai Netlify varētu piekļūt avota kodam.

Varat izveidot jaunu repozitoriju vietnē GitHub un nosūtīt savas vietnes kodu uz šo repozitoriju. Ja neesat pazīstams ar GitHub, varētu būt noderīgi saprast dažus no tiem GitHub pamatfunkcijas vispirms.

1. Izveidojiet jaunu repozitoriju vietnē GitHub. To var izdarīt, piesakoties GitHub un noklikšķinot uz Jauns.
2. Ievadiet informāciju par savu jauno repozitoriju. Piešķiriet tai nosaukumu, piemēram, "netlify-app" un aprakstu. Neinicializējiet repozitoriju ar README failu, .gitignore failu vai licenci.
3. Datora terminālī pārejiet uz direktoriju, kurā saglabājāt lietotni Angular. Palaidiet šādas komandas, lai inicializētu savu mapi kā git repozitoriju:

   git init
   git pievienot.
   git apņemties -m "vispirms apņemties"

4. Nosūtiet šajā mapē esošo kodu uz jauno attālo repozitoriju, ko izveidojāt vietnē GitHub. Seko git remote pievienot oriģinālu, git filiāle, un git push komandas, ko GitHub nodrošina jūsu attālā repozitorija lapā:

   git remote pievienot oriģinālu <Jūsu GitHub repo saite>
   git filiāle -M galvenais
   git push -u izcelsmes galvenais

5. Varat apstiprināt, ka jūsu Angular lietotnes kods tagad atrodas attālajā GitHub repozitorijā, atsvaidzinot GitHub krātuves lapu.

Kā izmantot Netlify sava koda mitināšanai

Lai mitinātu savu kodu, izmantojot Netlify, jums būs jāpiešķir tai piekļuve savam GitHub avota kodam. Pēc tam Netlify izmantos dist sava Angular projekta mapi, lai publicētu sava koda iebūvēto versiju.

Varat konfigurēt visus šos iestatījumus, veicot konfigurācijas darbības, veidojot jaunu vietni:

1. Piesakieties vai pierakstieties uz Netlify. To var izdarīt, izmantojot savus GitHub akreditācijas datus.
2. Galvenajā informācijas panelī un vietņu saraksta lapā izvērsiet Pievienot jaunu vietniun atlasiet Importēt esošu projektu.
3. Izvēlieties GitHub.
4. Klikšķiniet uz Konfigurējiet Netlify vietnē GitHub.
5. Klikšķiniet uz Uzstādīt.
6. Netlify parādīs jūsu GitHub repozitoriju sarakstu. Atlasiet to, kuru vēlaties mitināt. Piemēram, ja esat nosaucis savu repozitoriju “netlify-app”, tad sarakstā atlasiet “netlify-app”.
7. Konfigurācijas ekrānā atstājiet Īpašnieks, Filiāle izvietošanai, un Bāzes direktorijs laukiem to noklusējuma vērtībās. Ja publicējat noteiktu nozari, piemēram, atsevišķu “Ražošanas” nodaļu, varat to pievienot Filiāle izvietošanai lauks. Nomaini Veidot komandu lauka uz "ng build". Priekš Publicēt direktoriju lauks, ierakstiet dist/. Ja nezināt, kāds ir projekta nosaukums, varat pāriet uz sava projekta dist mapi, lai to tur atrastu. Piemēram, "dist/netlify-app".
8. Klikšķiniet uz Izvietot vietni.
9. Pagaidiet, līdz izvietošana tiks pabeigta. Tas var ilgt dažas minūtes, un jums, iespējams, būs jāatsvaidzina lapa. Ja viss noritēs labi, izvietošanas sarakstā varēsit redzēt veiksmīgo izvietošanu. Noklikšķiniet uz publicētās izvietošanas, piemēram, Ražošana: main@HEAD.
10. Noklikšķiniet uz Atvērt ražošanas izvietošanu pogu.
11. Tagad varat skatīt savu vietni citā cilnē, izmantojot URL formātā .netlify.app. Ja mitināt vietni ar vairākām novirzīšanas reizēm, iespējams, nevarēsit novirzīt uz citām lapām. Šajā gadījumā ir veids, kā izlabojiet neveiksmīgu novirzīšanu pakalpojumā Netlify. Ja vēlaties, varat arī mainiet savu bezmaksas domēna nosaukumu.

Vietnes mitināšana, izmantojot GitHub un Netlify

Cerams, ka tagad varat veiksmīgi mitināt vietni, izmantojot GitHub un Netlify. Varat iestatīt automātisku izvietošanu noteiktās GitHub repozitorija filiālēs. Tādā veidā jūs varat automatizēt un racionalizēt savas vietnes izvietošanu.

Taču Netlify nav vienīgais veids, kā tiešsaistē izvietot Angular lietotni. Varat arī izmantot citas platformas, piemēram, GitHub Pages.