Jak nastavit kontinuální integraci pro vaši aplikaci Firebase

Jednoho krásného dne jsem se rozhodl, že musím vyzkoušet nové lesklé dítě na trhu, ohnivou základnu.

Firebase přišel s mnoha funkcemi vestavěné a všechny z nich v jednoduché implementaci typu plug and play. Postupem času, když jsme jej získali společností Google, jsme viděli mnoho nových funkcí, jmenovitě velké úložiště souborů a vylepšené ověřování.

Zatím je vše dobré.

Před pár dny jsem přemýšlel o tom, že jsme si společně prohodili aplikaci messenger přes firebase a byla to jízda na horské dráze. Zatímco aplikace sama o sobě je docela přímo vpřed, část CI byla zábavná.

Osobně jsem nikdy nenastavil žádný CI pro žádný z projektů, pro které jsem pracoval. Toto je můj první pokus o vytvoření jednoho. Takže než půjdeme do hloubky, trochu vyloučení odpovědnosti.

V žádném případě to není výukový program ani odborný průvodce. Je to prostě popis mé cesty, abych pochopil nepolapitelný koncept.

Nechtěl jsem si hrát s Jenkinsem na začátku mého vzdělávacího cyklu, a tak jsem se rozhodl pokračovat s Gitlabem CI, protože můj kód už tam byl.

K nastavení CI potřebuje gitlab jednoduše soubor s názvem .gitlab-ci.yml v kořenovém adresáři projektu. Po přidání se integrovaný CI pokusí sestavit váš projekt spuštěním úkolů, jak je uvedeno v YAML.

Dost řečí. Uvidíme nějaký kód :)

Zkusme to rozbít o jeden řádek najednou.

image: node: latest

Tím se do instance vloží nejnovější obrázek uzlu. Protože je moje aplikace postavena na npm, stejně jako v, používám npm jako správce balíčků a tedy i uzel.

before_script:
 - npm prořezat
 - npm instalace
 - npm install -g grunt-cli
 - npm install -g firebase-tools

Tento blok dá pokyn mé CI, aby před provedením kterékoli z mých fází spustila sadu příkazů. Abychom to vzali z vrcholu, máme npm prořezávání, jehož použití podle dokumentace je:

# npm prořezat
Tento příkaz odstraní „cizí“ balíčky. Je-li zadán název balíčku, budou odebrány pouze balíčky odpovídající jednomu z dodaných názvů.
Externí balíčky jsou balíčky, které nejsou uvedeny v seznamu závislostí nadřazeného balíčku.

Poté máme nainstalovanou npm, abychom nainstalovali všechny závislosti mé aplikace.

Npm install -g grunt-cli & npm install -g firebase-tools jsou do značné míry samy vysvětlující. Jinak to Google. :)

etapy:
 - nasazení

Tento blok deklaruje fáze v sestavovacím potrubí. Nyní máme pouze fázi nasazení. Zkontrolujte https://gitlab.com/help/ci/yaml/README.md#stages

V případě potřeby je možné přidat celou sadu.

Jdeme dál

mezipaměti:
 cesty:
 - node_modules /
 klíč: „$ CI_BUILD_REPO“

To je zábavná část. Říká stroji CI, aby mezipaměť složil node_modules napříč sestavením. To znamená, že všechny vaše uzlové moduly nemusí být staženy pokaždé, když spustíte sestavení.

Klíčovým argumentem je vlastně identifikátor, pomocí kterého jsou mezipaměti ověřovány. Přečtěte si https://gitlab.com/help/ci/yaml/README.md#cachekey

deploy_to_firebase:
 fáze: nasazení
 pouze:
 - mistr
 skript:
 - grunt všechny
 - firebase nasadit - token $ FIREBASE_DEPLOY_KEY

Nakonec máme nasazovací část. Tento blok byl označen jako deploy_to_firebase. Je to spíš jako zakázka. Přichází se sadou úkolů, které musí CI spouštět. Jít po řadě,

fáze: nasazení

Tím se označí fáze, na kterou tato úloha odkazuje. V tomto případě je nasazení.

pouze:
 - mistr

To říká, že CI má spustit sestavení pouze tehdy, když se změní hlavní větve git. Přečtěte si https://git-scm.com/book/en/v2/Git-Branching-Branches-in-a-Nutshell.

skript:
 - grunt všechny
 - firebase nasadit - token $ FIREBASE_DEPLOY_KEY

Toto je poslední část vlastní implementační úlohy.

Zde žádáme CI, aby všechny naše přednastavené úlohy grunt spustily.

Tato úloha transpiluje ES6, kompiluje můj JSX, minifikuje můj CSS a nakonec zkopíruje přes vestavěné soubory do adresáře buildu pro nasazení přes drát k ohniště.

Pak je zde: nasazení firebase - token $ FIREBASE_DEPLOY_KEY

$ FIREBASE_DEPLOY_KEY je ve skutečnosti chráněná proměnná. To je používáno příkazem rozmístění k ověření pomocí firebase, že nasazení je platné. Protože se jedná o přístupový token, nesmí být vystaven jako součást kódu. Proto je to udržováno jako proměnná env.

$ FIREBASE_DEPLOY_KEY je generován příkazem firebase login: ci. Přečtěte si https://firebase.google.com/docs/cli/#administrativní_příkazy.

A to je vše.

Push to main, a to by mělo začít stavět.

Hodně štěstí a rychlost boha :)

PS: přečtěte si informace o ES6, React and grunt a v případě potřeby se ke mně vraťte k komentářům.