Введение
Это записи, которые я сделал, когда учился устанавливать сервер и API на своем компьютере с Node.js, Express, MongoDB и другими зависимостями.
Именно в таком порядке я предпочитаю все устанавливать каждый раз, когда начинаю новый проект. В зависимости от того, что я делаю, я не устанавливаю некоторые зависимости, показанные здесь, или устанавливаю другие.
Я сделал эти заметки во время просмотра twitch-стримов Mayanwolfe и создания своих проектов, поэтому отдельное спасибо и крик ей.
«We don’t get got, we go get!» -#100Devs war cry
Я много раз попадал впросак, пока учился настраивать свои серверы и API. Я надеюсь, что благодаря этим заметкам я больше не попаду впросак и предотвращу попадание впросак кого-нибудь другого.
Вам понадобится установленный Node.js и учетные записи в MongoDB и Heroku, а также загруженный Heroku CLI.
Основными частями вашей установки будут:
- инициализация npm и установка зависимостей
- потребовать то, что вам нужно, и прослушать
- настроить файлы .env и .gitignore
- объявить переменные MongoDB
- подключиться к MongoDB
- настройте промежуточное ПО
- создайте папки public и views и соответствующие файлы
- настройте GET (и POST, PUT, DELETE)
- разместите свой сервер на Heroku
- наслаждайтесь тем, что создали свой собственный сервер.
Поехали!
Инициализация npm и установка зависимостей
Создайте папку проекта и файл server.js внутри этой папки. Я использую терминал bash в VSCode и команды mkdir и touch.
В терминале инициализируйте npm:
npm init -y
Флаг -y делает это так, что вам не придется нажимать клавишу Enter несколько раз.
Далее установите зависимости, которые вы будете использовать в своих проектах. В последнее время я обычно использую express, dotenv, cors, если я устанавливаю локальный API, MongoDB, иногда ejs и nodemon.
В терминале снова напишите
npm i express dotenv cors mongodb ejs
Символ i означает install, вы можете устанавливать зависимости по одной (каждый раз записывая npm i) или все сразу, как описано выше.
Nodemon отличается. Для nodemon напишите
npm i nodemon --save-dev
так как это инструмент для использования только во время разработки. Вы можете зайти в свой файл package.json, чтобы проверить, что все установлено правильно.
Там перейдите в раздел «scripts» и после «start»: … add
"start": "node server.js",
"dev": "nodemon server.js"
не забудьте про запятую.
Теперь в терминале вы можете написать
npm run dev
и сервер будет перезапускаться сам по себе в любое время, когда вы внесете изменения и сохраните их.
Требовать и слушать
Просто скачать недостаточно. Вам нужно потребовать зависимости, чтобы иметь возможность их использовать.
Вернитесь в файл server.js и напишите
const express = require('express')
const app = express()
const cors = require('cors')
const MongoClient = require('mongodb').MongoClient
require('dotenv').config()
const PORT = 8000
app.listen() будет в самом конце вашего кода, но вы можете настроить его сейчас, чтобы проверить, что ваш сервер работает. В файле server.js напишите
app.listen(PORT, () => {
console.log(`Go catch the server at PORT ${PORT}`)
})
Сохраните код. Откройте браузер и напишите localhost:8000 или любое другое число, которое вы указали в переменной PORT, в строке URL. В терминале должно появиться сообщение console.log, а поскольку ваш сервер не настроен на ответ, вы увидите следующее
Cannot GET /
в вашем браузере, что совершенно нормально в данный момент.
Настройте файлы .env и .gitignore
Если у вас был запущен nodemon, щелкните в терминале и нажмите Ctrl + C, чтобы вернуть свой repl и снова иметь возможность набирать текст.
Перед размещением проекта на github вы должны создать файл .gitignore, чтобы ваш гигантский список модулей node_modules также не был размещен. Файл .env предназначен для конфиденциальной информации, например, пароля mongodb, поэтому его тоже нужно поместить в файл .gitignore.
В терминале напишите
touch .gitignore .env
Откройте .gitignore и напишите
node_modules
.env
Сохраните, затем удалите переменную PORT из server.js и напишите PORT = 8000 в файле .env (не пишите const или let).
Вернитесь к вашему app.listen в server.js и измените его на
app.listen(process.env.PORT || PORT, () => {
console.log(`Go catch the server at PORT ${process.env.PORT || PORT}`);
})
Сохраните все файлы.
Теперь вы готовы создать репозиторий и начать расшаривание.
В терминале напишите
git init
и затем
git add .
затем перейдите на GitHub и создайте новый репозиторий. На странице настройки скопируйте раздел с git commit …. на git push и вставьте его в терминал, нажимая enter до завершения.
Объявите переменные MongoDB
Предполагая, что вы подключаетесь к базе данных MongoDB для вашего проекта, в вашем server.js, между requires и app.listen, напишите
let db,
dbConnectionString = process.env.DB_STRING,
dbName = '',
collection
process.env.DB_STRING означает, что server.js получает DB_STRING из вашего файла .env.
Перейдите на страницу развертывания базы данных MongoDB, нажмите Connect, затем нажмите Connect your application. Скопируйте строку подключения, затем перейдите в файл .env и напишите
DB_STRING =
вставьте строку подключения в переменную DB_STRING. В строке будет <пароль>. Замените этот бит, включая <>, на свой пароль.
Если вы забыли свой пароль или вам нужно его изменить, потому что вы перепутали шаги с git, .gitignore и .env файлами, раскрыв свой пароль на GitHub, как это несколько раз делал я., нажмите на Доступ к базе данных MongoDB в разделе Безопасность слева и нажмите Редактировать. Убедитесь, что вы прокрутили вниз и нажали Update User после изменения пароля. Это займет минуту для развертывания.
dbName — это имя вашей базы данных. Получите его на странице MongoDB’s Database Deployments и нажмите Browse Collections. Слева появится список ваших баз данных. Запишите имя базы данных, к которой вы хотите получить доступ, в переменную dbName в виде строки.
Добавьте, зафиксируйте и отправьте в git.
Подключение к MongoDB
Вернитесь в файл server.js и напишите
MongoClient.connect(dbConnectionString)
.then(client => {
console.log(`Connected to the ${dbName} database`)
db = client.db(dbName)
collection = db.collection('')
})
под переменными вашей базы данных MongoDB. В MongoDB нажмите на имя вашей базы данных, чтобы увидеть коллекции в ней. Напишите название коллекции между одинарными кавычками в db.collection.
Сохраните все, затем напишите npm run dev или npm start в терминале, чтобы запустить ваш сервер и проверить, подключились ли вы. Ваша консоль будет записывать ваши сообщения.
Продолжайте добавлять, фиксировать и размещать в git.
Настройка промежуточного ПО
После подключения MongoClient.connect настройте промежуточное ПО.
app.set('view engine', 'ejs')
app.use(express.static('public'))
app.use(express.urlencoded({extended: true}))
app.use(express.json())
app.use(cors())
Теперь ваш код знает, как отображать ejs, обращаться к публичным файлам, обрабатывать урлы и анализировать данные api.
Git add, commit, push.
Создайте папки и файлы public и views
В терминале напишите
mkdir public views
В папке public создайте js-файл и css-файл, в папке views — файл index.ejs. Быстрый способ сделать это с помощью терминала — написать
touch public/main.js public/style.css views/index.ejs
в нем. Заполните содержимое и не забудьте связать css и js файлы в вашем ejs файле, но вам не нужно включать public/ перед именами файлов.
Настройте GET
Вы можете настроить простой get, чтобы проверить, что все работает правильно.
В файле server.js после промежуточного программного обеспечения напишите
app.get('/', (req, res) => {
res.render('index.ejs')
})
Сохраните код, запустите сервер и обновите браузер, чтобы убедиться, что ваш ejs-файл отображается.
Вы также можете поместить вашу коллекцию в массив и вывести ее в console.log, чтобы проверить, что возвращается из вашей базы данных, но будьте осторожны с этим, если у вас много данных. Обновите браузер, чтобы увидеть результаты.
app.get('/', (req, res) => {
collection.find().toArray()
.then (results => {
res.render('index.ejs')
console.log(results)
})
})
Теперь вы можете либо доработать свои методы CRUD, либо
Перенести свой сервер на Heroku
Heroku должен иметь доступ к вашему DB_STRING, но он использует команды git, поэтому вам нужно удалить .env из файла .gitignore при переносе на Heroku.
Сделайте последнее сохранение, добавьте ., зафиксируйте и отправьте на GitHub, затем удалите .env из .gitignore. Перейдите к файлу server.js и в терминале напишите
heroku login
Откроется окно в браузере для входа в систему, затем вы сможете закрыть его, когда закончите. Снова в терминале напишите
heroku create
который выберет для вас имя. Если у вас есть имя в голове, напишите его после create, но до нажатия enter.
Далее в терминале напишите
echo "web: node server.js" > Procfile
что создаст папку Procfile.
Теперь выполните обычные git add . и git commit -m’comment’, но при проталкивании напишите
git push heroku main
Все развернуто! Убедитесь, что вы снова написали .env в .gitignore сейчас, не оставляйте это на потом. Всякий раз, когда вы делаете push в git, пишите .env, а для push в Heroku удаляйте .env.
Еще одна проблема, с которой я столкнулся на этом шаге — Heroku не мог получить доступ к моей базе данных, пока я не внес все IP-адреса в белый список MongoDB. Я думаю, что это нормально для моих небольших проектов, но я ищу решение, которое можно будет использовать, когда я начну делать более крупные проекты.
Далее я хочу рассмотреть мои методы CRUD и другие инструменты, такие как Mongoose.