Рубрики
Без рубрики

Как развернуть приложение Mern Heroku с использованием Mongodb Atlas

Введение в Mernin в этой статье мы будем строить и развертывание приложения, построенного с стеком Мерна в Heroku. Мерн, который означает Mongodb, Express, React и Node.js, является популярным технологическим стеком, используемым в создании веб-приложений. Это включает в себя Frontend Raction (с реагированием), бэкэндской работой (с экспрессом и

Автор оригинала: Dillion Megida.

Введение в Мерн

В этой статье мы будем строить и развертывание приложения, построенного с стеком Мерн в Heroku.

Мерн, который означает Mongodb, Express, React и Node.js, является популярным технологическим стеком, используемым в создании веб-приложений. Он включает в себя работу Frontend (с реагированием), бэкэндской работой (с экспресс и NODEJS) и базой данных (с MongoDB).

Heroku С другой стороны, является платформой в качестве службы (PAAS), которая позволяет разработчикам построить, запустить и действовать приложения полностью в облаке.

Для базы данных мы будем использовать MongoDB ATLAS, который является глобальной службой базы данных облачных баз данных для современных приложений. Это более безопасно, чем Mongodb, установленные локально на нашем сервере, и он также дает нам номер для дополнительных ресурсов на наших серверах.

Для Frestend мы построим простое приложение React React, которое делает Post запросы на API для добавления пользователя, а также может сделать запросы на получение всех пользователей.

Вы можете пропустить на любой шаг со таблицей, указанного ниже.

Оглавление

  • Введение в Мерн
  • Давайте начнем строить
  • Создание приложения React
  • Создание бэкэнда
  • Подключите базу данных Mongodb Atlas
  • Призывая API на Frontend
  • Развертывание Героку
  • Создать приложение Heroku
  • Настроить Package.json.
  • Заворачивать

Давайте начнем строить

Создание приложения React

Примечание: Прежде чем мы начнем с нашего проекта, Узел Должен быть установлен на вашем компьютере. Узел Также дает нам NPM , который используется для установки пакетов.

Установите Create-React-App

Create-React-App используется для создания приложения React Starter.

Если у вас нет Create-React-App Установлен, введите следующее в командной строке:

npm i create-react-app -g

-G Флаг устанавливает пакет глобально.

Создайте каталог проекта

create-react-app my-project
cd my-project

Вышеуказанное создает каталог «My-Project» и устанавливает зависимости, которые будут использоваться в приложении RACH STARTER. После завершения установки вторая команда меняется в каталог проекта.

Запустите приложение и сделайте необходимые изменения

npm start

Приведенная выше команда запускает приложение React, которое дает вам URL-адрес, где вы превысите проект. Затем вы можете внести необходимые изменения, такие как изменение изображений или текста.

Установка Axios.

npm i axios --save

Axios Является ли библиотека JavaScript, используемая для облегчения HTTP-запросов. Он будет использоваться для отправки запросов от Frestend (React) в API, предоставленные бэкэндом.

Создание бэкэнда

Организация управляет API, обрабатывает запросы, а также подключается к базе данных.

Установите пакеты Backend

npm i express cors mongoose body-parser --save
  1. Экспресс : «Express – это минимальный и гибкий веб-прикладной Node.js, который обеспечивает надежный набор функций для веб-приложений» – Express Документация
  2. CORS : «CORS – это пакет Node.js для предоставления промежуточного программного обеспечения Connect/Express, которая может быть использована для включения CORS с различными параметрами» – Документация CORS.
  3. мангуст : «Mongoose – это инструмент моделирования объекта MongoDB, предназначенный для работы в асинхронной среде. Монгуст поддерживает обе обещания, так и обратные вызовы» – Монгусная документация
  4. Тело-парсер : «У Node.js тело разряжает промежуточное программное обеспечение». – Документация по телу-парсеру

Создать папку Backend

mkdir backend
cd backend

Настройте бэкэнда

Создать точку входа Server.js

Сначала создайте server.js Файл, который будет точкой записи на бэкэнду.

touch server.js

В server.js Введите следующее:

const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const path = require('path')
const app = express();
require('./database');
-----
app.use(bodyParser.json());
app.use(cors());
-----
// API
const users = require('/api/users');
app.use('/api/users', users);
-----
app.use(express.static(path.join(__dirname, '../build')))
app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, '../build'))
})
-----
const port = process.env.PORT || 5000;
app.listen(port, () => {
    console.log(`Server started on port ${port}`);
});

Express.Static Поставляют статические файлы, которые являются теми, которые построены, когда NPM запустить сборку работает на реактивный проект. Помните, что встроенный файл находится в папке сборки.

Из нашей конфигурации любой запрос отправлен /API/пользователи будет отправлен на Пользователи API, который мы собираемся настроить.

Настройте API пользователей
mkdir api
touch api/users.js

В API/users.js Добавьте следующее:

const express = require('express');
const router = express.Router()
-----
const User = require('../models/User');
-----
router.get('/', (req, res) => {
    User.find()
        .then(users => res.json(users))
        .catch(err => console.log(err))
})
-----
router.post('/', (req, res) => {
    const { name, email } = req.body;
    const newUser = new User({
        name: name, email: email
    })
    newUser.save()
        .then(() => res.json({
            message: "Created account successfully"
        }))
        .catch(err => res.status(400).json({
            "error": err,
            "message": "Error creating account"
        }))
})
module.exports = router

В указанном выше коде мы создаем обработчик Get и Post Project, который выбирает всех пользователей и пользователей пользователей. Получение и добавление пользователя в базу данных помогает Пользователь Модель мы создадим.

Создать модель пользователя
mkdir models
touch models/user.js

В Модели/user.js Добавьте следующее:

const mongoose = require('mongoose');
const Schema = mongoose.Schema;
-----
const userSchema = new Schema({
    name: {
        type: String,
        required: true
    },
    email: {
        type: String,
        required: true
    }
})
module.exports = mongoose.model("User", userSchema, "users")

В вышеупомянутый код схема создается для пользователя, которая содержит поля пользователя. В конце файла модель («пользователь») экспортируется с схемой и коллекцией («пользователям»).

Подключите базу данных Mongodb Atlas

По словам Документы , «Mongodb Atlas – это глобальная облачная база данных для современных приложений».

Сначала нам нужно зарегистрироваться на Cloud Mongo. Пройти через Эта документация Создать учетную запись ATLAS и создать свой кластер.

Одна вещь, которую стоит отметить, это Whitelisting ваш соединение IP-адрес Отказ Если вы игнорируете этот шаг, у вас не будет доступа к кластеру, поэтому обратите внимание на этот шаг.

Кластер – это небольшой сервер, который будет управлять нашими коллекциями (аналогично таблицам в базах данных SQL). Чтобы подключить свою бэкфон к кластеру, создайте файл database.js , который, как вы можете видеть, требуется в server.js Отказ Затем введите следующее:

const mongoose = require('mongoose');
const connection = "mongodb+srv://username:@/?retryWrites=true&w=majority";
mongoose.connect(connection,{ useNewUrlParser: true, useUnifiedTopology: true, useFindAndModify: false})
    .then(() => console.log("Database Connected Successfully"))
    .catch(err => console.log(err));

В Соединение Переменная, введите ваш Имя пользователя (Для облака Mongodb), ваш пароль (кластер пароль), ваш кластер (адрес для вашего кластера) и база данных (Название вашей базы данных). Все это можно легко обнаружить, если вы следили за документацией.

Призывая API на Frontend

Все API будут доступны на localhost: 5000 локально, как мы создаем server.js Отказ При развертывании Heroku сервер будет использовать порт, предоставляемый сервером ( Process.env.port ).

Чтобы облегчить вещи, Rect позволяет нам указать прокси, к которому запросы будут отправлены.

Открыть Package.json И незадолго до последней курчавой скобки добавьте следующее:

"proxy": "http://localhost:5000"

Таким образом, мы можем напрямую отправить запросы на API/пользователи Отказ И когда наш сайт развернут и построен, порт по умолчанию наша приложение будет использоваться с тем же API.

Открыть App.js Для реагирования и добавить следующее:

import React, {useState, useEffect} from 'react'
import axios from 'axios';
-----
const App = function () {
	const [users, setUsers] = useState(null);

	const [username, setUsername] = useState("");
	const [email, setEmail] = useState("");
	useEffect(() => {
		axios
			.get("/api/users")
			.then((users) => setUsers(users))
			.catch((err) => console.log(err));
	}, []);

	function submitForm() {
		if (username === "") {
			alert("Please fill the username field");
			return;
		}
		if (email === "") {
			alert("Please fill the email field");
			return;
		}
		axios
			.post("/api/users", {
				username: username,
				email: email,
			})
			.then(function () {
				alert("Account created successfully");
				window.location.reload();
			})
			.catch(function () {
				alert("Could not creat account. Please try again");
			});
	}
	return (
		<>
			
My Project

			{users === null ? (
				
Loading...

			) : users.length === 0 ? (
				
No user available

			) : (
				<>
					
Available Users

					
    
						{users.map((user, index) => (
							
  1. 
								Name: {user.name} - Email: {user.email}
							
    2. 
						))}
					

				
			)}

			

				 setUsername(e.target.value)}
					type="text"
					placeholder="Enter your username"
				/>
				 setEmail(e.target.value)}
					type="text"
					placeholder="Enter your email address"
				/>
				
			

		
	);
};
export default App

Уместите и Useffect Крючки используются для обработки состояния и Sideeffects Отказ Что в основном происходит, что первое состояние пользователей является null и «загрузка …» показано в браузере.

В Useffect , [] используется для указания того, что в ComponentDidmount Этап (когда компонент установлен), сделайте запрос AXIOS на API, который работает на localhost: 5000 Отказ Если это получает результат, и пользователь не отображается пользователя, «доступный пользователь» не отображается. В противном случае отображается пронумерованный список пользователей.

Если вы хотите узнать больше о Уместите и Useffect Проверьте эту статью – Что чертовски реагируют крюки?

Благодаря доступной форме может быть сделан запрос на запись для публикации нового пользователя. Состояние входов контролируется и отправляется на API в localhost: 5000 на представление. После этого страница обновляется, а новый пользователь отображается.

Развертывание Героку

Чтобы развернуть приложение к Heroku, вы должны иметь учетную запись Heroku.

Перейти к их страница создать учетную запись. Тогда пройдите через их документация Как создать приложение Heroku. Также проверьте Документация на Heroku Cli.

Создать приложение Heroku

Во-первых, войдите в Heroku:

heroku login

Это перенаправляет вас на URL в браузере, где вы можете войти в систему. Как только вы закончите, вы можете продолжить в терминале.

В том же каталоге реагирования проекта, выполните следующие действия:

heroku create

Это создаст приложение Heroku, а также дать вам URL для доступа к приложению.

Настроить Package.json.

Heroku использует ваш файл package.json, чтобы узнать, какие сценарии для запуска и какие зависимости устанавливают для вашего проекта для успешного запуска.

В вашем Package.json Файл, добавьте следующее:

{
    ...
    "scripts": {
        ...
        "start": "node backend/server.js",
        "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install npm && run build"
    },
    ...
    "engines": {
        "node": "10.16.0"
    }
}

Heroku запускает пост-сборка, который, как вы можете видеть, устанавливает ваши зависимости и управляет сборкой вашего реагирования проекта. Затем он начинает ваш проект с Начать Сценарий, который в основном начинает ваш сервер. После этого ваш проект должен работать нормально.

Двигатели Определяет версии двигателей, таких как Узел и NPM установить.

Подтолкнуть к Героку

git push heroku master

Это толкает ваш код в Heroku. Не забудьте включить ненужные файлы в .gitignore Отказ

Через несколько секунд ваш сайт будет готов. Если есть какие-либо ошибки, вы можете проверить свой терминал или перейти на приборную панель в браузере, чтобы просмотреть журналы сборки.

Теперь вы можете просмотреть свой сайт в URL Heroku, отправленный, когда вы работаете Heroku создать Отказ

Это все, что есть к этому. Рад, что вы прочитали это далеко.

Заворачивать

Конечно, есть больше приложений стека Mern.

Эта статья не пошла так глубоко, как аутентификации, логин, сеансы и все это. Он просто охватил, как развернуть приложения Meern Stack в Heroku и работать с Mongodb Atlas.

Вы можете найти другие статьи, такие как это в моем блоге – dillionmegida.com.

Спасибо за прочтение.

Читайте ещё по теме: