Nasadenie!

Poznámka Môže byť trochu ťažké prehrýzť sa touto kapitolou. Vydrž a dokonči ju, nasadenie je dôležitou časťou vývoja webových stránok. Táto kapitola je umiestnená uprostred tutoriálu, aby ti mentor či mentorka mohli pomôcť s trochu náročnejšími časťami procesu spúšťania tvojej webovej stránky online. To znamená, že môžeš dokončiť tutoriál aj sama, ak ti nevyjde čas.

Až do tohto momentu bola tvoja webová stránka dostupná len v tvojom počítači. Teraz sa naučíš, ako ju nasadiť! Nasadenie (deployment) je proces publikovania aplikácie na internete, aby ju všetci konečne mohli vidieť. :)

Ako už vieš, webová stránka musí byť umiestnená na serveri. Na internete existuje množstvo poskytovateľov serverov, my použijeme PythonAnywhere. PythonAnywhere je bezplatný pre malé aplikácie, ktoré nemajú príliš veľa návštevníkov a návštevníčok, takže zatiaľ ti to určite bude stačiť.

Ďalšou externou službou, ktorú budeme využívať, je GitHub, kde sa uchovávajú zdrojové kódy. Existujú aj ďalšie podobné služby, no v dnešnej dobe už majú takmer všetci programátori a programátorky githubové konto a teraz ho už budeš mať aj ty!

Tieto tri miesta budú pre teba dôležité. Lokálny počítač bude miestom, kde budeš vyvíjať a testovať. Keď si spokojná so zmenami, uložíš kópiu programu na GitHub. Tvoja webová stránka bude na PythonAnywhere a budeš ju aktualizovať stiahnutím novej kópie svojho kódu z GitHubu.

Git

Poznámka Ak už máš za sebou inštaláciu, nemusíš toto robiť znova - môžeš preskočiť na ďalšiu časť a začať s vytváraním vlastného Git repozitára.

Git je "systém na správu verzií", ktorý využíva množstvo programátoriek a programátorov. Tento softvér sleduje v priebehu času zmeny v tvojich súboroch, takže sa kedykoľvek môžeš vrátiť ku konkrétnej verzii. Je to v podstate niečo ako nástroj na nasledovanie zmien v programoch na spracovanie textu (napr. Microsoft Word alebo LibreOffice Writer), ale omnoho mocnejšie.

Inštalácia Gitu

$ sudo apt install git

$ git config --global --add init.defaultBranch main

$ sudo dnf install git

$ git config --global --add init.defaultBranch main

$ sudo zypper install git

$ git config --global --add init.defaultBranch main

Založenie Git repozitára

Git sleduje zmeny na konkrétnej skupine súborov, v niečom, čo sa nazýva úložisko kódu alebo repozitár (skrátene "repo"). Založme si repo pre náš projekt. Otvor konzolu a spusti nasledujúce príkazy v adresári djangogirls:

Poznámka Skontroluj si aktuálny pracovný priečinok príkazom pwd (macOS/Linux) alebo cd (Windows) pred inicializáciou repozitára. Mala by si byť v priečinku djangogirls.

command-line

$ git init
Initialized empty Git repository in ~/djangogirls/.git/
$ git config --global user.name "Tvoje Meno"
$ git config --global user.email ty@example.com

Inicializácia Git repozitára je niečo, čo musíme urobiť len raz za projekt (a už nikdy nebudeš musieť znovu zadávať užívateľské meno a e-mail).

Upravenie názvu vetvy

Vo verziách Gitu starších ako 2.28 budeš musieť zmeniť meno svojej vetvy na "main". Ak chceš zistiť, akú verziu Gitu máš, prosím, spusti nasledovný príkaz:

command-line

$ git --version
git version 2.xx...

V prípade, že druhé číslo verzie ("xx" vyššie) je menšie ako 28, budeš musieť spustiť nasledujúci príkaz, aby si premenovala svoju vetvu. Ak je to 28 alebo viac, pokračuj, prosím, sekciou "Ignorovanie súborov". Rovnako ako v časti "Inicializácia" je toto niečo, čo musíme spraviť len jeden jediný raz vrámci projektu, a aj to iba v prípade, ak je tvoja verzia Gitu menšia ako 2.28:

command-line

$ git branch -M main

Ignorovanie súborov

Git bude sledovať zmeny všetkých súborov a priečinkov v tomto adresári, ale sú aj niektoré súbory, ktoré chceme ignorovať. To urobíme tak, že vytvoríme súbor s názvom .gitignore v základnom adresári. Otvor si editor a vytvor nový súbor s týmto obsahom:

.gitignore

# Python
*.pyc
*~
__pycache__

# Env
.env
myvenv/
venv/

# Database
db.sqlite3

# Static folder at project root
/static/

# macOS
._*
.DS_Store
.fseventsd
.Spotlight-V100

# Windows
Thumbs.db*
ehthumbs*.db
[Dd]esktop.ini
$RECYCLE.BIN/

# Visual Studio
.vscode/
.history/
*.code-workspace

A ulož ho ako .gitignore v priečinku "djangogirls".

Poznámka Bodka na začiatku názvu súboru je dôležitá! Ak máš problém vytvoriť takýto súbor (napríklad Macom sa nepáči, ak chceš cez Vyhľadávanie (Finder) vytvoriť súbory, ktoré sa začínajú bodkou), potom použi funkciu "Uložiť ako" vo svojom editore, to funguje vždy. A daj pozor na to, aby si k názvu súboru nepridala .txt, .py alebo akúkoľvek inú koncovku - Git ho rozpozná, iba ak sa volá presne .gitignore. V Linuxe a MacOS sú súbory, ktoré začínajú . (ako .gitignore), považované za skryté a príkaz ls ich neukáže. Namiesto neho môžeš použiť ls -a, aby si súbor .gitignore videla.

Poznámka Jeden zo súborov, ktoré si spomenula vo svojom súbore .gitignore, je db.sqlite3. Tento súbor je tvoja lokálna databáza, kde sú uložení všetci tvoji používatelia/používateľky a príspevky. Budeme sa riadiť štandardnými programátorskými postupmi, čo znamená, že budeme používať dve rôzne databázy, jednu pre svoju vlastnú lokálnu testovaciu stránku a druhú pre svoju online stránku na PythonAnywhere. Na PythonAnywhere to možno bude SQLite, tak ako na stroji, na ktorom vyvíjaš, ale zvyčajne by si tam skôr použila databázu, ktorá sa volá MySQL, ktorá zvládne oveľa viac navštevníčiek a návštevníkov ako SQLite. Tak či onak, to, že ignoruješ svoju SQLite databázu v kópii pre GitHub, znamená, že všetky príspevky a superuser, ktorých si doteraz vytvorila, budú dostupní len lokálne, a na produkčnej verzii budeš musieť vytvoriť nových. Svoju lokálnu databázu si môžeš predstaviť ako pieskovisko, na ktorom si môžeš vyskúšať rôzne veci a nebáť sa, že zmažeš reálne príspevky zo svojho blogu.

Vždy je dobré použiť príkaz git status pred git add alebo kedykoľvek, keď si nebudeš istá, čo sa zmenilo. Pomôže ti to vyhnúť sa prekvapeniam ako napríklad pridanie nesprávnych súborov. Príkaz git status vracia informácie o nesledovaných (untracked) či zmenených (modified) súboroch, alebo súboroch pripravených na zmenu (staged), o stave vetvy a veľa ďalších vecí. Výstup by mal byť podobný nasledovnému:

command-line

$ git status
On branch main

No commits yet

Untracked files:
  (use "git add <file>..." to include in what will be committed)

        .gitignore
        blog/
        manage.py
        mysite/
        requirements.txt

nothing added to commit but untracked files present (use "git add" to track)

A nakoniec uložíme naše zmeny. Prejdi na konzolu a zadaj nasledujúce príkazy:

command-line

$ git add .
$ git commit -m "My Django Girls app, first commit"
 [...]
 13 files changed, 200 insertions(+)
 create mode 100644 .gitignore
 [...]
 create mode 100644 mysite/wsgi.py

Prenos nášho kódu na GitHub

Choď na GitHub.com a založ (Sign Up) si nový účet zdarma. (Ak si to už spravila počas prípravy na workshop, super!) Zapamätaj si svoje heslo (a pridaj si ho do svojho správcu hesiel, ak nejaký používaš).

Potom vytvor nový repozitár a pomenuj ho "my-first-blog". Políčko "initialize with a README" nechaj nezaškrtnuté, voľbu .gitignore nechaj prázdnu (urobili sme to manuálne) a License nechaj ako None.

Poznámka Názov my-first-blog je dôležitý -- mohla by si si vybrať aj niečo iné, ale bude sa to ďalej vyskytovať veľakrát a musela by si to zakaždým nahradiť. Pravdepodobne bude pohodlnejšie, ak ostaneš pri názve my-first-blog.

Na nasledujúcej stránke sa ti ukáže klonovacia URL tvojho repa, ktorú budeme potrebovať v niektorých z nasledujúcich príkazov:

Teraz musíme pripojiť Git repozitár v tvojom počítači k tomu na GitHube.

Napíš do konzoly nasledujúci príkaz (nahraď <your-github-username> svojím užívateľským menom na GitHube, ale bez špicatých zátvoriek - URL by mala byť rovnaká ako klonovacia URL, ktorú si práve videla).

command-line

$ git remote add origin https://github.com/<your-github-username>/my-first-blog.git
$ git push -u origin main

Keď pošleš niečo na GitHub, spýta sa ťa to na tvoje githubové meno a heslo (buď rovno v príkazovom riadku alebo vo vyskakovacom okne) a keď ich zadáš, mala by si vidieť niečo takéto:

command-line

Counting objects: 6, done.
Writing objects: 100% (6/6), 200 bytes | 0 bytes/s, done.
Total 3 (delta 0), reused 0 (delta 0)
To https://github.com/ola/my-first-blog.git

 * [new branch]      main -> main
Branch main set up to track remote branch main from origin.

Tvoj kód je na GitHube. Choď sa naň pozrieť! Zistíš, že sa nachádza vo vyberanej spoločnosti - Django, Django Girls Tutorial a mnoho iných skvelých open sourcových softvérových projektov uchováva svoj kód na GitHube. :)

Vytvorenie nášho blogu na PythonAnywhere

Vytvorenie PythonAnywhere účtu

Poznámka Možno si si už účet na PythonAnywhere vytvorila počas inštalácie - ak áno, nemusíš to robiť znova.

PythonAnywhere je služba, ktorá ti umožní nechať bežať svoj kód v Pythone na serveroch v "cloude". Použijeme ju na uverejnenie našej stránky na internete.

Náš blog uverejníme na PythonAnywhere. Vytvor si "Beginner" účet na PythonAnywhere (verzia zdarma stačí, nepotrebuješ kreditnú kartu).

• www.pythonanywhere.com

Poznámka Pri výbere používateľského mena mysli na to, že URL tvojho blogu bude v tvare tvojeuzivatelskemeno.pythonanywhere.com, takže si vyber prezývku alebo názov, o čom tvoj blog je. Taktiež si určite zapamätaj svoje heslo (pridaj si ho do svojho správcu hesiel, ak nejaký používaš).

Vytvorenie PythonAnywhere API tokenu

Toto je niečo, čo musíš spraviť len raz. Keď si vytvoríš PythonAnywhere účet, hodí ťa to na tvoju nástenku. Nájdi odkaz na svoj účet (Account) vpravo hore:

následne vyber záložku "API token" a stlač tlačítko "Create new API token".

Konfigurácia našej stránky na PythonAnywhere

Choď naspäť do hlavného PythonAnywhere dashboardu kliknutím na logo a vyber možnosť začať "Bash" konzolu -- to je PythonAnywhere verzia príkazového riadku, presne ako na tvojom počítači.

Poznámka PythonAnywhere je založený na Linuxe, takže ak si vo Windowse, konzola bude vyzerať trochu inak ako v tvojom počítači. Nasadenie webovej aplikácie na PythonAnywhere zahŕňa stiahnutie kódu z GitHubu a nakonfigurovanie PythonAnywhere, aby ho rozpoznal a začal ho poskytovať ako webovú aplikáciu. Sú manuálne spôsoby, ako to urobiť, ale PythonAnywhere poskytuje pomocný nástroj, ktorý všetko urobí za teba. Najprv ho nainštalujme:

PythonAnywhere command-line

$ pip3.10 install --user pythonanywhere

Malo by to zobraziť niečo ako Collecting pythonanywhere a nakoniec skončiť riadkom, ktorý hovorí Successfully installed (...) pythonanywhere- (...).

Teraz spustíme pomocníka, ktorý automaticky nakonfiguruje našu aplikáciu z GitHubu. Zadaj nasledujúci príkaz do konzoly na PythonAnywhere (nezabudni použiť užívateľské meno z GitHubu namiesto <your-github-username>, aby sa URL zhodovala s klonovacou URL z GitHubu):

PythonAnywhere command-line

$ pa_autoconfigure_django.py --python=3.10 https://github.com/<your-github-username>/my-first-blog.git

Keď budeš sledovať, ako to beží, uvidíš, čo to robí:

• Sťahuje tvoj kód z GitHubu
• Vytvára virtualenv na PythonAnywhere, presne ako na tvojom počítači
• Aktualizuje tvoj súbor settings so zopár nastaveniami špecifickými pre nasadenie
• Pripravuje databázu na PythonAnywhere pomocou príkazu manage.py migrate
• Nastavuje tvoje statické súbory (o tých sa dozvieme viac neskôr)
• A nastavuje PythonAnywhere, aby sprístupnil tvoju stránku cez svoju API

Na PythonAnywhere sú všetky tieto kroky zautomatizované, ale sú to presne tie isté kroky, aké by si musela spraviť u hocijakého iného poskytovateľa serverov.

Dôležitá vec, ktorú si treba teraz všimnúť, je, že tvoja databáza na PythonAnywhere je vlastne úplne iná a oddelená od databázy na tvojom PC - to znamená, že budeš mať iné príspevky a administrátorský účet. Preto musíme najprv inicializovať admin účet pomocou createsuperuser, presne ako sme to spravili na svojom vlastnom počítači. PythonAnywhere pre teba automaticky vytvoril virtualenv, takže ti stačí spustiť:

PythonAnywhere command-line

(ola.pythonanywhere.com) $ python manage.py createsuperuser

Zadaj detaily pre admin užívateľa. Najlepšie je použiť tie isté, ako používaš na vlastnom počítači, a predísť tak prípadnému zmäteniu neskôr, ibaže by si chcela spraviť heslo na PythonAnywhere o niečo bezpečnejšie.

A teraz, ak chceš, sa môžeš pozrieť na svoj kód na PythonAnywhere pomocou ls:

PythonAnywhere command-line

(ola.pythonanywhere.com) $ ls
blog  db.sqlite3  manage.py  mysite requirements.txt static
(ola.pythonanywhere.com) $ ls blog/
__init__.py  __pycache__  admin.py  apps.py  migrations  models.py
tests.py  views.py

Môžeš tiež ísť do záložky "Files" a pohybovať sa pomocou zabudovaného PythonAnywhere prehliadača súborov. (Na stránke Console sa vieš dostať ku zvyšku stránok na PythonAnywhere pomocou tlačítka v menu v pravom hornom okraji. Keď už si na jednej z týchto stránok, linky na ostatné nájdeš hore.)

Si online!

Tvoja stránka by teraz mala byť online na internete! Preklikaj sa cez stránku "Web" na PythonAnywhere, kým sa dostaneš k odkazu na ňu. Môžeš ho poslať, komu len chceš. :)

Poznámka Toto je začiatočnícky tutoriál a pre nasadenie stránky sme si niektoré veci zjednodušili, čo nie je ideálne z pohľadu bezpečnosti. Ak sa rozhodneš na tomto projekte ďalej stavať, mala by si si prejsť Django deployment checklist pre zopár tipov, ako svoju stránku zabezpečiť.

Debugovacie tipy

Ak uvídíš chybu počas behu skriptu pa_autoconfigure_django.py, toto sú niektoré z častých dôvodov:

• Zabudla si si vytvoriť PythonAnywhere API token.
• Urobila si chybu vo svojej githubovej URL.
• Ak sa ti zobrazí chybové hlásenie "Could not find your settings.py", pravdepodobne je to spôsobené tým, že sa ti nepodarilo pridať všetky súbory do Gitu a/alebo sa ich nepodarilo úspešne pridať na GitHub. Znovu sa pozri na odstavec o Gite vyššie
• Ak si už mala účet na PythonAnywhere a mala si problém s collectstatic, pravdepodobne máš účet so staršou verziou SQLite (napr. 3.8.2). V takom prípade si vytvor nový účet a skús príkazy v sekcii PythonAnywhere vyššie.

Ak pri pokuse navštíviť svoju stránku uvidíš chybu, prvým miestom, kde hľadať problém, je error log. Odkaz naň nájdeš na PythonAnywhere v záložke Web. Pozri, či tam nie sú nejaké chybové hlášky - tie najnovšie sú naspodku.

Môžeš skúsiť aj všeobecné debugovacie tipy na help stránke PythonAnywhere.

A nezabudni, tvoja mentorka alebo mentor sú tu na to, aby ti pomohli!

Choď sa pozrieť na svoju stránku!

Hlavná stránka tvojej aplikácie by ťa mala vítať nápisom "It worked!", tak ako na tvojom počítači. Skús pridať /admin/ na koniec adresy URL, a budeš presmerovaná na stránky administrácie. Prihlás sa svojím menom a heslom a uvidíš, že môžeš na server pridať nové príspevky. Nezabudni, že príspevky z tvojej lokálnej testovacej databázy sme neposlali na tvoj online blog.

Keď vytvoríš niekoľko príspevkov, môžeš sa vrátiť do tvojho lokálneho prostredia (nie PythonAnywhere). Odteraz by si na zmenách mala pracovať vo svojom lokálnom prostredí. To je štandardný pracovný postup pri vývoji webových aplikácií - urobíš zmeny lokálne, dáš tieto zmeny na GitHub a stiahneš zmeny na svoj webový server. Vďaka tomu môžeš pracovať a experimentovať bez toho, aby si niečo pokazila na svojej online stránke. Celkom cool, že?

PORIADNE sa potľapkaj po chrbte! Nasadenie serveru je jedna z najzradnejších častí vývoja web stránok a často zaberie ľuďom aj niekoľko dní, kým to celé spojazdnia. Ale ty už máš svoju stránku online teraz, na skutočnom internete!