Recentemente, aprendi como implantar meu projeto MERN Full-stack e mal posso esperar para ajudá-lo a implantar o seu também.

Ao implantar o projeto MERN full-stack, o back-end e o front-end precisam ser implantados separadamente. Vamos ver como implantar o back-end primeiro:

Aqui está a configuração do repositório que estou implantando para renderizar:

Eu tenho a pasta do cliente para o front-end e a pasta do servidor para o back-end.

Em primeiro lugar: inscreva-se no Render para obter uma conta gratuita. Eu recomendo se inscrever por meio de sua conta do GitHub para que ele possa acessar suas pastas mais rapidamente.

Processo interno:

Para back-end:

1. Clique em novo e selecione Web Service

3. Identifique um nome exclusivo para seu serviço da web.

4. Podemos deixar 'Região' sozinho

5. Deixe 'Branch' como 'main'.

6. Para 'Diretório raiz', especifiquei 'servidor', pois todas as minhas informações de back-end estão localizadas nessa pasta.

7. Deixe o Runtime para o Node, pois é o que usamos para o nosso back-end.

8. Construa o comando, você pode deixá-lo como 'fio'.

9. O comando Iniciar, você pode colocar 'npm start'.

10. Em seguida, certifique-se de escolher free para o Instance Type .

11. Em seguida, clique no botão 'avançado':

Depois de clicar no botão, você terá mais opções preenchidas na parte inferior da página.

12. Clique em 'Adicionar variável de ambiente':

Adicione uma variável de ambiente chamada 'MY_MONGO_URL' e cole sua URL de conexão do MongoDB no valor.

Esta etapa está informando ao Render como se conectar ao seu banco de dados MongoDB.

13. Em seguida, clique em 'Criar serviço da Web'.

Em seguida, um log do console deve preencher informando que está começando a clonar do seu arquivo GitHub.

Depois de algumas execuções, o log deve indicar que está “conectado ao db && escutando na porta ###”.

Testando se o Backend funciona:

A maneira de testar se você sabe se seu back-end está implantado é clicar no hiperlink fornecido no canto superior direito. Ele mostrará um erro semelhante a este:

Se você acessar o hiperlink no final, adicione 'api/(o ponto final da sua rota)' à string de consulta e verá as informações do banco de dados em um formato JSON.

Et voila, nosso back-end foi implantado. Agora para finalizar tudo, vamos fazer o deploy do nosso frontend.

Front-end:

Para front-end:

1. Clique em 'Novo' e selecione 'Site estático' no menu suspenso.

4. Identifique um nome exclusivo para ele

5. Deixe Branch como 'principal'.

6. Em 'Diretório Raiz', digite 'cliente'.

7. Comando build — yarn build

8. Para 'Publicar diretório', digite 'build'.

9. Clique em 'Create Static Site' e uma nova página deve aparecer com o log do console. No lado esquerdo, procure por 'Redirects/Rewrites'.

10. Depois, crie duas regras.

A primeira regra a seguir é reescrever o '/api/*' em seu código para o novo back-end implantado.

A segunda regra é reescrever '/*' no arquivo 'index.html'.

Depois, ele deve tentar implantar novamente e a mensagem deve indicar “uploading build…” e “seu site está no ar”.

Por favor, deixe-me saber se você tem alguma dúvida ou dificuldade. De que outras maneiras você pode implantar o aplicativo MERN de pilha completa?

Sinta-se à vontade para entrar em contato comigo no LinkedIn:https://www.linkedin.com/in/mai-vang-software-engineer/