Az Angular-alkalmazások GitHub-oldalakon történő telepítése nagyszerű módja annak, hogy ingyenesen tárolja őket. Az Angular egy népszerű JavaScript-keretrendszer egyoldalas alkalmazások készítésére.
Az Angular átfogó parancssori felülettel rendelkezik, amely támogatja a JavaScript-alkalmazások gyors felépítését és beállítását. Az Angular CLI számos parancsot tartalmaz alkalmazás-összetevők létrehozására, felépítésére, kiszolgálására és generálására.
A CLI segítségével az Angular-alkalmazásokat különféle célokra, például GitHub-oldalakra is telepítheti.
Amire szükséged van
Ahhoz, hogy a legtöbbet hozhassa ki ebből az útmutatóból, a következő készségekkel és eszközökkel kell rendelkeznie:
- Ismerősnek kell lennie az Angular alapjai, mint például az alkalmazások fogalma, a beállítások, az URL-ek stb.
- Ön ismeri a GitHub alapjai és Git, például egy GitHub-fiók létrehozása, egy git-tár létrehozása (repo) és GitHub-oldalak (GH-oldalak).
- Angular alkalmazás készen áll a telepítésre.
- Az alap URL a megfelelő útvonalon található. A GH-oldalakra való telepítés meghiúsul, mert rossz a base-href (base-url) beállítása.
- GitHub fiók.
- Egy GitHub-tárház (repo) alkalmazáskóddal.
Most, hogy mindezek a helyükön vannak, kezdjük el a telepítési folyamatot.
Telepítési folyamat
Kezdésként létre kellett volna hoznia egy GitHub-tárolót a projekthez, és el kellett volna küldenie a kódot a fő/mester ág.
Ezután hozzon létre egy GH-oldalak ágat.
1. Hozzon létre egy GH-oldalak ágat
Ez egy feltörés, amely segít elérni a GH-oldalak hivatkozását az alap-href beállításához.
Először hozzon létre GH-oldalakat a helyi tárolóban a következő paranccsal:
git branch gh-oldalak
Ezután lépjen a fő ágról a GH-oldalakra az összes kód átviteléhez.
git checkout gh-pages
Ezután tolja a GH-oldalakat a GitHubba egy távoli GH-oldalak ág létrehozásához.
git push eredetű gh-oldalak
Az eszköztáron a repo neve alatt kattintson a gombra Beállítások > Oldalak.
Alatt Felépítés és telepítés, válassza ki Telepítés egy fiókból. Ezután válassza ki gh-oldalak az ág neveként, majd kattintson Megment. Ezzel létrehoz egy GH-oldalak hivatkozást a jobb felső sarokban, a GH-oldalak címke alatt.
Ezután másolja ki ezt a linket a közzétett webhelyre az alábbi ábra szerint. A hivatkozás segítségével beállíthatja az alaphivatkozást a telepítés során.
3. Az Angular-CLI-GHpages telepítése
Az angular-cli-ghpages csomag egy olyan eszköz, amelyet az Angular CLI használ telepítési célokra.
Lépjen vissza a helyi projekttárhoz. Ezután telepítse és futtassa az angular-cli-ghpaget ezzel a paranccsal:
ng angular-cli-ghpages hozzáadása
4. Telepítse az alkalmazást
Az alkalmazás éles üzemben történő létrehozásához csatlakoznia kell egy távoli kiszolgálóhoz a GitHubon.
Konfigurálja az alkalmazást egy távoli szerverhez a következő parancs futtatásával:
ng deploy --base-href=https://GithubUserName.github.io/GithubRepoName/
Ne felejtse el lecserélni a fenti linket a GH oldalak élő linkjére
A sikeres felépítés az alábbi ábra szerint fog kinézni:
Ezután lépjen a GitHub oldalra, és kattintson a GH-oldalak hivatkozásra a telepített projekt megtekintéséhez.
Gratulálunk, telepítette az Angular alkalmazást!
Ha a hivatkozás csak a README fájlt jeleníti meg, lépjen vissza a GitHub GH-oldalak beállításaihoz. Győződjön meg arról, hogy a kiválasztott ág gh-oldalak, és nem a fő vagy a fő ág. Ezután adjon öt percet, és töltse újra. Néha a GitHubnak időbe telik, hogy tükrözze a változásokat.
Ha többet szeretne megtudni arról, hogyan használhatja az Angular CLI-t a telepítés során, látogasson el a következő oldalra Szögletes dokumentáció.
Angular alkalmazás üzembe helyezése a GitHub oldalakon
Számos módja van az Angular alkalmazások GH-oldalakra történő telepítésének, de ez a módszer a legegyszerűbb. Beállítja a GH-oldalak repóhivatkozását, és az Angular-CLI-vel együtt használja az alkalmazás GitHub-oldalakon való üzembe helyezéséhez.
Az Angular és Angular CLI segítségével sokkal többet tehet. Bátran fedezze fel. Használja a CLI-t az alkalmazások telepítéséhez a GH-oldalakra az alkalmazások ingyenes láthatósága és tárhelyszolgáltatása érdekében.