Kako gostiti spletno mesto Angular z uporabo Netlify in GitHub

Pri spletnem gostovanju spletnega mesta Angular lahko izbirate med številnimi razpoložljivimi platformami. Eden od teh, ki ga lahko uporabljate brezplačno, je Netlify.

Če shranite kopijo izvorne kode svojega spletnega mesta v repozitorij GitHub, lahko uporabite Netlify za gostovanje tega spletnega mesta.

Netlify prav tako samodejno premesti vaše spletno mesto, ko potisnete kakršne koli nove spremembe v vejo repozitorija, ki jo gostite.

Kako ustvariti osnovni primer Angular aplikacije

Preprosto aplikacijo Angular lahko ustvarite z urejevalnikom, kot je Visual Studio Code. Nato lahko to spletno stran gostite z Netlifyjem.

1. Ustvariti nova aplikacija Angular.
2. Ustvarite preprosto domačo stran. Zamenjajte kodo v
   instagram viewer
   app.component.html datoteka z naslednjo vsebino ciljne strani:

   <razred div="vsebnik-temna glava">
   <h2>Naše poslovno spletno mesto</h2>
   </div>
   <razred div="posoda-bela">
   <razred div="vsebino">
   <h2>Naše poslovno spletno mesto</h2>
   <str>Naučite se oblikovati, razviti in vzdrževati svoje profesionalno spletno mesto v hipu.</str>
   </div>
   </div>
   <razred div="posoda-oranžna">
   <razred div="vsebino">
   <h2>Kar počnemo</h2>
   <str>Ponujamo vam orodja za razvoj spletnih strani in edinstvene rešitve za vaše stranke. Izvajamo tudi usposabljanje za
    vzdrževanje in druge teme, povezane s spletnim mestom.</str>
   </div>
   </div>
   <razred div="posoda-bela">
   <razred div="vsebino">
   <h2>O nas</h2>
   <str>Smo majhno podjetje, ki posluje iz Melbourna v Avstraliji. Naši prostori so edinstveno oblikovani, tako da lahko tudi stranke
    obiščite nas osebno.</str>
   </div>
   </div>
   <razred div="vsebnik-temna noga">
   <str>Avtorske pravice 2022</str>
   </div>

3. Dodajte nekaj sloga aplikaciji Angular tako, da dodate nekaj CSS-ja app.component.css mapa:

   * {
    družina pisav: "Arial", sans-serif;
   }
   .glava {
    oblazinjenje: 30px 50px;
   }
   .noga {
    oblazinjenje: 5px 50px;
    poravnava besedila: sredina;
   }
   .posoda-temna {
    Barva ozadja: #202C39;
    barva: bela;
    zaslon: flex;
    align-items: center;
   }
   .posoda-oranžna {
    Barva ozadja: #FFD091;
    barva: #202C39;
   }
   .posoda-bela {
    barva ozadja: whitesmoke;
    barva: #202C39;
   }
   .vsebina {
    oblazinjenje: 100 slikovnih pik 25 %;
    zaslon: flex;
    flex-direction: stolpec;
    višina vrstice: 2rem;
   velikost pisave: 1.2em;
    align-items: center;
    poravnava besedila: sredina;
   }

4. Dodajte nekaj sloga za celotno aplikacijo Angular styles.css:

   telo {
    rob: 0;
    oblazinjenje: 0;
   }

5. Če želite preizkusiti aplikacijo, se s terminalom ali ukazno vrstico pomaknite do njene korenske mape. Vnesite ng služijo ukaz:

   ng služijo

6. Počakajte, da se koda prevede, in obiščite http://localhost: 4200/ v spletnem brskalniku, da si ogledate svojo aplikacijo.
7. V .browserslistrc odstranite iOS safari različice 15.2–15.3. To bo preprečilo prikaz napak združljivosti v konzoli, ko gradite projekt.

   zadnja 1 različica Chroma
   zadnja 1 različica Firefoxa
   zadnji 2 glavni različici Edge
   zadnji 2 glavni različici Safarija
   zadnji 2 glavni različici iOS-a
   Firefox ESR
   neios_saf 15.2-15.3
   nesafari 15.2-15.3

8. Zgradite svojo kodo z uporabo ng graditi ukaz v terminalu:

   ng graditi

9. V .gitignore datoteko, odstranite ali komentirajte /dist linija. Če ga odstranite, boste zagotovili dist mapa je v nizu datotek, ki jih potisnete v repozitorij GitHub.

   # /dist

Kako potisnite svojo kodo Angular na GitHub

Svojo kodo boste morali shraniti v oddaljenem repozitoriju, da bo Netlify lahko dostopal do izvorne kode.

Na GitHubu lahko ustvarite novo skladišče in v to skladišče potisnete kodo svojega spletnega mesta. Če niste seznanjeni z GitHubom, bi bilo morda koristno, da nekaj razumete Osnovne funkcije GitHub prvi.

1. Ustvarite novo skladišče na GitHubu. To lahko storite tako, da se prijavite v GitHub in kliknete na Novo.
2. Vnesite podrobnosti za vaš novi repozitorij. Dajte mu ime, na primer "netlify-app", in opis. Repozitorija ne inicializirajte z datoteko README, datoteko .gitignore ali licenco.
3. V terminalu v računalniku se pomaknite do imenika, kjer ste shranili aplikacijo Angular. Zaženite naslednje ukaze, da inicializirate svojo mapo kot repozitorij git:

   git init
   git add.
   git zavezati -m "prvi zavezati"

4. Potisnite kodo znotraj te mape v novo oddaljeno skladišče, ki ste ga ustvarili na GitHubu. Sledite git daljinski dodaj izvirnik, veja git, in git push ukazi, ki jih ponuja GitHub na vaši strani oddaljenega skladišča:

   git daljinski dodaj izvirnik <Vaša povezava do repoja GitHub>
   git veja -M main
   git push -u izvor main

5. Lahko potrdite, da je koda vaše aplikacije Angular zdaj v vašem oddaljenem repozitoriju GitHub, tako da osvežite stran repozitorija GitHub.

Kako uporabljati Netlify za gostovanje kode

Če želite svojo kodo gostiti z Netlifyjem, mu boste morali omogočiti dostop do vaše izvorne kode GitHub. Netlify bo nato uporabil dist mapo vašega projekta Angular, da objavite zgrajeno različico vaše kode.

Vse te nastavitve lahko konfigurirate tako, da sledite konfiguracijskim korakom pri ustvarjanju novega mesta:

1. Prijavite se ali prijavite na Netlify. To lahko storite s svojimi poverilnicami GitHub.
2. Na glavni nadzorni plošči in strani s seznamom spletnih mest razširite Dodajte novo spletno mestoin izberite Uvozi obstoječi projekt.
3. Izberite GitHub.
4. Kliknite na Konfigurirajte Netlify na GitHubu.
5. Kliknite na Namestite.
6. Netlify bo prikazal seznam vaših repozitorijev GitHub. Izberite tistega, ki ga želite gostiti. Na primer, če ste svoje skladišče poimenovali "netlify-app", potem na seznamu izberite "netlify-app".
7. Na konfiguracijskem zaslonu zapustite Lastnik, Podružnica za uvajanje, in Osnovni imenik polja na privzete vrednosti. Če bi objavljali določeno vejo, na primer ločeno vejo »Proizvodnja«, bi to lahko dodali v Podružnica za uvajanje polje. Spremenite Ukaz za gradnjo polje za "ng build". Za Objavi imenik polje, vrsta dist/. Če ne veste imena projekta, se lahko pomaknete do mape dist svojega projekta in ga tam najdete. Na primer "dist/netlify-app".
8. Kliknite na Namestite spletno mesto.
9. Počakajte, da se uvajanje konča. To lahko traja nekaj minut in morda boste morali osvežiti stran. Če bo šlo vse v redu, boste uspešno uvedbo lahko videli na seznamu uvedb. Kliknite svojo objavljeno uvedbo, na primer Produkcija: main@HEAD.
10. Kliknite na Odprta uvedba proizvodnje gumb.
11. Zdaj si lahko ogledate svoje spletno mesto v drugem zavihku z uporabo URL-ja v obliki .netlify.app. Če gostite spletno mesto z več preusmeritvami, morda ne boste mogli preusmeriti na druge strani. V tem primeru obstaja način za popravite neuspešno preusmeritev na Netlify. Če želite, lahko tudi spremenite ime svoje brezplačne domene.

Gostovanje vašega spletnega mesta z uporabo GitHub in Netlify

Upajmo, da lahko zdaj uspešno gostite spletno mesto z uporabo GitHub in Netlify. Nastavite lahko samodejne uvedbe v določene veje repozitorija GitHub. Na ta način lahko avtomatizirate in poenostavite uvajanje svojega spletnega mesta.

Vendar Netlify ni edini način, kako lahko namestite aplikacijo Angular na spletu. Uporabite lahko tudi druge platforme, kot je GitHub Pages.