Jsem úplný noob, pokud jde o vývoj webových aplikací, ale každý den se zdokonaluji v technických dovednostech. Snažil jsem se, aby byl tento příspěvek co nejjednodušší, aby mohl pomoci začátečníkům, jako jsem já. Postaral jsem se o všechny kroky a kódy, které jsem zmínil v tomto příspěvku na blogu, ale pokud najdete nějaké chyby nebo byste chtěli něco navrhnout, neváhejte se vyjádřit. Byl bych vám vděčný.
Statické stránky jsou rychlé, bezpečné, flexibilní a spolehlivé. Nemusíte se bát, že by se na váš web vložil škodlivý kód. Náklady na hosting statických stránek jsou výrazně levnější. Nebudu zabíhat do podrobností o tomto tématu, ale zde je skvělý článek o statických webech od Scotch.
V tomto blogovém příspěvku se chystám nasadit statický web na Google Firebase, a to také ZDARMA. Příspěvek je průvodcem krok za krokem a bude užitečný, zejména pro nováčky v oblasti techniky.
Firebase získal Google v roce 2014. Je postaven na infrastruktuře Google a pomáhá vám rychle vytvářet vysoce kvalitní aplikace, a to i bez správy infrastruktury. Google Firebase vám umožňuje hostovat váš statický obsah zdarma v rámci plánu Spark. Přečtěte si více o hostování Firebase.
Předpoklady
Jak jsem řekl, tento návod je čistě pro začátečníky. K hostování vašeho statického webu tedy potřebujete pouze:
- Účet Google
- Notebook nebo stolní počítač s operačním systémem Windows
- Znalost základních funkcí klávesnice vašeho notebooku nebo stolního počítače
A je to. Začněme.
Krok 1:Vytvořte projekt ve službě Google Firebase
Zaregistrujte svůj účet na Google Firebase. Vytvořte si účet Google, pokud jej nemáte. V konzole Firebase klikněte na Přidat projekt.
Zadejte název projektu, ID projektu (Volitelné, protože Firebase automaticky přiřadí jedinečné ID vašemu projektu Firebase). Prozatím použijte výchozí nastavení a klikněte na Vytvořit projekt.
Jakmile je projekt vytvořen, klikněte na tlačítko Pokračovat a budete přesměrováni na svůj Firebase Dashboard. Zde najdete několik podrobností:
1. Aktuální projekt je „newspaper-tech-demo“. Kliknutím na rozbalovací nabídku zobrazíte všechny své projekty, pokud jste jich vytvořili více.
2. Aktuální projekt je nastaven na „newspaper-tech-demo“.
3. Kliknutím na ikonu nastavení projektu můžete nakonfigurovat nastavení pro aktuální projekt. Prozatím to nechte tak, jak to je.
4. Tuto kartu Hosting použijeme k nasazení našeho statického webu.
5. Váš plán Firebase je Spark, který je zdarma. Podívejte se na všechny tarify a ceny Firebase.
Krok 2:Nastavte potřebné nástroje
Chcete-li hostovat svůj web, musíte nainstalovat nástroje příkazového řádku Firebase.
1. Stáhněte a nainstalujte Node.js pro Mac/Linux/Windows. Používám Windows 10 64-bit. Ujistěte se, že jste si stáhli verzi LTS doporučenou pro většinu uživatelů.
2. Otevřete prostředí Windows PowerShell. Chcete-li otevřít, stiskněte současně tlačítka Windows+X pomocí klávesnice a poté klikněte na „Windows PowerShell Admin“. Po zobrazení výzvy Řízení uživatelských účtů klikněte na Ano.
3. Nainstalujte nástroje příkazového řádku Firebase spuštěním následujícího příkazu v prostředí PowerShell:
$ npm install -g firebase-tools
Tento příkaz nainstaluje globálně dostupný příkaz firebase. Pokud výše uvedený příkaz nefunguje, změňte oprávnění npm a spusťte příkaz znovu. Abyste se ujistili, že máte nejnovější verzi Firebase CLI (rozhraní příkazového řádku), spusťte výše uvedený příkaz znovu, i když jste nástroje příkazového řádku nainstalovali dříve.
Krok 3:Vytvořte svůj web lokálně pomocí Firebase
V již otevřeném terminálu spusťte následující příkaz pro přihlášení do Google.
$ firebase login
Spuštěním tohoto příkazu se otevře okno výchozího prohlížeče a požádá vás o udělení přístupu Gmailu k Firebase. Klikněte na tlačítko Povolit a připojte se ke svému e-mailu. Pokud nemáte účet Gmail, vytvořte si jej. Pro přístup můžete otevřít bránu firewall systému Windows. Stačí povolit nebo kliknout na Ano.
Tento příkaz připojí váš místní počítač k Firebase a udělí vám přístup k vašim projektům Firebase. V shellu uvidíte zprávu „úspěch:přihlášení jako...“.
Chcete-li otestovat, zda autentizace fungovala (a zobrazit seznam všech svých projektů Firebase), spusťte další příkaz. Zobrazený seznam by měl být stejný jako u projektů Firebase uvedených v konzole Firebase.
$ firebase list
Chcete-li připojit svůj místní projekt k projektu Firebase, spusťte následující příkaz z kořenového adresáře místního projektového adresáře.
$ firebase init
Po spuštění výše uvedeného příkazu se zobrazí adresář vašeho projektu. Adresář projektu bude umístěn ve složce na této cestě „C:\Windows\System32“. Název pracovní složky bude takový, jak jej pojmenujete. Ve výchozím nastavení jej Firebase pojmenuje jako „veřejné“. To uvidíme za chvíli. Prozatím zadejte Y nebo Yes a stiskněte tlačítko Enter pro pokračování v krocích.
Příkaz firebase init vám nabízí řadu možností konfigurace. Musíte si vybrat Hosting. Přejděte dolů stisknutím šipky dolů na klávesnici a poté stisknutím mezerníku vyberte funkci Hosting. Pokračujte stisknutím tlačítka Enter.
Nyní se vám zobrazí Project Setup.
Vyberte svůj projekt, který jste dříve vytvořili v konzole Firebase. Název projektu, který jsem vytvořil, byl „thenewspaper-tech-demo“. Zde také můžete vytvořit nový projekt.
Nyní se vám zobrazí nastavení hostingu. Budete si muset vybrat adresář projektu. Zadejte adresář, který chcete použít jako veřejný kořenový adresář. Chcete-li zadat, napište public a stiskněte Enter. Všimněte si, že místo „public“ můžete zadat jiný název (např. „my_first_project“). V tomto okamžiku zadejte svůj veřejný kořenový adresář, ale můžete jej určit i později úpravou konfiguračního souboru firebase.json.
Chcete-li nastavit další produkty Firebase, můžete spustit Firebase init později. Výchozí veřejný kořenový adresář se nazývá public, který se nachází zde „C:\Windows\System32\public“. Je zajímavé poznamenat, že Firebase dělá několik chytrých věcí automaticky:
1. Vytvoří veřejný adresář, pokud jej nevytvoříte vy.
2. V adresáři vytvoří soubor index.html a soubor 404.html. Otevřete veřejnou složku, abyste viděli oba soubory.
Dále budete muset zvolit konfiguraci pro váš web.
Pokud se rozhodnete vytvořit jednostránkovou aplikaci, Firebase za vás automaticky přidá konfigurace přepisu. Protože nechci přepisovat adresy URL, zvolím N a stisknu Enter.
Tím dokončíte proces inicializace Firebase. Všimněte si, že příkaz firebse init přidá několik souborů do kořenového adresáře místního webu:
– Soubor json, firebase.json , který ukazuje konfiguraci projektu.
– Soubor .firebaserc, který poskytuje informace o aliasech projektu.
Nyní spustíme místní server pro vývoj. Spusťte následující příkaz z kořenového adresáře místní aplikace:
$ firebase serve
Tento příkaz bude sloužit hostování souborů z veřejného adresáře a spustí místní server.
Otevřete prohlížeč a zadejte:http://localhost:5000
Lokálně jste tedy vytvořili svůj web, který obsahuje obsah, který vidíte na výše uvedeném snímku obrazovky.
Nyní změníme obsah webu a přebudujeme web, abychom viděli aktualizovaný obsah. Nejprve přejděte do vyskakovacího okna prostředí Windows PowerShell, které je již otevřené. Vypněte místní server. Chcete-li to provést, klikněte kamkoli do vyskakovací oblasti a stiskněte tlačítko CNTRL+C. Vypne se.
Jak jsem již dříve ukázal, soubory html se nacházejí zde „C:\Windows\System32\public“. Přejděte do složky, zkopírujte indexový html soubor a vložte soubor na plochu. Nyní klikněte pravým tlačítkem a otevřete soubor indexu html pomocí libovolného textového editoru. Používám Visual Studio Code. Ve výchozím nastavení uvidíte Poznámkový blok ve vyskakovacím okně po kliknutí pravým tlačítkem. Pokud poznámkový blok nevidíte, vyberte jinou možnost aplikace a na konci přejděte dolů a vyberte Další aplikace. Odtud vyberte Poznámkový blok.
Po otevření indexového souboru html změňte slovo „Vítejte“ na „Hello World.“
Uložte soubor. Jednoduše stiskněte CNTRL+S pro uložení. Výstup bude vypadat takto:
Nyní zkopírujte upravený soubor indexu a vložte jej do veřejné složky. Chcete-li to provést, musíte být správcem počítače. Dejte svolení k vložení. Spusťte znovu následující příkaz pro spuštění místního serveru
$ firebase serve
Tento příkaz bude sloužit hostování souborů z veřejného adresáře a spustí místní server. Otevřete prohlížeč a zadejte:http://localhost:5000. Uvidíte své změny.
Krok 4:Implementujte svůj web
Nyní tento projekt nasadíme. Nejdříve ale vypněte místní server, jak jsem dříve nařídil.
Chcete-li nasadit do našeho projektu Firebase „thenewspaper-tech-demo“, spusťte z adresáře projektu následující příkaz:
$ firebase deploy
Tento příkaz nasazení Firebase nasadí vydání na výchozí hostitelské weby vašeho projektu Firebase:
project-id.web.app project-id.firebaseapp.com
Takže uvidíte své stránky, které budou vypadat podobně jako tyto adresy URL:
https://thenewspaper-tech-demo.web.app https://thenewspaper-tech-demo.firebaseapp.com
Tyto adresy URL můžete také zobrazit, když přejdete do sekce Hosting v konzole Firebase.
Gratuluji! Nasadili jste svůj první statický web s Firebase, a to také zdarma.
Poznámka :Měli byste si uvědomit, že náš projekt je prozatím umístěn v C-drive. Když jsem se poprvé pokoušel nasadit své statické soubory, postupoval jsem podle oficiálního výukového programu firebase. A protože jsem sám začátečník, šel jsem s proudem. Ale když jsem se pokusil inicializovat skutečný projekt v jiné jednotce, nikdy mi to nefungovalo. Pokud máte stejný problém, zde je řešení. Říká:„Když se spustí firebase init, přejde do stromu adresářů a hledá nadřazený adresář, který je již inicializován jako projekt Firebase.“
- Vyhledejte soubor firebase.json v umístění /Users/SEB.
- Smažte tento soubor, pokud existuje.
- Problém bude opraven
Abyste se vyhnuli všem těmto problémům, navrhuji, abyste před spuštěním jakýchkoli příkazů Firebase inicializovali projekt v požadované složce. K tomu musíte nejprve otevřít PowerShell v této složce. Zde je rychlý průvodce otevřením PowerShellu v požadované složce.