Implantando um aplicativo MERN usando o MongoDB Atlas no Heroku


Índice

Introdução ao MERN

Neste artigo, eu estaria criando e implantando um aplicativo criado com a pilha MERN no Heroku.

MERN, que significa MongoDB, Express, React e NodeJS, é uma pilha de tecnologia popular usada na criação de aplicativos da Web que envolvem trabalho de front-end (com React), trabalho de back-end (com Express e NodeJS) e um banco de dados (com MongoDB).

O Heroku, por outro lado, é uma plataforma como serviço (PaaS) que permite aos desenvolvedores criar, executar e operar aplicativos inteiramente na nuvem – Documentação

Para este artigo, estaríamos usando o MongoDB Atlas, que é um serviço global de banco de dados em nuvem para aplicativos modernos. Isso é mais seguro que o MongoDB instalado localmente em nosso servidor e também oferece espaço para mais recursos em nossos servidores.

Estaríamos construindo um projeto de reação simples, que faz solicitações de postagem para uma API para adicionar um usuário e também pode fazer solicitações de obtenção para obter todos os usuários.

Você pode pular para qualquer etapa com o índice listado acima.

Processo de construção

Você já pode ter um projeto MERN que deve ser implantado no Heroku, mas eu examinaria um pequeno projeto apenas no caso de você não

Building React App

Nota: Antes de começarmos nosso projeto, node deve estar instalado no seu computador. node também nos fornece npm que é usado para instalar pacotes.

Instalar create-react-app

create-react-app é usado para criar um aplicativo de reação inicial.

Se você não tem create-react-app instalado antes, digite o seguinte na linha de comando.

npm i create-react-app -g

-g flag instala o pacote globalmente.

Criar diretório de projeto

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

O exemplo acima cria um diretório ‘meu-projeto’ e instala dependências que seriam usadas no reator inicial. Após o qual o diretório é alterado para o diretório do projeto.

Inicie o projeto e faça as edições necessárias

npm start

O exemplo acima inicia o projeto de reação, que fornece uma URL que você visualiza o projeto. Você faz as edições necessárias no projeto, como alterar imagens ou textos.

Instalar axios

npm i axios --save

axios é uma biblioteca javascript usada para fazer solicitações HTTP facilmente. Seria usado para enviar solicitações do front-end (React) para as APIs fornecidas pelo back-end

Criando o back-end

O back-end gerencia as APIs, manipula solicitações e também se conecta ao banco de dados.

Instalar pacotes de back-end

npm i express cors mongoose body-parser --save

  1. express: Express é uma estrutura mínima e flexível de aplicativos da Web Node.js. que fornece um conjunto robusto de recursos para aplicativos da Web – Documentação.
  2. cors: CORS é um pacote node.js para fornecer um middleware do Connect / Express que pode ser usado para ativar o CORS com várias opções – Documentação.
  3. mongoose: Mongoose é uma ferramenta de modelagem de objeto MongoDB projetada para funcionar em um ambiente assíncrono. O Mongoose suporta promessas e retornos de chamada – Documentação.
  4. body-parser: Corpo do Node.js que analisa o middleware. – Documentação.

Criar pasta de back-end

mkdir backend
cd backend

Configurar back-end

Criar ponto de entrada server.js

Primeiro, crie um server.js arquivo, que seria o ponto de entrada para o back-end

touch server.js

No server.js, digite o seguinte

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 entrega arquivos estáticos, o que é construído quando npm run build é executado em um projeto de reação. Lembre-se, o arquivo criado está na pasta de construção.

Em nossa configuração, qualquer solicitação enviada para /api/users será enviado para users API que estamos prestes a configurar

Configurar users api

mkdir api
touch api/users.js

No touch.js, adicione o seguinte

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 

Acima, criamos um manipulador de solicitação de recebimento e publicação que busca todos os usuários e publica usuários. A busca e inclusão de usuário no banco de dados é auxiliada pelo User modelo criado. Vamos criar o modelo

Crio User modelo

mkdir models
touch models/user.js

No user.js, adicione o seguinte

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")

Acima, um esquema é criado para o usuário, que contém os campos do usuário. No final do arquivo, o modelo (“Usuário”) é exportado com o esquema e a coleção (“usuários”)

Conecte o banco de dados do MongoDB Atlas

De acordo com os documentos

O MongoDB Atlas é o serviço global de banco de dados em nuvem para aplicativos modernos.

Em primeiro lugar, precisamos nos registrar na nuvem Mongo.

Ir através esta documentação para criar uma conta Atlas e criar seu cluster.

Uma coisa que vale a pena notar é lista branca de seu endereço IP de conexão. Se esta etapa for ignorada, você não terá acesso ao cluster; portanto, preste atenção nessa etapa.

O cluser é um servidor pequeno que gerencia nossas coleções (semelhante às tabelas nos bancos de dados SQL). Para conectar seu back-end ao cluster, crie um arquivo database.js que, como podemos ver, é necessário em server.jse digite o seguinte:

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));

No connection variável, insira seu username (para nuvem MongoDB), seu password (senha do cluster), seu cluster (endereço do seu cluster) e o database (nome do seu banco de dados). Tudo isso pode ser facilmente descoberto se você seguiu a documentação

Chamando APIs no frontend

Todas as APIs seriam criadas para localhost:5000 localmente, como configuramos no server.js. Quando implantado no heroku, o servidor usaria a porta fornecida pelo servidor (process.env.PORT)

Para facilitar as coisas, o React nos permite especificar um proxy para o qual as solicitações seriam enviadas.

Aberto package.json e pouco antes da última chave, e adicione o seguinte:

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

Dessa forma, podemos enviar solicitações diretamente para api/users, e quando nosso site for implantado e construído, a porta padrão do nosso aplicativo será usada com a mesma API.

Aberto App.js para React e adicione o seguinte

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. ))
) )}
) } export default App

useState e useEffect ganchos são usados ​​para lidar com estados e efeitos colaterais. O que está basicamente acontecendo é que o primeiro estado dos usuários é null, e em nulo, ‘Carregando …’ é exibido no navegador. Em useEffect, [] é usado para especificar que em componentDidMount (quando o componente estiver montado), faça um pedido de axios para a API que está sendo executada no localhost:5000. Se o resultado for obtido e não houver usuário, ‘Nenhum usuário disponível’ será exibido para o usuário; caso contrário, será exibida uma lista numerada dos usuários.

Se você quiser saber mais sobre useState e useEffect, confira este artigo – O que diabos é React Hooks?

Com o formulário disponível, uma solicitação de postagem pode ser feita para postar um novo usuário. O estado das entradas é controlado e enviado à API em localhost:5000 na submissão. Após as alas, a página é atualizada e o novo usuário é exibido.

Implantando no Heroku

Para implantar seu aplicativo no heroku, você deve ter uma conta heroku. Vamos para a página deles para criar uma conta. Então passe a documentação deles sobre como criar um aplicativo heroku. Também confira a documentação no Heroku CLI

Criar aplicativo Heroku

Primeiro, faça o login no heroku:

heroku login

Isso o redirecionará para um URL no navegador no qual você pode fazer login e, em seguida, pode continuar no terminal.

No mesmo diretório de projeto de reação, execute o seguinte:

heroku create

O Tnis criaria um aplicativo heroku e também forneceria o URL para acessar o aplicativo.

Configurar package.json

O Heroku usa o arquivo package.json para saber quais scripts executar e as dependências a serem instaladas para que seu projeto seja executado com êxito.

No seu package.json, adicione o seguinte:

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

Pelo exposto, o heroku executa uma compilação posterior que, como você pode ver, instala suas dependências e executa uma compilação do seu projeto de reação. Em seguida, inicia seu projeto com o start script que basicamente inicia seu servidor. E seu projeto funciona bem.

engines especifica as versões de mecanismos como node e npm a serem instalados.

Empurre para Heroku

git push heroku master

Isso envia seus códigos para o heroku. Lembre-se de incluir os arquivos necessários .gitignore.

Após alguns segundos, seu site está pronto. Se houver algum erro, você poderá verificar se há resultados no terminal depois de empurrar ou acessar o painel no navegador para visualizar os logs de compilação.

Agora você pode visualizar seu site no URL enviado pelo heroku quando heroku create foi executado.


Isso é tudo o que há neste artigo. Que bom que você leu até aqui.

Embrulhar

Obviamente, existem mais aplicativos de pilha MERN.

Este artigo não foi tão profundo quanto autenticações, logon, sessões e tudo mais, mas apenas para facilitar a implantação de aplicativos de pilha MERN no heroku e o trabalho com o MongoDB Atlas.

Este artigo foi originalmente publicado no meu blog – dillionmegida.com

Obrigado pela leitura.



Fonte

Leave a Reply

Your email address will not be published. Required fields are marked *