Úvod
Toto jsou poznámky, které jsem si vzal, když jsem se naučil, jak nastavit server a API na svém počítači s Node.js, Express, MongoDB a dalšími závislostmi.
Toto je pořadí, které rád nastavuji pokaždé, když začnu nový projekt. V závislosti na tom, co dělám, neinstaluji některé zde zobrazené závislosti nebo nainstaluji jiné.
Tyto poznámky jsem si udělal při sledování Mayanwolfe's twitch streams a dělat z mých projektů speciální díky a křičet jí.
Mnohokrát jsem se dostal, když jsem se učil, jak nastavit své servery a API. Doufám, že s těmito poznámkami už to znovu nedostanu a zabráním tomu, aby to dostal i někdo jiný.
Budete muset mít nainstalovaný Node.js a účty v MongoDB a Heroku a stažené rozhraní Heroku CLI.
Hlavní části vašeho nastavení budou:
- inicializovat npm a nainstalovat závislosti
- vyžadujte, co potřebujete, a poslouchejte
- nastavte své soubory .env a .gitignore
- deklarujte své proměnné MongoDB
- připojit k MongoDB
- nastavte svůj middleware
- vytvářejte své veřejné složky a složky zobrazení a příslušné soubory
- nastavte GET (a POST, PUT, DELETE)
- přeneste svůj server do Heroku
- vyhřívejte se ve slávě vybudování vlastního serveru
Jdeme!
Inicializovat npm a nainstalovat závislosti
V této složce vytvořte složku projektu a soubor server.js. Používám bash terminál ve VSCode a příkazy mkdir a touch.
V terminálu inicializujte npm:
npm init -y
Parametr -y umožňuje, abyste nemuseli opakovaně mačkat enter.
Dále nainstalujte závislosti, které budete používat ve svých projektech. V poslední době mám tendenci používat express, dotenv, cors, pokud nastavuji lokální API, někdy MongoDB, ejs a nodemon.
Do terminálu znovu napište
npm i express dotenv cors mongodb ejs
I znamená install, své závislosti můžete instalovat jednu po druhé (pokaždé zapsáním npm i), nebo všechny najednou, jak je uvedeno výše.
Nodemon je jiný. Pro nodemon napište
npm i nodemon --save-dev
protože je to nástroj, který se používá pouze při vývoji. Můžete přejít do souboru package.json a zkontrolovat, zda je vše správně nainstalováno.
Zatímco tam, přejděte na "skripty" a po "start":... přidejte
"start": "node server.js",
"dev": "nodemon server.js"
nezapomeň na čárku.
Nyní v terminálu můžete psát
npm run dev
a nechte server restartovat sám, kdykoli provedete změny a uložíte.
Vyžadovat a poslouchat
Pouhé stahování nestačí. Abyste je mohli používat, musíte vyžadovat závislosti.
Zpět do souboru server.js zapište
const express = require('express')
const app = express()
const cors = require('cors')
const MongoClient = require('mongodb').MongoClient
require('dotenv').config()
const PORT = 8000
app.listen() je na samém konci vašeho kódu, ale můžete jej nastavit hned, abyste otestovali, že váš server funguje. Do vašeho server.js napište
app.listen(PORT, () => {
console.log(`Go catch the server at PORT ${PORT}`)
})
Uložte kód. Otevřete prohlížeč a do adresního řádku napište localhost:8000 nebo jakékoli číslo, které zadáte do proměnné PORT. Vaše zpráva console.log by se měla objevit ve vašem terminálu, a protože váš server není nastaven tak, aby odpovídal na cokoli, uvidíte
ve vašem prohlížeči, což je nyní zcela v pořádku.
Nastavte si soubory .env a .gitignore
Pokud jste spouštěli nodemon, klikněte na svůj terminál a stiskněte Ctrl + C, abyste získali svůj repl zpět a mohli znovu psát.
Než svůj projekt přesunete do githubu, měli byste vytvořit soubor .gitignore, aby se váš gigantický seznam node_modules také netlačil. .env je pro citlivé informace, jako je vaše heslo mongodb, které musí být také uloženo ve vašem souboru .gitignore.
Ve svém terminálu napište
touch .gitignore .env
Otevřete .gitignore a napište
node_modules
.env
Uložte a poté smažte proměnnou PORT ze server.js a do souboru .env zapište PORT =8000 (nepište const ani let).
Vraťte se ke svému app.listen v server.js a změňte jej na
app.listen(process.env.PORT || PORT, () => {
console.log(`Go catch the server at PORT ${process.env.PORT || PORT}`);
})
Uložte všechny soubory.
Nyní jste připraveni vytvořit úložiště a začít tlačit.
Ve svém terminálu napište
git init
a pak
git add .
poté přejděte na svůj GitHub a vytvořte nové úložiště. Na stránce nastavení zkopírujte část z git commit .... git push a vložte ji do svého terminálu, dokud nebudete hotovi, stiskněte Enter.
Deklarujte své proměnné MongoDB
Za předpokladu, že se připojujete k databázi MongoDB pro svůj projekt, ve vašem server.js, mezi vašimi požadavky a app.listen, napište
let db,
dbConnectionString = process.env.DB_STRING,
dbName = '',
collection
process.env.DB_STRING znamená, že server.js získává DB_STRING z vašeho souboru .env.
Přejděte na stránku nasazení databáze MongoDB, klikněte na Připojit a poté na Připojit aplikaci. Zkopírujte připojovací řetězec, přejděte do souboru .env a zapište
DB_STRING =
vložení připojovacího řetězce do proměnné DB_STRING. Řetězec bude obsahovat
Pokud jste zapomněli heslo nebo je třeba změnit protože jste zpackali kroky se soubory git, .gitignore a .env a odhalili své heslo na GitHubu, jako já několikrát , klikněte na MongoDB's Database Access v části Zabezpečení vlevo a klikněte na Upravit. Ujistěte se, že se po změně hesla posunete dolů a stisknete Aktualizovat uživatele. Nasazení trvá minutu.
dbName je název vaší databáze. Získejte jej na stránce Database Deployments MongoDB a klikněte na Procházet kolekce. Na levé straně je seznam vašich databází. Do proměnné dbName napište jako řetězec název databáze, ke které chcete přistupovat.
Přidat, odevzdat a odeslat do git.
Připojte se k MongoDB
Zpět na server.js, napište
MongoClient.connect(dbConnectionString)
.then(client => {
console.log(`Connected to the ${dbName} database`)
db = client.db(dbName)
collection = db.collection('')
})
pod vašimi proměnnými MongoDB. V MongoDB klikněte na název databáze, abyste viděli kolekce v ní. Napište název kolekce mezi jednoduché uvozovky v db.collection.
Vše uložte a do terminálu napište npm run dev nebo npm start, abyste spustili server a zjistili, zda jste se připojili. Vaše konzole zaznamená vaše zprávy.
Pokračujte v přidávání, odesílání a odesílání do git.
Nastavte svůj middleware
Po připojení MongoClient.connect nastavte svůj middleware.
app.set('view engine', 'ejs')
app.use(express.static('public'))
app.use(express.urlencoded({extended: true}))
app.use(express.json())
app.use(cors())
Nyní váš kód ví, jak vykreslovat ejs, přistupovat k veřejným souborům, zpracovávat adresy URL a analyzovat data rozhraní API.
Git add, commit, push.
Vytvářejte své veřejné a zobrazované složky a soubory
Ve svém terminálu napište
mkdir public views
Ve veřejné složce vytvořte soubor js a soubor css, ve složce zobrazení vytvořte soubor index.ejs. Rychlý způsob, jak to udělat pomocí terminálu, je psaní
touch public/main.js public/style.css views/index.ejs
v něm. Vyplňte svůj obsah a nezapomeňte propojit soubory css a js v souboru ejs, ale před názvy souborů nemusíte vkládat public/.
Nastavte si GET
Můžete nastavit jednoduchý přístup ke kontrole, zda vše funguje správně.
Zpátky v server.js po middlewaru, napište
app.get('/', (req, res) => {
res.render('index.ejs')
})
Uložte kód, spusťte server a obnovte prohlížeč, abyste zkontrolovali, zda se váš soubor ejs vykresluje.
Můžete také vložit svou sbírku do pole a vykreslit ji v console.log, abyste zkontrolovali, co se vrací z vaší databáze, ale buďte opatrní, pokud máte hodně dat. Obnovte svůj prohlížeč, abyste viděli výsledky.
app.get('/', (req, res) => {
collection.find().toArray()
.then (results => {
res.render('index.ejs')
console.log(results)
})
})
Nyní můžete buď dokončit své metody CRUD, nebo
Předání serveru Heroku
Heroku musí mít přístup k vašemu DB_STRING, ale používá příkazy git, takže když posíláte do Heroku, musíte ze souboru .gitignore odstranit .env.
Udělejte poslední uložit, přidat ., odevzdat a odeslat na GitHub, poté odstranit .env z .gitignore. Přejděte na server.js a do terminálu napište
heroku login
Ve vašem prohlížeči se otevře okno pro přihlášení a po dokončení jej můžete zavřít. Napište zpět do terminálu
heroku create
který vám vybere jméno. Pokud máte na mysli jméno, napište ho po vytvoření, ale před stisknutím klávesy Enter.
Dále do terminálu napište
echo "web: node server.js" > Procfile
který vytvoří složku Procfile.
Nyní proveďte běžné přidání git . a git commit -m'comment', ale při pushování pište
git push heroku main
Je to nasazeno! Ujistěte se, že nyní zapíšete .env znovu do .gitignore, nenechávejte to na později. Kdykoli zatlačíte na git, napište .env, pro odeslání do Heroku odstraňte .env.
Dalším problémem, kterému jsem v tomto kroku čelil, bylo to, že Heroku neměl přístup k mé databázi, pokud jsem na MongoDB nezadal všechny IP adresy. Myslím, že je to v pořádku pro mé malé projekty, ale hledám řešení, které bych použil, když začnu dělat větší projekty.
Dále chci zkontrolovat své metody CRUD a další nástroje, jako je Mongoose.