DEV Community

Sarthak
Sarthak

Posted on

Deploying My WebApp on Cloud using Nginx

Introduction

During my first internship, I was asked to deploy my project to the cloud. What seemed like a straightforward task quickly turned into a maze — I had to go through 10 different resources, and each one only answered some part of the puzzle.

In this post, I’ll walk you through the complete deployment process I followed — including the problems I faced and how I solved them — so you don’t have to go through the same hassle.

Where I Started

After lots of debugging and testing, both my backend and frontend were working perfectly on my local machine. The next step was deployment — and that’s where things got interesting.

1)Dockerisation:

I was asked to follow best practices for deployment, so instead of cloning the entire app directly onto the server, I decided to dockerize it.

Create a Dockerfile:
Your Dockerfile will depend on your codebase. Since I was working with Node.js, here’s a basic structure for a Node.js Dockerfile:

# 1. Base image
FROM node:18

# 2. Set working directory
WORKDIR /app

# 3. Copy package files and install dependencies
COPY package*.json ./
RUN npm install

# 4. Copy the rest of the app
COPY . .

# 5. Expose a port
EXPOSE 3000

# 6. Start the app
CMD ["npm", "start"]

Enter fullscreen mode Exit fullscreen mode

One interesting thing I learned was copying package.json before running npm install, and copying the rest of the code later. This allows Docker to cache the dependencies layer, speeding up builds — a best practice in Dockerfile design.

Now I needed to build this docker .Assuming you have docker already installed in your local machines , here's a basic command to build and run an image .

Build the image (name it whatever you want)

docker build -t my-app .

Run the app

docker run -p 3000:3000 my-app

If your container is running fine, you can push the image to Docker Hub and then pull it on your server. (Think of Docker–Docker Hub like Git–GitHub.)

Once your image is on your server...
🎉 CONGRATS! You’ve completed Phase 1.

Some problems you may face while dockerisation

  • Frontend builds can be tricky — different libraries and versions may cause conflicts or build errors.

  • Environment variables need to be handled carefully. You can pass them using flags like:
    docker run --env-file .env my-app

2)Reverse Proxy:

Once your image is running on lets assume port 3000 of your server system (lets assume ubuntu),You can try to access the server with its public ip , but wait wait wait.......We can only access the port on which the app is running, in our case its 3000.
Here's where reverse proxy comes to play,forwarding requests to the required port.

I used Nginx (pronounced as engineX)for that,but capabilities of nginx does'nt stop here,its also a
🖥️ Web server
🔁 Reverse proxy (passes requests to another server)
⚖️ Load balancer (shares traffic across multiple servers)
🔐 SSL handler (helps secure your website)
📦 Cache (speeds things up by storing responses)
It’s lightweight, fast, and used by companies like Netflix, Dropbox, and WordPress. Pretty cool for something I hadn’t heard of before this task!

3)Setting Up Nginx

Let’s set up Nginx for reverse proxy only for now — I’ll cover Load Balancing and SSH handling in future blogs.

  • Install Nginx
    sudo apt install nginx

  • Start and Enable Nginx
    sudo systemctl start nginx
    sudo systemctl enable nginx

  • Check its status by
    sudo systemctl status nginx

Image description

If the output is something like this 🎉 CONGRATS your nginx is up and running.

4)Setting up Reverse Proxy

Just a little more and it will be done...
-lets open the Nginx default config file
sudo nano /etc/nginx/sites-available/default

-Replace or edit the server block similar to this
`server {
listen 80;
server_name

location / {
    proxy_pass http://localhost:3000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
}
Enter fullscreen mode Exit fullscreen mode

}
`
Note that we have not setup the SSL certificate yet and only HTTP requests are working...and HTTP requests are received at port 80 so thats why we have mentioned listen 80 there.

Press ctrl+O then Enter then ctrl+X

-Test the config to check for any errors
sudo nginx -t

Image description
If your output is like this....Good going

-Last Step
Restart the nginx server
sudo systemctl reload nginx

Now test it out on a browser
http://<your-public-ip>/

🌍✨ Enjoy your app from any device, anywhere in the world! 📱💻🖥️🚀

NOTE:

We've only served your app using the server's public IP for now.
In upcoming blogs, I’ll show you how to:

Add a custom domain 🌐

Enable HTTPS requests with SSL 🔐

Set up load balancing ⚖️

And much more...

Till then — all the best, mates! 🚀👨‍💻🌟

Top comments (0)