Jak hostovat Angular web pomocí Netlify a GitHub

Při online hostování webu Angular si můžete vybrat z mnoha dostupných platforem. Jedním z nich, který můžete používat zdarma, je Netlify.

Pokud uložíte kopii zdrojového kódu svého webu do úložiště GitHub, můžete k hostování tohoto webu použít Netlify.

Netlify také automaticky znovu nasadí váš web, když vložíte jakékoli nové změny do větve úložiště, kterou hostujete.

Jak vytvořit základní příklad Angular App

Můžete vytvořit jednoduchou aplikaci Angular pomocí editoru, jako je Visual Studio Code. Poté můžete tento web hostovat pomocí Netlify.

1. Vytvořit nová aplikace Angular.
2. Vytvořte jednoduchou domovskou stránku. Nahraďte kód v app.component.html soubor s následujícím obsahem vstupní stránky:

   <třída div="kontejner-tmavá hlavička
   
   
   
   
   
   instagram viewer
   
   ">
   <h2>Naše obchodní webové stránky</h2>
   </div>
   <třída div="nádoba-bílá">
   <třída div="obsah">
   <h2>Naše obchodní webové stránky</h2>
   <p>Naučte se během okamžiku navrhovat, vyvíjet a udržovat své profesionální webové stránky.</str>
   </div>
   </div>
   <třída div="nádoba-oranžová">
   <třída div="obsah">
   <h2>Co děláme</h2>
   <p>Dáme vám nástroje pro vývoj webových stránek a jedinečných řešení pro vaše zákazníky. Poskytujeme také školení pro
    údržba a další témata související s webem.</str>
   </div>
   </div>
   <třída div="nádoba-bílá">
   <třída div="obsah">
   <h2>O nás</h2>
   <p>Jsme malá firma působící v Melbourne v Austrálii. Naše prostory jsou jedinečně zpracované, takže je mohou využívat i klienti
    navštivte nás osobně.</str>
   </div>
   </div>
   <třída div="nádoba-tmavá zápatí">
   <p>Copyright 2022</str>
   </div>

3. Přidejte do aplikace Angular nějaký styl přidáním CSS do aplikace app.component.css soubor:

   * {
    rodina písem: "Arial", bezpatkové;
   }
   .záhlaví {
    odsazení: 30px 50px;
   }
   .zápatí {
    odsazení: 5px 50px;
    text-align: center;
   }
   .nádoba-tmavá {
    barva pozadí: #202C39;
    barva bílá;
    displej: flex;
    align-items: center;
   }
   .nádoba-oranžová {
    barva pozadí: #FFD091;
    barva: #202C39;
   }
   .nádoba-bílá {
    barva pozadí: whitesmoke;
    barva: #202C39;
   }
   .obsah {
    odsazení: 100px 25%;
    displej: flex;
    směr ohybu: sloupec;
    výška čáry: 2rem;
   velikost písma: 10,2 em;
    align-items: center;
    text-align: center;
   }

4. Přidejte nějaký styl pro celkovou aplikaci Angular styly.css:

   tělo {
    okraj: 0;
    výplň: 0;
   }

5. Chcete-li aplikaci otestovat, přejděte do její kořenové složky pomocí terminálu nebo příkazového řádku. Zadejte ng sloužit příkaz:

   ng sloužit

6. Počkejte, až se váš kód zkompiluje, a navštivte http://localhost: 4200/ ve webovém prohlížeči pro zobrazení aplikace.
7. V .browserslistrc odeberte iOS safari verze 15.2-15.3. Tím zabráníte zobrazení chyb kompatibility v konzole při sestavování projektu.

   poslední 1 verze Chrome
   poslední 1 verze Firefoxu
   poslední 2 hlavní verze Edge
   poslední 2 hlavní verze Safari
   poslední 2 hlavní verze iOS
   Firefox ESR
   neios_saf 15.2-15.3
   nesafari 15.2-15.3

8. Sestavte svůj kód pomocí ng stavět příkaz v terminálu:

   ng stavět

9. V .gitignore soubor, odstranit nebo okomentovat /dist čára. Jeho odstraněním se zajistí dist složka je v sadě souborů, které odešlete do svého úložiště GitHub.

   # /vzd

Jak poslat svůj úhlový kód na GitHub

Chcete-li získat přístup ke zdrojovému kódu, budete muset svůj kód uložit do vzdáleného úložiště Netlify.

Na GitHubu můžete vytvořit nové úložiště a odeslat kód svého webu do tohoto úložiště. Pokud neznáte GitHub, může být užitečné některé z nich pochopit Základní funkce GitHubu První.

1. Vytvořte nové úložiště na GitHubu. Můžete to udělat tak, že se přihlásíte na GitHub a kliknete na Nový.
2. Zadejte podrobnosti o vašem novém úložišti. Zadejte název, například „netlify-app“, a popis. Neinicializujte úložiště pomocí souboru README, souboru .gitignore nebo licence.
3. V terminálu na vašem počítači přejděte do adresáře, kde jste uložili aplikaci Angular. Spusťte následující příkazy pro inicializaci složky jako úložiště git:

   git init
   git přidat.
   git spáchat -m "první spáchat"

4. Vložte kód uvnitř této složky do nového vzdáleného úložiště, které jste vytvořili na GitHubu. Následuj git remote přidat originál, větev git, a git push příkazy poskytované GitHubem na stránce vzdáleného úložiště:

   git remote přidat originál <Odkaz na váš repo GitHub>
   git větev -M main
   git push -u původ main

5. Můžete potvrdit, že váš kód aplikace Angular je nyní ve vašem vzdáleném úložišti GitHub obnovením stránky úložiště GitHub.

Jak používat Netlify k hostování kódu

Chcete-li hostovat svůj kód pomocí Netlify, budete mu muset udělit přístup ke zdrojovému kódu GitHubu. Netlify pak použije dist složku vašeho projektu Angular pro publikování sestavené verze vašeho kódu.

Všechna tato nastavení můžete nakonfigurovat podle následujících kroků konfigurace při vytváření nového webu:

1. Přihlaste se nebo se zaregistrujte Netlify. Můžete tak učinit pomocí svých přihlašovacích údajů GitHub.
2. Na hlavním panelu a stránce se seznamem webů rozbalte Přidat nový weba vyberte Import existujícího projektu.
3. Vybrat GitHub.
4. Klikněte na Nakonfigurujte Netlify na GitHubu.
5. Klikněte na Nainstalujte.
6. Netlify zobrazí seznam vašich repozitářů GitHub. Vyberte ten, který chcete hostit. Pokud jste například své úložiště pojmenovali „netlify-app“, vyberte ze seznamu „netlify-app“.
7. Na konfigurační obrazovce ponechte Majitel, Větev k nasazení, a Základní adresář pole na jejich výchozí hodnoty. Pokud jste publikovali konkrétní větev, například samostatnou větev „Výroba“, můžete ji přidat do Větev k nasazení pole. Změň Příkaz sestavení pole na "ng build". Pro Publikovat adresář pole, zadejte dist/. Pokud nevíte, jaký je název projektu, můžete přejít do dist složky vašeho projektu a najít jej tam. Například „dist/netlify-app“.
8. Klikněte na Nasadit web.
9. Počkejte na dokončení nasazení. To může trvat několik minut a může být nutné obnovit stránku. Pokud vše půjde dobře, budete moci vidět úspěšné nasazení v seznamu nasazení. Klikněte na publikované nasazení, např. Produkce: main@HEAD.
10. Klikněte na Otevřené produkční nasazení knoflík.
11. Nyní můžete svůj web zobrazit na jiné kartě pomocí adresy URL ve formátu .netlify.app. Pokud hostujete web s více přesměrováními, možná nebudete moci přesměrovat na jiné stránky. V tomto případě existuje způsob opravit chybné přesměrování na Netlify. Pokud chcete, můžete také upravte svůj bezplatný název domény.

Hosting vašeho webu pomocí GitHubu a Netlify

Doufejme, že nyní můžete úspěšně hostovat web pomocí GitHubu a Netlify. Můžete nastavit automatická nasazení do určitých větví úložiště GitHub. Tímto způsobem můžete zautomatizovat a zefektivnit nasazení vašeho webu.

Netlify však není jediný způsob, jak můžete nasadit aplikaci Angular online. Můžete také použít jiné platformy, jako jsou stránky GitHub.