Skip to content
DevNursery.com - New Web Developer Docs
GitHub

Deployment

Deployment Concepts for Web Applications

When deploying a web application, several essential concepts must be understood to ensure a smooth and secure deployment process. This section will introduce you to the fundamental concepts involved in deploying a web application.

1. Virtual Machine (VM) Instance and Static IP

A critical aspect of deploying a web application is selecting and configuring the infrastructure on which it will run. Typically, web applications are hosted on virtual machines (VMs) provided by cloud service providers like Amazon Web Services (AWS), Google Cloud Platform (GCP), or Microsoft Azure. Here’s why:

  • Isolation: VMs provide a level of isolation for your application, ensuring that it operates independently of other applications and environments.

  • Scalability: VMs can be easily scaled up or down based on your application’s traffic demands, making them suitable for handling varying workloads.

  • Static IP: Assigning a static IP address to your VM is crucial because it provides a stable and permanent address for users to access your web application. This is essential for maintaining consistent access to your application, even if the VM is restarted or replaced.

2. Setting up a Firewall

Security is paramount when deploying web applications. Setting up a firewall is a fundamental step to protect your VM and application from unauthorized access and potential threats. Firewalls are used to:

  • Control Incoming and Outgoing Traffic: Firewalls allow you to define rules for allowing or denying incoming and outgoing network traffic. This helps in restricting access to specific ports and services, enhancing security.

  • Protect Against Attacks: Firewalls can help protect your web application from various types of attacks, including Distributed Denial of Service (DDoS) attacks and unauthorized access attempts.

  • Traffic Filtering: Firewalls can filter traffic based on source IP addresses, ports, or protocols, providing an additional layer of control and security.

3. Configuring Ports 80 and 443

Web applications typically communicate over specific ports on the internet. Ports 80 and 443 are commonly used for web traffic, and they serve different purposes:

  • Port 80 (HTTP): Port 80 is used for unencrypted HTTP traffic. It’s essential for serving standard web content to users. However, it lacks encryption, making it less secure for transmitting sensitive data.

  • Port 443 (HTTPS): Port 443 is used for secure HTTP traffic, encrypted using SSL/TLS protocols. It’s the recommended choice for handling sensitive information, such as login credentials and payment details. Configuring your application to use HTTPS (port 443) is crucial for data security.

4. Using NGINX or Apache as Web Servers

NGINX and Apache are popular web server software options used to serve web applications. They serve several purposes in the deployment process:

  • HTTP Request Handling: NGINX and Apache are responsible for receiving incoming HTTP requests from clients (browsers) and routing them to the appropriate components of your web application.

  • Load Balancing: These web servers can distribute incoming traffic across multiple VM instances if you need to scale horizontally for increased performance and availability.

  • SSL/TLS Termination: NGINX and Apache can handle SSL/TLS termination, decrypting incoming secure traffic (HTTPS) and forwarding it to your application servers as unencrypted HTTP traffic, or re-encrypting it for internal communication.

In summary, deploying a web application involves setting up infrastructure with VM instances and static IPs, securing your environment with firewalls, configuring ports 80 and 443 for HTTP and HTTPS traffic, and utilizing web server software like NGINX or Apache to manage incoming requests and ensure optimal performance.

Deployment Steps with Apache

1. Establishing an SSH Connection to Your Cloud VM

Assuming you have the SSH credentials for your cloud VM, you can establish a secure connection to it using a terminal. Here are the steps:

  1. Open your terminal application.

  2. Use the ssh command with your VM’s IP address or hostname, and provide your SSH key if required:

   ssh username@your-vm-ip

Replace username with your VM’s username and your-vm-ip with your VM’s IP address.

You’ll be prompted to enter your SSH key passphrase or password. Once authenticated, you’ll have access to your VM’s command line interface.

2. Setting Up the Firewall

To enhance security, it’s essential to configure the firewall to allow external traffic only on ports 80 (HTTP) and 443 (HTTPS). Here’s how:

Ensure you have administrative privileges on your VM.

Install a firewall management tool if it’s not already installed. For example, on Ubuntu, you can use ufw (Uncomplicated Firewall):

sudo apt-get update
sudo apt-get install ufw

Allow incoming traffic on ports 80 and 443:

sudo ufw allow 80/tcp
sudo ufw allow 443/tcp

Enable the firewall:

sudo ufw enable

Verify that only the necessary ports are allowed:

sudo ufw status

You should see that only ports 80 and 443 are open.

3. Installing and Setting Up Apache

Apache is a popular web server that can serve your web application. To install and set it up:

Update the package repository:

sudo apt-get update

Install Apache:

sudo apt-get install apache2

Start the Apache service:

sudo systemctl start apache2

Enable Apache to start on boot:

sudo systemctl enable apache2

4. Clone Your Node.js Application from GitHub

Assuming you have a Node.js application hosted on GitHub, you can clone it onto your VM:

Navigate to the directory where you want to store your application:

cd /path/to/your/app

Clone your GitHub repository:

git clone https://github.com/your-username/your-app.git

Install any application dependencies using npm or yarn.

5. Running Your Node.js Application on a Different Port

By default, Node.js applications often run on port 3000. To run your application on a different port, you can specify it when starting your application:

node app.js --port 8080

6. Redirecting Traffic Using Apache

Now that Apache is installed, you can configure it to redirect incoming HTTP traffic to your Node.js application running on a different port. Create an Apache Virtual Host configuration file for your application:

Create a new Apache configuration file:

sudo nano /etc/apache2/sites-available/your-app.conf

Add the following configuration, updating your-domain.com and ProxyPass accordingly:

<VirtualHost *:80>
    ServerName your-domain.com

    ProxyPass / http://localhost:8080/
    ProxyPassReverse / http://localhost:8080/
</VirtualHost>

Enable the site and reload Apache to apply the changes:

sudo a2ensite your-app.conf
sudo systemctl reload apache2

7. Setting Up SSL and Updating Apache

For secure HTTPS traffic, you’ll need to set up SSL (Secure Sockets Layer) and update your Apache configuration:

Install the Certbot tool to obtain and configure SSL certificates:

sudo apt-get install certbot python3-certbot-apache

Obtain an SSL certificate for your domain:

sudo certbot --apache

Follow the prompts to configure SSL for your domain.

Update your Apache Virtual Host configuration to include SSL:

sudo nano /etc/apache2/sites-available/your-app.conf

Add the following lines:

<VirtualHost *:443>
    ServerName your-domain.com

    SSLEngine on
    SSLCertificateFile /etc/letsencrypt/live/your-domain.com/fullchain.pem
    SSLCertificateKeyFile /etc/letsencrypt/live/your-domain.com/privkey.pem

    ProxyPass / http://localhost:8080/
    ProxyPassReverse / http://localhost:8080/
</VirtualHost>

Reload Apache to apply the changes:

sudo systemctl reload apache2

Now, your web application is accessible over HTTPS, and Apache is properly configured to handle both HTTP and HTTPS traffic.

Deployment Steps with NGINX

1. Establishing an SSH Connection to Your Cloud VM

Assuming you have the SSH credentials for your cloud VM, you can establish a secure connection to it using a terminal. Follow these steps, as mentioned earlier in the Apache guide.

2. Setting Up the Firewall

Enhancing security is crucial, and configuring the firewall to allow external traffic only on ports 80 (HTTP) and 443 (HTTPS) is essential. The steps are similar to those mentioned in the Apache guide.

3. Installing and Setting Up NGINX

NGINX is a high-performance web server and reverse proxy that can serve your web application. Here’s how to install and set it up:

Update the package repository:

sudo apt-get update

Install NGINX:

sudo apt-get install nginx

Start the NGINX service:

sudo systemctl start nginx

Enable NGINX to start on boot:

sudo systemctl enable nginx

4. Clone Your Node.js Application from GitHub

As before, assuming you have a Node.js application hosted on GitHub, you can clone it onto your VM following the same steps.

5. Running Your Node.js Application on a Different Port

Just as with Apache, you can run your Node.js application on a different port:

node app.js --port 8080

6. Configuring NGINX to Proxy Requests to Your Node.js Application

NGINX can be configured to act as a reverse proxy for your Node.js application. Create an NGINX configuration file for your application:

Create a new NGINX configuration file:

sudo nano /etc/nginx/sites-available/your-app

Add the following configuration, updating your-domain.com and proxy_pass accordingly:

server {
    listen 80;
    server_name your-domain.com;

    location / {
        proxy_pass http://localhost:8080;
        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;
    }
}

Create a symbolic link to enable the site configuration:

sudo ln -s /etc/nginx/sites-available/your-app /etc/nginx/sites-enabled/

Test the NGINX configuration for syntax errors:

sudo nginx -t

If there are no errors, reload NGINX to apply the changes:

sudo systemctl reload nginx

7. Setting Up SSL and Updating NGINX

To secure your web application with SSL, you can use Let’s Encrypt with NGINX:

Install Certbot for NGINX:

sudo apt-get install certbot python3-certbot-nginx

Obtain an SSL certificate for your domain and configure NGINX:

sudo certbot --nginx

Follow the prompts to set up SSL for your domain.

Test the NGINX configuration again:

sudo nginx -t

If there are no errors, reload NGINX to apply the SSL configuration:

sudo systemctl reload nginx

Now, your web application is accessible over HTTPS through NGINX, and you have set up SSL for secure communication.

These steps should help you deploy your web application using NGINX as the web server, with SSL encryption and proper firewall rules. Adapt the instructions to your specific setup and requirements.

Deploying Applications with Platform-as-a-Service (PaaS) and Static Site Generators

Backend Deployment with PaaS: Heroku, Render, and Koyeb

Platform-as-a-Service (PaaS) providers offer a simplified way to deploy backend applications without the need to manage server infrastructure. Here are some popular PaaS options and how they work:

Heroku

Heroku is a cloud platform that allows developers to deploy, manage, and scale web applications easily. Here’s how it works:

  1. Application Setup: Developers push their code to a Heroku repository using Git. Heroku automatically detects the application’s language and sets up the necessary build process.

  2. Dynos: Heroku uses dynos, lightweight containers, to run applications. Developers can scale horizontally by adding more dynos to handle increased traffic.

  3. Add-ons: Heroku provides a marketplace of add-ons for databases, caching, monitoring, and more, making it easy to extend application functionality.

Render

Render is a modern cloud provider that simplifies the deployment of web applications and backend services. Here’s how it works:

  1. Zero Configuration: Render abstracts away server management, so developers can deploy their applications with minimal configuration. It supports various programming languages and frameworks.

  2. Continuous Deployment: Render integrates with Git repositories, automatically deploying changes when new code is pushed. Developers can define build and deployment settings in a render.yaml file.

  3. Scalability: Render offers automatic scaling, ensuring applications can handle varying levels of traffic. It also provides state-of-the-art databases and caching services.

Koyeb

Koyeb is a serverless platform for deploying and orchestrating containers. It simplifies container deployment and scaling. Here’s how it works:

  1. Containerization: Developers package their applications in containers using Docker. Koyeb supports various container registries, including Docker Hub and GitHub Container Registry.

  2. Serverless Functions: Koyeb allows developers to create serverless functions and deploy them easily. Functions can be triggered by HTTP requests, timers, and more.

  3. Auto Scaling: Koyeb automatically scales containers and functions in response to traffic. Developers define scaling policies and resource limits.

Frontend Deployment with Netlify and Vercel

Netlify and Vercel are popular platforms for deploying frontend applications and static websites. They offer a seamless deployment process and a range of features to enhance frontend development:

Netlify

Netlify specializes in hosting static websites and frontend applications. Here’s how it works:

  1. Continuous Deployment: Netlify integrates with Git repositories, allowing for continuous deployment of changes. Developers can specify build and deploy settings using a netlify.toml file.

  2. Serverless Functions: Netlify offers serverless functions, which can be used to add dynamic functionality to static websites. These functions are deployed and managed alongside the frontend.

  3. Global CDN: Netlify uses a global content delivery network (CDN) to ensure fast and reliable content delivery to users worldwide.

Vercel

Vercel is a platform optimized for frontend development and deployment. Here’s how it works:

  1. Git Integration: Vercel offers Git-based deployments, making it easy to deploy frontend applications directly from Git repositories. It supports various Git platforms, including GitHub, GitLab, and Bitbucket.

  2. Serverless Backend: Vercel provides serverless functions for adding backend functionality to frontend applications. Functions can be written in JavaScript, TypeScript, or Go.

  3. Preview Deployments: Vercel allows developers to create preview deployments for branches and pull requests, facilitating collaboration and testing.

In summary, PaaS providers like Heroku, Render, and Koyeb simplify backend application deployment by abstracting infrastructure management, while platforms like Netlify and Vercel streamline frontend application and static website deployment with features such as continuous integration and serverless functions. These platforms empower developers to focus on writing code and deploying applications quickly and efficiently.