Jak nasadit aplikaci na web pomocí Express.js a Heroku

Pokud jste ve světě vývoje webu nováčky, strávíte spoustu času učením se, jak vytvářet statické stránky pomocí HTML, CSS a JavaScriptu.

Pak se můžete začít učit, jak používat populární frameworky, jako je React, VueJS nebo Angular.

Ale poté, co vyzkoušíte několik nových nápadů a spustíte některé weby lokálně, možná vás napadne, jak svůj web nebo aplikaci skutečně nasadit. A jak se ukazuje, někdy může být těžké vědět, kde začít.

Osobně považuji provozování Express serveru hostovaného na Heroku za jeden z nejjednodušších způsobů, jak začít. Tento článek vám ukáže, jak to udělat.

Heroku je cloudová platforma, která podporuje řadu různých programovacích jazyků a rámců.

Toto není sponzorovaný příspěvek – existuje samozřejmě mnoho dalších dostupných řešení, jako například:

  • Digitální oceán
  • Webové služby Amazon
  • Azurová
  • Google Cloud Platform
  • Netlify
  • ZEIT Now

Prohlédněte si je všechny a zjistěte, která nejlépe vyhovuje vašim potřebám.

Osobně jsem zjistil, že Heroku je nejrychlejší a nejjednodušší začít používat "out of the box". Bezplatná úroveň je z hlediska zdrojů poněkud omezená. Pro účely testování jej však mohu s jistotou doporučit.

Tento příklad bude hostovat jednoduchý web využívající expresní server. Zde jsou kroky na vysoké úrovni:

  1. Nastavení pomocí Heroku, Git, npm
  2. Vytvořte server Express.js
  3. Vytvářejte statické soubory
  4. Nasadit do Heroku

Celkem by to mělo trvat asi 25 minut (nebo déle, pokud chcete strávit více času statickými soubory).

Tento článek předpokládá, že již víte:

  • Některé základy HTML, CSS a JavaScript
  • Základní použití příkazového řádku
  • Git pro začátečníky pro správu verzí

Veškerý kód najdete v tomto úložišti.

Nastavení

Prvním krokem v každém projektu je nastavení všech nástrojů, o kterých víte, že je budete potřebovat.

Budete potřebovat:

  • Node a npm nainstalované na vašem místním počítači (přečtěte si, jak to provést zde)
  • Git nainstalován (přečtěte si tuto příručku)
  • Nainstalováno rozhraní Heroku CLI (zde je návod, jak to provést)

1. Vytvořte nový adresář a inicializujte úložiště Git

Z příkazového řádku vytvořte nový adresář projektu a přesuňte se do něj.

$ mkdir lorem-ipsum-demo
$ cd lorem-ipsum-demo

Nyní jste ve složce projektu, inicializujte nové úložiště Git.

⚠️Tento krok je důležitý, protože Heroku spoléhá na Git při nasazování kódu z vašeho místního počítače na jeho cloudové servery ⚠️

$ git init

Jako poslední krok můžete vytvořit soubor README.md, který budete později upravovat.

$ echo "Edit me later" > README.md

2. Přihlaste se do Heroku CLI a vytvořte nový projekt

K Heroku se můžete přihlásit pomocí Heroku CLI (rozhraní příkazového řádku). K tomu budete potřebovat bezplatný účet Heroku.

Zde jsou dvě možnosti. Ve výchozím nastavení vám Heroku umožní přihlásit se prostřednictvím webového prohlížeče. Přidání -i flag umožňuje přihlášení přes příkazový řádek.

$ heroku login -i

Nyní můžete vytvořit nový projekt Heroku. Nazval jsem svůj lorem-ipsum-demo .

$ heroku create lorem-ipsum-demo

Pojmenování projektu:

  • Pokud jej v příkazu nezadáte, Heroku vygeneruje pro váš projekt náhodný název.
  • Název bude součástí adresy URL, kterou můžete použít pro přístup ke svému projektu, takže si vyberte ten, který se vám líbí.
  • To také znamená, že musíte zvolit jedinečný název projektu, který nikdo jiný nepoužil.
  • Projekt je možné později přejmenovat (nedělejte si proto velké starosti se získáním dokonalého názvu hned teď).

3. Inicializujte nový projekt npm a nainstalujte Express.js

Dále můžete inicializovat nový projekt npm vytvořením souboru package.json. K tomu použijte níže uvedený příkaz.

⚠️Tento krok je zásadní. Heroku spoléhá na to, že při sestavování vaší aplikace poskytnete soubor package.json, aby věděl, že se jedná o projekt Node.js ⚠️

$ npm init -y

Dále nainstalujte Express. Express je široce používaný serverový framework pro NodeJS.

$ npm install express --save

Konečně jste připraveni začít kódovat!

Psaní jednoduchého expresního serveru

Dalším krokem je vytvoření souboru s názvem app.js , který lokálně provozuje expresní server.

$ touch app.js

Tento soubor bude vstupním bodem pro aplikaci, až bude připravena. To znamená, že jeden příkaz potřebný ke spuštění aplikace bude:

$ node app.js

Nejprve však musíte do souboru napsat nějaký kód.

4. Upravte obsah souboru app.js

Otevřete app.js ve vašem oblíbeném editoru. Napište níže zobrazený kód a klikněte na Uložit.

// create an express app
const express = require("express")
const app = express()

// use the express-static middleware
app.use(express.static("public"))

// define the first route
app.get("/", function (req, res) {
  res.send("<h1>Hello World!</h1>")
})

// start the server listening for requests
app.listen(process.env.PORT || 3000, 
	() => console.log("Server is running..."));

Komentáře by měly pomoci naznačit, co se děje. Ale pojďme rychle rozebrat kód, abychom mu porozuměli:

  • První dva řádky jednoduše vyžadují modul Express a vytvářejí instanci aplikace Express.
  • Další řádek vyžaduje použití express.static middleware. To vám umožní obsluhovat statické soubory (jako jsou HTML, CSS a JavaScript) z adresáře, který určíte. V tomto případě budou soubory obsluhovány ze složky nazvané public .
  • Další řádek používá app.get() k definování trasy URL. Jakékoli požadavky URL na kořenovou adresu URL budou zodpovězeny jednoduchou zprávou HTML.
  • Poslední část spustí server. Buď vypadá, že vidí, který port Heroku použije, nebo je výchozí 3000, pokud používáte lokálně.

⚠️Použití process.env.PORT || 3000 v posledním řádku je důležitý pro úspěšné nasazení vaší aplikace ⚠️

Pokud ušetříte app.js a spusťte server pomocí:

$ node app.js

Můžete navštívit localhost:3000 ve svém prohlížeči a sami se přesvědčit, že server běží.

Vytvořte své statické soubory

Dalším krokem je vytvoření vašich statických souborů. Toto jsou soubory HTML, CSS a JavaScript, které zobrazíte, kdykoli uživatel navštíví váš projekt.

Zapamatujte si v app.js řekl jste express.static middleware pro poskytování statických souborů z public adresář.

Prvním krokem je samozřejmě vytvoření takového adresáře a souborů, které bude obsahovat.

$ mkdir public
$ cd public
$ touch index.html styles.css script.js

5. Upravte soubor HTML

Otevřete index.html ve vašem preferovaném textovém editoru. Toto bude základní struktura stránky, kterou budete zobrazovat svým návštěvníkům.

Níže uvedený příklad vytváří jednoduchou vstupní stránku pro generátor Lorem Ipsum, ale zde můžete být kreativní, jak chcete.

<!DOCTYPE html>
<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<link href="https://fonts.googleapis.com/css?family=Alegreya|Source+Sans+Pro&display=swap" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<html>
<body>
<h1>Lorem Ipsum generator</h1>
  <p>How many paragraphs do you want to generate?</p>
  <input type="number" id="quantity" min="1" max="20" value="1">
  <button id="generate">Generate</button>
  <button id="copy">Copy!</button>
<div id="lorem">
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

6. Upravte soubor CSS

Další je úprava souboru CSS styles.css . Ujistěte se, že je odkaz ve vašem souboru HTML.

Níže uvedený CSS je pro příklad Lorem Ipsum. Ale znovu, klidně buďte kreativní, jak chcete.

h1 {
	font-family: 'Alegreya' ;
}

body {
	font-family: 'Source Sans Pro' ;
	width: 50%;
	margin-left: 25%;
	text-align: justify;
	line-height: 1.7;
	font-size: 18px;
}

input {
	font-size: 18px;
	text-align: center;
}

button {
	font-size: 18px;
	color: #fff;
}

#generate {
	background-color: #09f;
}

#copy {
	background-color: #0c6;
}

7. Upravte soubor JavaScript

Nakonec možná budete chtít upravit soubor JavaScriptu script.js . Díky tomu bude vaše stránka interaktivnější.

Níže uvedený kód definuje dvě základní funkce pro generátor Lorem Ipsum. Ano, použil jsem JQuery – práce s ním je rychlá a snadná.

$("#generate").click(function(){
	var lorem = $("#lorem");
	lorem.html("");
	var quantity = $("#quantity")[0].valueAsNumber;
	var data = ["Lorem ipsum", "quia dolor sit", "amet", "consectetur"];
	for(var i = 0; i < quantity; i++){
		lorem.append("<p>"+data[i]+"</p>");
	}
})

$("#copy").click(function() {
	var range = document.createRange();
	range.selectNode($("#lorem")[0]);
	window.getSelection().removeAllRanges();
	window.getSelection().addRange(range);
	document.execCommand("copy");
	window.getSelection().removeAllRanges();
	}
)

Všimněte si, že zde je data seznam je zkrácen, aby se dal snadněji zobrazit. Ve skutečné aplikaci je to mnohem delší seznam celých odstavců. Celý soubor můžete vidět v úložišti, nebo zde vyhledejte původní zdroj.

Nasazení aplikace

Po napsání statického kódu a kontrole, že vše funguje podle očekávání, se můžete připravit na nasazení do Heroku.

Je však potřeba udělat ještě několik věcí.

8. Vytvořte Procfile

Heroku bude potřebovat Procfile, aby věděl, jak spouštět vaši aplikaci.

Procfile je "soubor procesu", který říká Heroku, který příkaz má spustit, aby řídil daný proces. V tomto případě příkaz řekne Heroku, jak spustit váš server naslouchající na webu.

Pomocí níže uvedeného příkazu vytvořte soubor.

⚠️Toto je důležitý krok, protože bez Procfile nemůže Heroku uvést váš server online. ⚠️

$ echo "web: node app.js" > Procfile

Všimněte si, že Procfile nemá příponu souboru (např. „.txt“, „.json“).

Podívejte se také, jak funguje příkaz node app.js je stejný, který se používá lokálně ke spuštění vašeho serveru.

9. Přidejte a odevzdejte soubory do Git

Nezapomeňte, že jste při nastavování spustili úložiště Git. Možná jste přidávali a odevzdávali soubory tak, jak jste odešli.

Před nasazením do Heroku nezapomeňte přidat všechny relevantní soubory a odevzdat je.

$ git add .
$ git commit -m "ready to deploy"

Posledním krokem je přesunutí do vaší hlavní větve Heroku.

$ git push heroku master

Měli byste vidět, že příkazový řádek vytiskne spoustu informací, zatímco Heroku vytváří a nasazuje vaši aplikaci.

Řádek, který je třeba hledat, je:Verifying deploy... done.

To ukazuje, že vaše sestavení bylo úspěšné.

Nyní můžete otevřít prohlížeč a navštívit your-project-name.herokuapp.com. Vaše aplikace bude hostována na webu, aby ji mohli všichni navštívit!

Rychlé shrnutí

Níže jsou uvedeny kroky, které je třeba dodržet při nasazení jednoduché aplikace Express do Heroku:

  1. Vytvořte nový adresář a inicializujte úložiště Git
  2. Přihlaste se do Heroku CLI a vytvořte nový projekt
  3. Inicializujte nový projekt npm a nainstalujte Express.js
  4. Upravte obsah souboru app.js
  5. Upravte statické soubory HTML, CSS a JavaScript
  6. Vytvořte profilový soubor
  7. Přidat a odevzdat Git a poté odeslat do své hlavní větve Heroku

Co je třeba zkontrolovat, pokud vaše aplikace nefunguje

Někdy, navzdory nejlepším úmyslům, tutoriály na internetu nefungují přesně tak, jak jste očekávali.

Níže uvedené kroky by vám měly pomoci odladit některé běžné chyby, se kterými se můžete setkat:

  • Inicializovali jste úložiště Git ve složce projektu? Zkontrolujte, zda jste spustili git init dříve. Heroku spoléhá na Git při nasazení kódu z vašeho místního počítače.
  • Vytvořili jste soubor package.json? Zkontrolujte, zda jste spustili npm init -y dříve. Heroku vyžaduje soubor package.json, aby bylo možné rozpoznat, že se jedná o projekt Node.js.
  • Běží server? Ujistěte se, že váš Procfile používá správný název souboru ke spuštění serveru. Zkontrolujte, zda máte web: node app.js a ne web: node index.js .
  • Ví Heroku, na kterém portu má poslouchat? Zkontrolujte, zda jste použili app.listen(process.env.PORT || 3000) v souboru app.js.
  • Obsahují vaše statické soubory nějaké chyby? Zkontrolujte je spuštěním lokálně a zjistěte, zda nejsou nějaké chyby.

Děkujeme za přečtení – pokud jste se dostali až sem, možná budete chtít vyzkoušet hotovou verzi demo projektu.