J'ai récemment appris à déployer mon projet MERN Full-stack et j'ai hâte de vous aider à déployer le vôtre également.

Lors du déploiement du projet full-stack MERN, le backend et le frontend doivent être déployés séparément. Voyons d'abord comment déployer le backend :

Voici la configuration du dépôt que je déploie sur Render :

J'ai un dossier client pour le frontend et un dossier serveur pour le backend.

Avant tout : inscrivez-vous à Render pour un compte gratuit. Je vous recommande de vous inscrire via votre compte GitHub afin qu'il puisse accéder à vos dossiers plus rapidement.

Back-end :

Pour le back-end :

1. Cliquez sur nouveau et sélectionnez Service Web

3. Identifiez un nom unique pour votre service Web.

4. Nous pouvons laisser 'Region' seul

5. Laissez 'Branche' comme 'principal'.

6. Pour 'Root Directory', j'ai spécifié 'server' car toutes mes informations backend se trouvent dans ce dossier.

7. Laissez Runtime à Node car c'est ce que nous avons utilisé pour notre backend.

8. Commande Build, vous pouvez la laisser comme "fil".

9. La commande Start, vous pouvez mettre 'npm start'.

10. Ensuite, assurez-vous de choisir free pour le type d'instance .

11. Ensuite, cliquez sur le bouton 'avancé' :

Après avoir cliqué sur le bouton, vous obtiendrez plus de choix en bas de la page.

12. Cliquez sur 'Ajouter une variable d'environnement' :

Ajoutez une variable d'environnement appelée 'MY_MONGO_URL' et collez votre URL de connexion MongoDB à la valeur.

Cette étape indique à Render comment se connecter à votre base de données MongoDB.

13. Cliquez ensuite sur 'Créer un service Web'.

Ensuite, un journal de la console devrait vous indiquer qu'il commence à cloner à partir de votre fichier GitHub.

Après quelques exécutions, le journal doit indiquer qu'il est "connecté à la base de données && en écoute sur le port ###".

Tester si Backend fonctionne :

La façon de tester si vous savez si votre backend est déployé est de cliquer sur le lien hypertexte fourni en haut à droite. Il affichera une erreur semblable à celle-ci :

Si vous accédez au lien hypertexte à la fin, ajoutez 'api/(the end point for your route)' à la chaîne de requête, vous devriez alors voir les informations de votre base de données au format JSON.

Et voilà, notre backend a été déployé. Maintenant pour tout finir, déployons notre frontend.

L'extrémité avant:

Pour l'interface :

1. Cliquez sur « Nouveau » et sélectionnez « Site statique » dans la liste déroulante.

4. Identifiez-lui un nom unique

5. Laissez la branche comme 'principale'.

6. Pour 'Root Directory', tapez 'client'.

7. Commande de construction - construction de fil

8. Pour 'Publish directory', tapez 'build'.

9. Cliquez sur "Créer un site statique" et une nouvelle page devrait apparaître avec le journal de la console. Sur le côté gauche, recherchez « Redirections/Réécritures ».

10. Ensuite, créez deux règles.

La première règle qui va en haut est de réécrire le '/api/*' dans votre code vers votre nouveau backend déployé.

La deuxième règle est de réécrire '/*' dans le fichier 'index.html'.

Ensuite, il devrait essayer de se déployer à nouveau et le message devrait indiquer "téléchargement de la version…" et "votre site est en ligne".

S'il vous plaît laissez-moi savoir si vous avez des questions ou des difficultés. De quelles autres manières pouvez-vous déployer l'application MERN complète ?

N'hésitez pas à me contacter sur LinkedIn :https://www.linkedin.com/in/mai-vang-software-engineer/