Szögletes webhely üzemeltetése a Netlify és a GitHub használatával

Angular webhely online tárolásakor számos elérhető platform közül választhat. Ezek egyike, amelyet ingyenesen használhat, a Netlify.

Ha webhelye forráskódjának másolatát egy GitHub-tárolóban tárolja, a Netlify segítségével tárolhatja a webhelyet.

A Netlify emellett automatikusan újratelepíti webhelyét, amikor bármilyen új módosítást végrehajt az Ön által üzemeltetett adattár-ágon.

Alapvető példa Angular alkalmazás létrehozása

Létrehozhat egy egyszerű Angular alkalmazást egy szerkesztő, például a Visual Studio Code segítségével. Ezt a webhelyet a Netlify segítségével tárolhatja.

1. Hozzon létre egy új Angular alkalmazás.
2. Hozzon létre egy egyszerű kezdőlapot. Cserélje ki a kódot a app.component.html fájl a következő céloldal tartalmával:
   instagram viewer

   <div class="konténer-sötét fejléc">
   <h2>Üzleti Weboldalunk</h2>
   </div>
   <div class="konténer-fehér">
   <div class="tartalom">
   <h2>Üzleti Weboldalunk</h2>
   <p>Tanulja meg, hogyan tervezheti meg, fejlesztheti és karbantarthatja professzionális webhelyét pillanatok alatt.</p>
   </div>
   </div>
   <div class="konténer-narancs">
   <div class="tartalom">
   <h2>Amit csinálunk</h2>
   <p>Eszközöket biztosítunk webhelyek és egyedi megoldások fejlesztéséhez ügyfelei számára. képzést is biztosítunk
    karbantartás és egyéb weboldallal kapcsolatos témák.</p>
   </div>
   </div>
   <div class="konténer-fehér">
   <div class="tartalom">
   <h2>Rólunk</h2>
   <p>Egy kisvállalkozás vagyunk, amely Melbourne-ben, Ausztráliában működik. Területeink egyedi kialakításúak, így ügyfeleink is megtehetik
    látogasson el hozzánk személyesen.</p>
   </div>
   </div>
   <div class="konténer-sötét lábléc">
   <p>Copyright 2022</p>
   </div>

3. Adjon hozzá némi stílust az Angular alkalmazáshoz CSS hozzáadásával app.component.css fájl:

   * {
    betűtípus család: "Arial", sans-serif;
   }
   .fejléc {
    padding: 30px 50px;
   }
   .lábléc {
    padding: 5px 50px;
    szöveg igazítása: középre;
   }
   .konténer-sötét {
    háttérszín: #202C39;
    fehér szín;
    kijelző: flex;
    align-ites: center;
   }
   .konténer-narancs {
    háttérszín: #FFD091;
    szín: #202C39;
   }
   .konténer-fehér {
    háttérszín: fehér füst;
    szín: #202C39;
   }
   .tartalom {
    padding: 100px 25%;
    kijelző: flex;
    hajlítási irány: oszlop;
    vonalmagasság: 2 rem;
   betűméret: 1.2em;
    align-ites: center;
    szöveg igazítása: középre;
   }

4. Adjon hozzá némi stílust az Angular alkalmazáshoz stílusok.css:

   body {
    margó: 0;
    párnázás: 0;
   }

5. Az alkalmazás teszteléséhez terminál vagy parancssor segítségével lépjen a gyökérmappájába. Írja be a ng szolgálni parancs:

   ng szolgálni

6. Várja meg, amíg lefordítja a kódot, és látogasson el http://localhost: 4200/ egy webböngészőben az alkalmazás megtekintéséhez.
7. Ban,-ben .browserslistrc fájlt, távolítsa el az iOS safari 15.2-15.3 verzióját. Ez megakadályozza, hogy kompatibilitási hibák jelenjenek meg a konzolon a projekt összeállításakor.

   utolsó 1 Chrome-verzió
   utolsó 1 Firefox verzió
   utolsó 2 Edge főverziók
   utolsó 2 Safari főverzió
   utolsó 2 iOS főverzió
   Firefox ESR
   nemios_saf 15.2-15.3
   nemszafari 15.2-15.3

8. Készítse el kódját a ng build parancs a terminálban:

   ng build

9. Ban,-ben .gitignore fájlt, távolítsa el vagy kommentálja a /dist vonal. Eltávolítása biztosítja a ker mappa a GitHub-tárhelyre feltöltött fájlkészletben található.

   # /dist

Hogyan küldje el az Angular kódot a GitHubba

A kódot egy távoli tárolóban kell tárolnia, hogy a Netlify hozzáférjen a forráskódhoz.

Létrehozhat egy új tárat a GitHubon, és elküldheti webhelye kódját ebbe a tárolóba. Ha nem ismeri a GitHubot, hasznos lehet megérteni néhányat A GitHub alapvető funkciói első.

1. Hozzon létre egy új tárolót a GitHubon. Ezt úgy teheti meg, hogy bejelentkezik a GitHubba, és rákattint Új.
2. Adja meg az új tárhely adatait. Adjon neki egy nevet, például "netlify-app" és egy leírást. Ne inicializálja a tárat README fájllal, .gitignore fájllal vagy licenccel.
3. A számítógépén lévő terminálban lépjen abba a könyvtárba, ahol az Angular alkalmazást tárolta. Futtassa a következő parancsokat a mappa git-tárhelyként történő inicializálásához:

   git init
   git add .
   git elkövetni -m "először elkövetni"

4. Tolja a kódot ebben a mappában a GitHubon létrehozott új távoli tárolóba. Kövesd a git remote add hozzá az eredetit, git ág, és git push a GitHub által a távoli tárhely oldalán megadott parancsok:

   git remote add hozzá az eredetit <Az Ön GitHub repo linkje>
   git ág -M fő
   git push -u eredet fő

5. A GitHub tárhely oldalának frissítésével megerősítheti, hogy az Angular alkalmazás kódja a távoli GitHub-tárhelyen van.

A Netlify használata a kód tárolására

A Netlify használatával való tároláshoz hozzáférést kell adnia a GitHub forráskódjához. A Netlify ezután a ker Az Angular projekt mappájába a kód beépített verziójának közzétételéhez.

Ezeket a beállításokat az alábbi konfigurációs lépések követésével konfigurálhatja új webhely létrehozásakor:

1. Jelentkezzen be vagy iratkozzon fel Netlify. Ezt megteheti a GitHub hitelesítő adataival.
2. A fő irányítópulton és a webhelylista oldalon bontsa ki Új webhely hozzáadásaés válassza ki a lehetőséget Meglévő projekt importálása.
3. Válassza ki GitHub.
4. Kattintson Konfigurálja a Netlify-t a GitHubon.
5. Kattintson Telepítés.
6. A Netlify megjeleníti a GitHub-tárolók listáját. Válassza ki azt, amelyiket fogadni szeretne. Például, ha a tárhelyet „netlify-app”-nak nevezte el, akkor válassza ki a „netlify-app” lehetőséget a listából.
7. A konfigurációs képernyőn hagyja el a Tulajdonos, Telepítendő ág, és Alapkönyvtár mezőket az alapértelmezett értékükön. Ha egy adott ágat tesz közzé, például egy különálló „Termelés” ágat, akkor ezt hozzáadhatja a Telepítendő ág terület. Változtasd meg a Építési parancs mezőben az "ng build"-re. A Könyvtár közzététele mező, írja be a dist/. Ha nem tudja, mi a projekt neve, navigálhat a projekt dist mappájába, hogy ott megtalálja. Például: „dist/netlify-app”.
8. Kattintson Telepítse a webhelyet.
9. Várja meg, amíg a telepítés befejeződik. Ez eltarthat néhány percig, és előfordulhat, hogy frissítenie kell az oldalt. Ha minden jól megy, a telepítések listájában láthatja a sikeres telepítést. Kattintson például a közzétett telepítésre, Gyártás: main@HEAD.
10. Kattintson a Nyissa meg a termelési telepítést gomb.
11. Most megtekintheti webhelyét egy másik lapon, a következő formátumú URL használatával .netlify.app. Ha több átirányítással rendelkező webhelyet üzemeltet, előfordulhat, hogy nem tud átirányítani más oldalakra. Ebben az esetben van rá mód Javítson ki egy sikertelen átirányítást a Netlify-on. Ha akarod, azt is megteheted módosítsa ingyenes domain nevét.

Webhelyének tárolása a GitHub és a Netlify használatával

Remélhetőleg most már sikeresen hostolhat egy webhelyet a GitHub és a Netlify használatával. Beállíthat automatikus központi telepítést a GitHub-tárak bizonyos ágaiban. Így automatizálhatja és egyszerűsítheti webhelye telepítését.

De a Netlify nem az egyetlen módja annak, hogy egy Angular alkalmazást online telepítsen. Más platformokat is használhat, például a GitHub Pages-t.