Настройка сервера с Node.js, Express, MongoDB и т.д. 😼

Введение

Это записи, которые я сделал, когда учился устанавливать сервер и 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.

Основными частями вашей установки будут:

  1. инициализация npm и установка зависимостей
  2. потребовать то, что вам нужно, и прослушать
  3. настроить файлы .env и .gitignore
  4. объявить переменные MongoDB
  5. подключиться к MongoDB
  6. настройте промежуточное ПО
  7. создайте папки public и views и соответствующие файлы
  8. настройте GET (и POST, PUT, DELETE)
  9. разместите свой сервер на Heroku
  10. наслаждайтесь тем, что создали свой собственный сервер.

Поехали!


Инициализация 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.

Оцените статью
devanswers.ru
Добавить комментарий