Nasazení!

Poznámka: Projít následující kapitolu může být někdy trochu těžké. Vydrž a dokonči to; nasazení je důležitou součástí procesu vývoje webových stránek. Tato kapitola je umístěna uprostřed kurzu, aby ti tvůj kouč mohl pomoci s mírně složitějším procesem nasazení tvého webu online. To znamená, že stále můžeš dokončit kurz později sama, pokud to nestihneš teď.

Až dosud byly tvoje webové stránky k dispozici pouze ve tvém počítači, nyní se naučíš je nasadit! Nasazení je proces publikování aplikace na internetu, takže si lidé konečně mohou prohlédnout tvou webovou aplikaci :).

Jak jsi se dozvěděla, webové stránky musí být umístěny na serveru. Na internetu existuje mnoho poskytovatelů serverů. My budeme používat jednoho, který má relativně jednoduchý proces nasazení: PythonAnywhere. PythonAnywhere je zdarma pro malé aplikace, které nemají příliš mnoho návštěvníků, takže to pro tebe bude teď stačit.

Další externí službu, kterou budeme používat, je GitHub, což je hostingová služba pro zdrojové kódy. Na internetu existují i jiné služby, ale téměř všichni programátoři mají účet na GitHubu. Nyní ho budeš mít také!

Budeme používat GitHub jako odrazový můstek k přesunu našeho kódu do a z PythonAnywhere.

Git

Git je "systém pro správu verzí" používaný spoustou programátorů. Tento software může sledovat změny v souborech v průběhu času tak, že konkrétní verze můžeš později znovu zobrazit. Trochu jako funkce "sledování změn" v aplikaci Microsoft Word, ale mnohem mocnější.

Instalace Git

Poznámka: Pokud jsi již prošla instalační kroky, není třeba se k tomu vracet - můžeš přeskočit k další části a začít vytvářet Git repozitář.

Windows

Git si můžeš stáhnout z git-scm.com. Klikej na "další" ve všech krocích s výjimkou 5. kroku s názvem "Nastavení prostředí PATH", zvol "Spustit Git a související Unixové nástroje z příkazového řádku systému Windows" (spodní možnost). Ostatní výchozí hodnoty jsou v pořádku. Odškrtni Windows-style konce řádků, pro commit je Unixový styl konce řádků správný.

MacOS

Stáhni Git z git-scm.com a postupuj podle pokynů.

Linux

Pokud ho již nemáš nainstalovaný, git měl by být k dispozici pomocí Správce balíčků, zkus:

sudo apt install git
# or
sudo yum install git
# or
sudo zypper install git

Spuštění Git repositáře

Git sleduje změny v sadě souborů v takzvaném úložišti kódu/repository (nebo zkráceně "repo"). Založme si jedno repo pro náš projekt. Otevři konzoli a v djangogirls adresáři spusť tyto příkazy:

Poznámka: Zkontroluj si svůj aktuální pracovní adresář pomocí pwd (macOS/Linux) nebo příkazem cd (Windows) před inicializací úložiště. Měla bys být ve složce djangogirls.

$ git init
 Initialized empty Git repository in ~/djangogirls/.git/
$ git config --global user.name "Your Name"
$ git config --global user.email you@example.com

Inicializace úložiště git je něco, co musíme udělat jednou za projekt (a nebudeš muset znovu zadávat uživatelské jméno a e-mailovou adresu).

Git bude sledovat změny souborů a složek v tomto adresáři, ale jsou tam některé soubory, které chceme ignorovat. Uděláme to tak, že vytvoříš soubor s názvem .gitignore v základním adresáři. Otevři editor a vytvoř nový soubor s následujícím obsahem:

*.pyc
__pycache__
myvenv
db.sqlite3
.DS_Store

A ulož ho jako .gitignore ve složce nejvyšší úrovně "djangogirls".

Poznámka: Tečka na začátku názvu souboru je důležitá! Pokud budeš mít jakékoliv potíže s vytvořením (například Mac nerad vytváří soubory, které začínají tečkou, přes Finder), tak použij funkci "Uložit jako" v editoru, což je neprůstřelné.

Je vhodné použít příkaz git status před použitím příkazu git add, anebo vždy, když si nejsi jistá, co se změnilo. To pomůže předejít jakýmkoliv překvapením, například přidání nesprávných souborů. Příkaz git status vrátí informace o všech souborech nesledovaných (untracked), upravených (modified) a připravených ke commitu (staged), stav větve a mnoho dalšího. Výstup by měl být podobný tomuto:

$ git status
 On branch master

 No commits yet

Untracked files:
   (use "git add <file>..." to include in what will be committed)
         .gitignore
         blog/
         manage.py
         mysite/

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

A nakonec uložíme naše změny. Přejdi do konzole a spusť tyto příkazy:

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

Přenesení našeho kódu na GitHub

Přejdi na GitHub.com a zaregistruj si zdarma nový uživatelský účet. (Pokud jsi to již dříve ve workshopu udělala, tak je to skvělé!)

Potom vytvoř nové úložiště, dej mu název "my-first-blog". Ponech zaškrtávací políčko "initialise with a README" nezaškrtlé, ponechej prázdnou možnost .gitignore (to už jsme udělaly ručně) a ponech licenci jako None.

Poznámka: Název my-first-blog je důležitý – mohla by sis vybrat něco jiného, ale použijeme ho ještě mnohokrát později a musela bys ho pokaždé nahrazovat. Tak je zatím snazší se držet názvu my-first-blog.

Na další obrazovce se zobrazí klon URL tvého repo. Zvol verzi "HTTPS", zkopíruj ji a za chvilku ji použijeme v terminálu:

Teď potřebujeme spojit úložiště Git na tvém počítači s úložištěm na GitHub.

Zadej následující příkaz do konzole (nahraď < your-github-username > uživatelským jménem, které jsi zadala, když jsi vytvořila svůj účet na GitHub, ale bez ostrých závorek):

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

Zadej své uživatelské jméno a heslo pro GitHub a měla bys vidět něco takového:

Username for 'https://github.com': hjwp
Password for 'https://hjwp@github.com':
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/hjwp/my-first-blog.git
* [new branch] master -> master
Branch master set up to track remote branch master from origin.

Tvůj kód je nyní na GitHubu. Můžeš se na něj jít podívat! Zjistíš, že je v dobré společnosti - Django, Django girls tutorial a mnoha dalších velkých open source software projektů, které také hostí svůj kód na GitHubu :)

Vytvoření našeho blogu na PythonAnywhere

Poznámka: Možná, že jsi vytvořila účet PythonAnywhere již dříve během instalačních kroků - pokud ano, nemusíš to nyní dělat znovu.

Dále je čas přihlásit se zdarma k účtu "Beginner" na PythonAnywhere.

• www.pythonanywhere.com

Poznámka: Při výběru svého uživatelského jména měj na paměti, že adresa URL tvého blogu bude mít tvar yourusername.pythonanywhere.com, takže si pro svůj blog zvol vlastní přezdívku nebo jiné jméno.

Natáhnutí našeho kódu na PythonAnywhere

Jakmile se zaregistruješ na PythonAnywhere, budeš přesměrována na dashboard nebo na stránku "Konzole". Zvol možnost spustit konzoli "Bash" – je to PythonAnywhere verze konzole, stejná jako na tvém počítači.

Poznámka: PythonAnywhere je založen na Linuxu, takže pokud jsi na Windows, konzole bude vypadat trochu jinak, než ta, která je na tvém počítači.

Pojďme natáhnout náš kód z GitHubu na PythonAnywhere vytvořením "klonu" našeho repo. Zadej následující příkaz do konzole na PythonAnywhere (nezapomeň používat GitHub uživatelské jméno namísto <your-github-username>):

    $ git clone https://github.com/<your-github-username>/my-first-blog.git

Tento příkaz nahraje kopii tvého kódu na PythonAnywhere. Zkontroluj to zadáním tree my-first-blog:

$ tree my-first-blog
my-first-blog/
├── blog
│   ├── __init__.py
│   ├── admin.py
│   ├── migrations
│   │   ├── 0001_initial.py
│   │   └── __init__.py
│   ├── models.py
│   ├── tests.py
│   └── views.py
├── manage.py
└── mysite
    ├── __init__.py
    ├── settings.py
    ├── urls.py
    └── wsgi.py

Vytvoření virtualenv na PythonAnywhere

Stejně jako na tvém počítači můžeš na PythonAnywhere vytvořit virtualenv. V Bash konzoli zadej postupně následující příkazy:

$ cd my-first-blog

$ virtualenv --python=python3.4 myvenv
Running virtualenv with interpreter /usr/bin/python3.4
[...]
Installing setuptools, pip...done.

$ source myvenv/bin/activate

(mvenv) $ pip install django whitenoise
Collecting django
[...]
Successfully installed django-1.8.2 whitenoise-2.0

Poznámka: Krok pip install může trvat několik minut. Trpělivost, trpělivost! Ale pokud to trvá déle než 5 minut, něco není v pořádku. Zeptej se svého kouče.

Shromažďování statických souborů

Byla jsi zvědavá, co bylo to "whitenoise" vlastně zač? Je to nástroj pro obsluhu takzvaných "statických souborů". Statické soubory jsou soubory, které se pravidelně nemění nebo nespouštějí programový kód, například soubory HTML nebo CSS. Na serverech fungují odlišně než na tvém osobním počítači a proto potřebujeme nástroj jako "whitenoise" k jejich obsloužení.

O statických souborech zjistíme trochu více později v tomto kurzu, až budeme upravovat CSS pro naše stránky.

Nyní jen musíme spustit další příkaz na serveru s názvem collectstatic. Ten řekne Djangu, aby posbíral všechny statické soubory, které potřebuje na serveru. V současnosti jsou to hlavně soubory, které upravují vzhled admin stránky.

(mvenv) $ python manage.py collectstatic

You have requested to collect static files at the destination
location as specified in your settings:
     /home/edith/my-first-blog/static

This will overwrite existing files!
Are you sure you want to do this?

Type 'yes' to continue, or 'no' to cancel: yes

Zadej "yes" a pokračujeme! Také máš ráda, když ti počítač začne vypisovat ty dlouhé stránky kódu? Já jsem to vždy doprovázela tichými zvuky. Brp, brp, brp...

Copying '/home/edith/my-first-blog/mvenv/lib/python3.4/site-packages/django/contrib/admin/static/admin/js/actions.min.js' Copying '/home/edith/my-first-blog/mvenv/lib/python3.4/site-packages/django/contrib/admin/static/admin/js/inlines.min.js' [...] Copying '/home/edith/my-first-blog/mvenv/lib/python3.4/site-packages/django/contrib/admin/static/admin/css/changelists.css' Copying '/home/edith/my-first-blog/mvenv/lib/python3.4/site-packages/django/contrib/admin/static/admin/css/base.css' 62 static files copied to '/home/edith/my-first-blog/static'.

Vytvoření databáze na PythonAnywhere

Zde je další věc, která se liší mezi tvým počítačem a serverem: server používá jinou databázi. Takže uživatelské účty a příspěvky mohou být jiné na serveru a na tvém počítači.

Můžeme inicializovat databázi na serveru, stejně jako jsi to udělala v počítači, pomocí příkazů migrate a createsuperuser:

(mvenv) $ python manage.py migrate
Operations to perform:
[...]
   Applying sessions.0001_initial... OK


(mvenv) $ python manage.py createsuperuser

Publikování našeho blogu jako webové aplikace

Nyní je náš kód na PythonAnywhere a náš virtualenv je připraven, statické soubory jsou shromážděny a databáze inicializována. Jsme připraveni zveřejnit blog jako webovou aplikaci!

Běž zpět na dashboard PythonAnywhere kliknutím na logo a poté klikni na kartu Web. Nakonec klikni na Add a new web app.

Po potvrzení tvého názvu domény zvol manual configuration (NB není "Django" volba) v dialogovém okně. Dále zvol Python 3.4 a klepni na tlačítko Next pro dokončení průvodce.

Poznámka: Ujisti se, že volíš možnost "Manual configuration", nikoliv "Django". Jsme příliš cool na to, abychom používali výchozí nastavení PythonAnywhere Django ;-)

Nastavení virtualenv

Budeš přesměrována na PythonAnywhere konfigurační obrazovku pro tvou webovou aplikaci, sem budeš muset jít pokaždé, když budeš chtít provést změny aplikace na serveru.

V části "Virtualenv" klepni na červený text, který říká "Enter the path to a virtualenv" a zadej: /home/ <your-username>/my-first-blog/myvenv/. Klikni na modré zaškrtávací políčko, čímž uložíš cestu předtím, než budeš pokračovat.

Poznámka: Nahraď své vlastní uživatelské jméno podle potřeby. Pokud uděláš chybu, PythonAnywhere Ti zobrazí malé varování.

Konfigurace souboru WSGI

Django používá "WSGI protokol", standard pro obsluhu webových stránek pomocí Pythonu, který PythonAnywhere podporuje. Aby PythonAnywhere poznal a mohl používat náš Django blog, upravme WSGI konfigurační soubor.

Klikni na odkaz "WSGI configuration file" (v sekci "Code" v horní části stránky – bude pojmenována nějak takto /var/www/<your-username>_pythonanywhere_com_wsgi.py) a budeš přesměrována do editoru.

Odstraň veškerý obsah a nahraď jej upraveným následujícím kódem:

import os
import sys

path = '/home/<your-username>/my-first-blog' # use your own username here
if path not in sys.path:
     sys.path.append(path)

os.environ['DJANGO_SETTINGS_MODULE'] = 'mysite.settings'

from django.core.wsgi import get_wsgi_application
from whitenoise.django import DjangoWhiteNoise
application = DjangoWhiteNoise(get_wsgi_application())

Poznámka: Nezapomeň nahradit své vlastní uživatelské jméno za <your-username>

Úkolem tohoto souboru je říct PythonAnywhere, kde je naše webová aplikace a jaký je název souboru nastavení Djanga. Také nastavuje nástroj pro statické soubory "whitenoise".

Klikni na Save a přejdi zpět na kartu Web.

Zvládly jsme to! Klikni na velké zelené tlačítko Reload, čímž zobrazíš svou aplikaci. Odkaz na to najdeš v horní části stránky.

Ladící tipy

Pokud se ti zobrazí chyba při pokusu zobrazit web, první místo, kam se podívat na nějaké informace o ladění, je v error log. Odkaz na něj najdeš na PythonAnywhere v kartě Web. Zkontroluj, jestli tam nejsou nějaké chybové zprávy; nejnovější záznamy jsou na konci. Mezi běžné problémy patří:

• Často zapomínané kroky jsou ty, které jsme dělaly v konzoly: vytvoření virtualenv, aktivace, instalace Djanga, spuštění collectstatic, přenesení databáze.

• Chyba k cestě virtualenv na kartě Web – bude obvykle označená malou červenou zprávou na stejném místě.

• Chyba v konfiguračním souboru WSGI – máš cestu do složky my-first-blog v pořádku?

• Vybrala jsi stejnou verzi Pythonu pro svůj virtualenv stejně jako pro svoji webovou aplikaci? Obe verze by měly být 3.4.

• Existují některé obecné tipy ladění na PythonAnywhere wiki.

A pamatuj si, že tvůj kouč je tady, aby ti pomohl!

Jsme online!

Výchozí stránka tvé webové aplikace by měla ukázat "Welcome to Django", stejně jako to dělá na tvém počítači. Zkus přidat /admin/ na konec adresy URL a budeš přesměrována na admin stránku. Přihlas se pomocí uživatelského jména a hesla a uvidíš, že můžeš přidávat nové příspěvky na server.

Poplácej sama sebe po zádech! Nasazení serveru je jednou z nejsložitější částí vývoje webových aplikací a trvá lidem často i několik dní, než je funkční. Ale ty máš své stránky online na internetu už teď!