Poskytování statických souborů pomocí Node a Express.js

Úvod

V tomto článku se chystáme vytvořit jednoduchou aplikaci pro poskytování statických souborů, jako jsou soubory HTML, soubory CSS a obrázky pomocí Node.js a Express.

Konfigurace projektu a instalace Express

Chcete-li začít, vytvořte nový projekt Node.js spuštěním init příkaz v nové složce:

$ npm init

Vyplňte požadované informace podle svých požadavků nebo pouze nastavte výchozí hodnoty tak, že ponecháte každý řádek prázdný.

Nyní můžeme nainstalovat Express framework spuštěním:

$ npm install --save express

Vše je připraveno, můžeme začít kódovat!

Poskytování souborů pomocí Express

Existují dva způsoby poskytování statických souborů pomocí Express:

  • Poskytování jednoho souboru nakonfigurováním cesty ke zdroji
  • Nastavení veřejného adresáře, ve kterém jsou přístupné všechny soubory

Každou z těchto metod si projdeme v následujících dvou částech.

Poskytování jednoho souboru

Zvažte scénář, kdy chceme vytvořit jednoduchou vstupní stránku, která se skládá ze 3 dokumentů HTML (home.html , contact.html a about.html ) a chceme tyto soubory poskytnout uživateli.

Předpokládejme, že uživatel navštíví kořenovou cestu (http://localhost:3000 ). V takovém případě chceme poskytnout home.html soubor. Podobně, pokud uživatel navštíví /contacts nebo /about cesty, chceme obsluhovat contact.html a about.html soubory.

Chcete-li to implementovat, vytvořte landing-page.js soubor a importujte knihovnu Express:

const express = require('express');

Poté vytvoříme aplikaci Express:

const app = express();

Poté definujme port, na kterém bude náš server běžet a který použijeme později, až server skutečně spustíme:

const port = 3000;

Vzhledem k tomu, že posíláme jeden soubor, nebudeme v těchto souborech HTML zahrnovat odkazy na žádné soubory CSS nebo skripty, pokud nejsou hostovány v jiném umístění, jako je například CDN.

O podávání těchto souborů se budeme společně věnovat v další části, takže prozatím zůstaňme u tří velmi jednoduchých, nekomplikovaných HTML souborů:

home.html:

<body>
    <h1>Home</h1>
</body>

contact.html:

<body>
    <h1>Contact</h1>
</body>

about.html:

<body>
    <h1>About Us</h1>
</body>

Nyní se vraťme a upravme naše landing-page.js soubor k odesílání souborů odpovídajících cestám, které uživatel navštíví, jako je zaslání home.html soubor, když uživatel navštíví kořenovou cestu.

Můžeme použít res.sendFile() metoda pro poskytnutí souboru v rámci odpovědi:

app.get('/', (req, res) => {
    res.sendFile('./landing-page/home.html', { root: __dirname });
});

Zdarma e-kniha:Git Essentials

Prohlédněte si našeho praktického průvodce učením Git s osvědčenými postupy, průmyslově uznávanými standardy a přiloženým cheat sheetem. Přestaňte používat příkazy Google Git a skutečně se naučte to!

Z bezpečnostních důvodů je nejlepší použít statickou cestu pro res.sendFile() , jak je uvedeno výše. Pokud někdy přijímáte uživatelský vstup, který ovlivňuje cestu k souboru, buďte velmi opatrní, abyste zabránili uživateli v manipulaci s cestou k souboru a umožnili mu tak získat soukromé soubory.

V našem případě nastavujeme kořen, odkud je relativní cesta, předáním root parametr k metodě. Všimněte si, že jsme předali __dirname , což je globální proměnná Node.js k cestě aktuálně spuštěného souboru.

Stejnou metodu můžeme použít k poskytování našich dalších souborů, contact.html a about.html , také:

app.get('/about', (req, res) => {
    res.sendFile('./landing-page/about.html', { root: __dirname });
});

app.get('/contact', (req, res) => {
    res.sendFile('./landing-page/contact.html', { root: __dirname });
});

Nyní, když je naše aplikace připravena k použití, spusťte server a poslouchejte port, který jsme nastavili dříve:

app.listen(port, () => console.log(`listening on port ${port}!`));

A spusťte naši aplikaci spuštěním:

$ node landing-page.js

Otevřete prohlížeč a navštivte kteroukoli z mapovaných cest a měli byste být uvítáni souborem HTML:

Nastavení veřejného adresáře

Druhou metodou poskytování statických souborů je nastavení veřejného adresáře. Na rozdíl od odesílání souboru prostřednictvím odpovědi HTTP, kde lze obsloužit pouze jeden soubor, budou uživatelům k dispozici všechny soubory v naší zadané složce.

Vytvořme další soubor s názvem server.js a nastavte složku s našimi třemi HTML dokumenty jako veřejný adresář:

const express = require('express');
const app = express();
const port = 3000;

// Setting up the public directory
app.use(express.static('landing-page'));

app.listen(port, () => console.log(`listening on port ${port}!`));

Zveřejnění adresáře je stejně snadné jako použití app.use() a express.static() metody.

Spusťte naši aplikaci znovu a ověřte, že funguje:

$ node server.js

Otevřete prohlížeč a navštivte kteroukoli z mapovaných cest a měli byste být uvítáni soubory HTML, stejně jako minule. Mějte na paměti, že tentokrát není kořenová cesta namapována na home.html soubor, ale spíše http://localhost:3000/home.html :

Také můžete nastavit předponu cesty pro přístup k vašemu veřejnému adresáři předáním předpony jako prvního parametru:

app.use('/public', express.static('landing-page'));

Nyní jsou soubory umístěny na jiné cestě. Například home.html se nyní nachází na http://localhost:3000/public/home.html .

Na rozdíl od první metody, kde byste klikli na /about a about.html bude obslouženo, všimněte si, že pro načtení souboru zde musíte použít celý název souboru - /about.html , například.

To nám umožňuje hostovat další soubory, jako jsou CSS, soubory JavaScript a obrázky.

Například pokud je ve vaší veřejné složce obrázek kočky s názvem cat.png , server jej bude poskytovat na http://localhost:3000/public/cat.png v závislosti na vaší konfiguraci a můžete jej snadno vyvolat prostřednictvím stránky HTML a zobrazit.

Pokud plánujete hostit takovou vstupní stránku, s největší pravděpodobností by to mohla být kombinace obou metod, o kterých jsme hovořili výše. Pomocí odpovědi můžete odeslat jeden soubor HTML a veřejný adresář k hostování dalších statických zdrojů, jako jsou soubory CSS, skripty JS a obrázky.

Závěr

Zdrojový kód tohoto projektu je jako obvykle k dispozici na GitHubu. Použijte toto k porovnání kódu, pokud jste někdy uvízli ve výukovém programu.

Šťastné kódování!