How to manually deploy a Vue.js and FastAPI application
Hi everyone! In this video, I will walk you through the entire process of manually deploying a full-stack web application to a live server.
We will start by preparing our codebase, which includes a Vue.js frontend and a FastAPI backend. You'll learn how to clone the repository locally, compress the files, and securely transfer them to your cloud server using the SCP (Secure Copy) command. From there, we'll set up the project folder and configure the correct file permissions to keep the application secure and separated from personal user files.
Next, we'll set up the necessary runtimes for our application. We'll configure a Python virtual environment for the backend and use NVM (Node Version Manager) to install Node.js and pnpm for the frontend. During the frontend build process, we'll tackle a common issue on smaller cloud servers: out-of-memory errors. I'll show you exactly how to resolve this by allocating and configuring a Linux Swap file.
Finally, you will learn how to securely preview your application on your local browser using SSH tunneling, completely bypassing the need to open firewall ports prematurely.
To wrap things up, we will architect a robust production setup using Gunicorn to manage our Uvicorn workers, and Supervisor to act as a process manager that automatically restarts the app if it crashes. Along the way, we'll also use tools like `btop` to monitor server resources and learn how to identify and manually kill orphan "zombie" processes.
Here is the link to the GitHub repository used in this video:
https://github.com/ImadSaddik/ImadSad...
Here is the link to the Full Stack Deployment Handbook:
https://github.com/ImadSaddik/FullSta...
Don't forget to like, subscribe, and leave a comment if you have any questions or feedback!
⭐️ Contents ⭐️
(00:00) Intro and manual deployment roadmap
(02:08) Cloning and compressing the source code locally
(04:47) Transferring the project to the server using SCP
(05:56) Organizing files and setting directory permissions
(08:20) Setting up the Python backend and virtual environment
(10:08) Running and testing the FastAPI backend with Uvicorn
(11:34) Verifying the firewall status
(14:46) Installing Node.js via NVM and setting up pnpm
(17:33) Building the Vue.js frontend (Out-of-memory error)
(18:48) Fixing the memory error by creating a Swap file
(22:30) Making the Swap file permanent via fstab
(24:05) Successfully rebuilding the frontend
(26:05) Creating a temporary Python HTTP server
(27:25) How SSH Tunneling works (Architecture explanation)
(30:35) Establishing an SSH tunnel to preview the site locally
(32:33) Keeping the app alive: Supervisor and Gunicorn architecture
(36:39) Creating the Gunicorn start script
(41:18) Installing and configuring Supervisor
(46:33) Monitoring server resources using Btop
(49:10) Identifying and killing zombie processes manually
(01:01:00) Conclusion