MEVN App Full Deployment Walkthrough! - [MongoDB, Express, Vue, Node.js]
Вставка
- Опубліковано 1 чер 2024
- The process of deploying a web application can be complicated! In this video, I walk through the entire process of deploying a MEVN (MongoDB, Express, Vue, Node.js) application onto a VPS (Virtual Private Server) and connecting it to a custom domain.
The application can be seen @ mooncoins.net/
I used Caddy (caddyserver.com/) to serve the frontend, and PM2 (www.npmjs.com/package/pm2) to manage the backend deployment. I also installed MongoDB from scratch and configured access control to protect the data.
---
Here is a link to the full video on the DesignCourse Channel: • Full Stack Development...
---
Join the Community:
💬 Discord: / discord
💻 GitHub: github.com/sidpalas/devops-di...
🐥 Twitter: / sidpalas
👨💼 LinkedIn: / sid-palas
🌐 Website: devopsdirective.com
---
Timestamps:
00:00 - Intro
00:59 - Process breakdown
01:39 - Clone the repo
02:02 - Replace hardcoded strings with ENV variables
05:20 - Creating DNS Record
06:04 - Add public SSH key to VPS
07:05 - Instal MongoDB
09:15 - Add access control to MongoDB
12:30 - Copy (rsync) application source to VPS
14:31 - Instal Yarn
15:23 - Yarn install dependencies
15:43 - Build frontend (with yarn build)
16:22 - Install Caddy 2
17:51 - Copy frontend files to /var/www/html
18:16 - Configure UFW firewall
19:07 - Modify Caddyfile configuration
21:04 - Test the frontend deployment
21:32 - Install PM2
22:38 - Create non-root node user
23:55 - Configure PM2 and launch backend API
25:52 - Testing the full app!
26:27 - Outro
---
Community size at time of posting:
- Subscribers: 9332
- Channel Views: 218977 - Наука та технологія
![[柴犬ASMR]曼玉Manyu&小白Bai 毛发护理Spa asmr](http://i.ytimg.com/vi/0TsXQ7z2Dh4/mqdefault.jpg)
![Full Stack Vue.js, Express & MongoDB [3] - Prepare & Deploy](/img/n.gif)
Whoops, the password is shown @ 24:45 😱
This is the password for the user which has read/write permissions to the cryptos database. Comment here if you are able to hack the app using this information! (Would make a fun follow up video idea! 😁)
Edit: Looks like my collaborator may have decommissioned the VPS it was running on 🖥...
Thank you for this video, it was really helpful.
The new setup is looking clean!! 👀 🔥
And this is with me having no idea how to actually use the camera! 😂
That was a real big help thanks a looott, your content is very clear, well made... it's suits perfectly for me !!
Great to hear, Théo!
just perfect
Thank you so much
You are welcome @Tejas!
Is it possible to update your server without downtime? Would really like to see that
Thanks for the awesome Video! I'm struggling get my Vue App running on a local network. No extra security needed. Is this possible with this method or is there an easier way to achieve this?
It's always tough to debug in UA-cam comments... If you want to join the channel discord (discord.devopsdirective.com) me or someone in the community might be able to help!
I like ur work. Can you make a video about authentication system with MEVN and JWT. There's not video like this
Please make same stack inside docker replacing vue with Nextjs with Server side rendering. I am struggling on building nextjs and using caddy server with it.
Hi Bibek -- I haven't tried out Nextjs yet, it looks interesting! The fact that you can mix server-side rending with client-side rendering and static pages is cool!
@@DevOpsDirective Please try it out. I am not able to deploy my blog site because of less information on using Caddy and nextjs together. If you want a mockup server side rendered project, I can make it for you.
But how do you scale this horizontally
You can run multiple instances of the api server with PM2 and have it load balance across them (pm2.keymetrics.io/docs/usage/cluster-mode/)
You would also likely want to move the DB to a separate server if you really wanted to scale!
@@DevOpsDirective thank you 😊
Are you the brother of Simon Kjær ?
More like deploying the FUN way! `vercel .` is too boring. I got to bookmark this video. There is a ton great info for rolling your own hosting, including security in this tutorial.
I'm more of a `docker compose up` (or even better `helm upgrade --install`) kind of guy! 😉
What a censor!