Di recente ho imparato a implementare il mio progetto MERN Full-stack e non vedo l'ora di aiutarti a implementare anche il tuo.

Quando si distribuisce il progetto MERN full-stack, il back-end e il front-end devono essere distribuiti separatamente. Vediamo prima come distribuire il back-end:

Ecco la configurazione del repository che sto distribuendo su Render:

Ho una cartella client per il frontend e una cartella server per il backend.

Prima di tutto: iscriviti a Render per un account gratuito. Ti consiglio di registrarti tramite il tuo account GitHub in modo che possa accedere alle tue cartelle più velocemente.

Backend:

Per il back-end:

1. Fare clic su Nuovo e selezionare Servizio Web

3. Identifica un nome univoco per il tuo servizio web.

4. Possiamo lasciare solo 'Regione'

5. Lascia 'Branch' come 'main'.

6. Per "Root Directory", ho specificato "server" poiché tutte le mie informazioni di back-end si trovano in questa cartella.

7. Lascia Runtime su Node poiché è quello che abbiamo usato per il nostro backend.

8. Build comando, puoi lasciarlo come 'yarn'.

9. Il comando Start, puoi inserire 'npm start'.

10. Quindi, assicurati di scegliere free per Instance Type .

11. Successivamente, fai clic sul pulsante "avanzate":

Dopo aver fatto clic sul pulsante, otterrai più scelte popolate nella parte inferiore della pagina.

12. Fare clic su "Aggiungi variabile d'ambiente":

Aggiungi una variabile di ambiente chiamata "MY_MONGO_URL" e incolla l'URL della tua connessione MongoDB nel valore.

Questo passaggio indica a Render come connettersi al database MongoDB.

13. Quindi fare clic su "Crea servizio Web".

Quindi dovrebbe essere popolato un registro della console che ti dice che sta iniziando a clonare dal tuo file GitHub.

Dopo un paio di esecuzioni, il registro dovrebbe indicare che è "connesso a db && in ascolto sulla porta ###".

Testare se il backend funziona:

Il modo per verificare se sai se il tuo back-end è distribuito è fare clic sul collegamento ipertestuale fornito in alto a destra. Mostrerà un errore simile a questo:

Se vai al collegamento ipertestuale alla fine, aggiungi "api/(il punto finale per il tuo percorso)" alla stringa di query, quindi dovresti vedere le informazioni del tuo database in un formato JSON.

Et voilà, il nostro backend è stato implementato. Ora per finire tutto, distribuiamo il nostro frontend.

Fine frontale:

Per il front-end:

1. Fare clic su "Nuovo" e selezionare "Sito statico" dal menu a discesa.

4. Identificare un nome univoco per esso

5. Lascia Branch come 'principale'.

6. Per 'Root Directory', digitare 'client'.

7. Comando Build: costruzione del filato

8. Per 'Pubblica directory', digitare 'build'.

9. Fare clic su "Crea sito statico" e dovrebbe apparire una nuova pagina con il registro della console. Sul lato sinistro, cerca "Reindirizzamenti/Riscritture".

10. Successivamente, crea due regole.

La prima regola che va in cima è riscrivere "/api/*" nel tuo codice nel tuo nuovo back-end distribuito.

La seconda regola è riscrivere '/*' nel file 'index.html'.

Successivamente, dovrebbe provare a eseguire nuovamente la distribuzione e il messaggio dovrebbe indicare "upload build ..." e "your site is live".

Per favore fatemi sapere se avete domande o difficoltà. In quali altri modi puoi distribuire l'app MERN full-stack?

Non esitate a contattarmi su LinkedIn:https://www.linkedin.com/in/mai-vang-software-engineer/