Šablony, lokální deployment a odevzdání

29.10.2023 | David Rajnoha | Vzdělávací materiály

K úspěšnému odevzdání své aplikace je nutné využít GitHub akci https://github.com/marketplace/actions/upload-app-to-tda, které jako parametry předáte Docker image své aplikace (ve které bude otevřený libovolný port pomocí příkazu EXPOSE PORT v Dockerfile), jeho název a identifikační token (TEAM_SECRET). Připravili jsme pro Vás několik šablon, které se postarají o vytvoření Docker image a spuštění GitHub akce a vykonají tak většinu práce za Vás. Jak je využít, se dozvíte v tomto dokumentu.

Celý tento proces bude podrobně probrán také na prvním a druhém webináři.

Nyní jsou nebo v blízké budoucnosti budou k dispozici následující šablony:

Jak šablonu využít?

 

1. Vytvoření účtu na GitHub

Zaregistrujte se na https://github.com. Jako student si můžete zažádat o GitHub Student Developer Pack, díky kterému získáte přístup k vývojovým nástrojům od JetBrains, vzdělávacím kurzům na Educative, hostingu na Heroku a mnohým dalším službám. Jak na to, se dozvíte v našem dalším článku.

2. Využití šablony

Otevřete si vybranou šablonu a stiskem „Use this template“ vytvořte nový repozitář. Zvažte, zda chcete, aby byl váš kód veřejný, či nikoliv – na základě toho zaškrkněte „Public“ či „Private“. Repozitář pojmenujte TdA24 IdealneNazevTymu. (některé znaky nejdou použít pro název repozitáře, stačí, aby bylo možné ho bezpečně přiřadit k týmu).

3. Přidání Tour-de-App-user

Jděte do Settings → Collaborators → Add people → Tour-de-App-user

4. Team Secret

Jděte do Settings → Secrets → Actions a zvolte „New repository secret“. Ten pojmenujte „TEAM_SECRET“ a jako hodnotu vložte údaj obdržený při registraci. 

5. Lokální spuštění – prerekvizity

Nyní jste připraveni kód naší šablony stáhnout k sobě na počítač, lokálně aplikaci spustit, přidat funkcionalitu, vyzkoušet ji a změny nahrát zpět na GitHub.

Pro lokální spuštění a následný vývoj aplikace dle jedné z našich šablon potřebujete nainstalovanou službu Docker, na operačním systému Windows navíc zprovozněný WSL2. 

Pokud tak nemáte, mrkněte na Instalace Dockeru na Windows. (Pokud používáte Linux, tak vám věříme, že to zvládnete sami ;).) Pokud narazíte na nějaký problém, ozvěte se nám na náš Discord, rádi Vám pomůžeme.

K ukázce je použito vývojové prostředí PhpStorm, které si stáhnete dle instrukcí na https://www.jetbrains.com/phpstorm/download/. Jako studenti máte nárok na premium verze všech produktů od JetBrains. Jak je získat, zjistíte v již zmíněném článku.

6. Lokální spuštění

Otevřete si PhpStorm a při výběru nového projektu vyberte možnost Get from VCS.

Nálledně vyberte GitHub a Log In via GitHub. Budete přesměrováni na webovou stránku, kde se přihlásíte do svého účtu, ve kterém již máte vytvořený fork naší šablony.

Vyberte si správný z vašich projektů a zvolte clone.

Po potvrzení důvěry v projekt je možné přejít k vytvoření a spuštění samotného Docker kontejneru. Toho lze dosáhnout spuštěním dvou příkazů v integrované příkazové řádce prostředí, které naleznete v README.md konkrétní šablony. (Příkaz spusťte v adresáři, ve kterém se nachází soubor Dockerfile. V případě využití vývojového prostředí by tato lokace měla být nastavena jako základní.) Pro Nette je to tedy například

docker build . -t tda-nette

pro vytvoření kontejneru a poté

docker run -p 8080:80 -v ${PWD}:/app tda-nette

pro jeho spuštění. Aplikace bude přístupná na url http://localhost:8080. Spuštěný kontejner můžete vidět (a také vypnout) pomocí aplikace Docker, či pomocí příkazů docker ps a docker stop jméno-kontejneru.

Uvedený postup lokálního spuštění aplikace za pomocí Dockeru lze aplikovat pro všechny šablony.

7. Lokální změny a jejich propagace zpět na GitHub

Ke (skoro) kompletnímu procesu vývoje chybí poslední krok. Provedení změn v kódu a jejich „push“ na GitHub. V případě šablony nette si otevřete složku app\Presenters\templates\Homepage\default.latte a na řádku 21 změňte background na hodnotu #ef8a1e.
Zastavte běžící kontejner a znovu ho pomocí již známých příkazů vytvořte a spusťte. Pozadí stránky by mělo mít změněnou barvu.

Následně provedeme potvrzení změn pomocí gitových příkazů commit a push. Pokud chcete pracovat přes uživatelské rozhraní, vyberte z aplikačního menu Git → Commit, případně použijte klávesovou zkratku Ctrl + K. 

Napište „commit message“ a zvolte rovnou volbu Commit and push.

Potvrďte volbou Push a změny uvidíte ve svém repozitáři na GitHub.

7. Odevzdání aplikace

Už máte hotovo. Provedením git push do main větve vašeho repozitáře se spustí námi definovaná pipeline, která Vaši aplikaci zabalí a odešle na náš server. V sekci Actions si ověřte, že tento proces proběhl správně.



Jednu z nejsložitějších překážek máte nyní za sebou. Teď se znovu vraťte k zadání a vrhněte se do implementace vybrané funkcionality.