Deploying Frontend Server Using Apache Webserver

Two ways to host and deploy frontend servers

There are two types of frontend applications or frontend web apps.
First, the static frontend web applications were generated by react.js or other frontend frameworks like next.js.Just build the static contents.
Second, the same react app can be run using a react server or node.js server if the contents are built using the integration of APIs and it is a dynamic web application, in which variable and data of the contents of the web applications were continuously changing.

In the previous lesson, we learned how to deploy and make live a static website, similar to that whenever react or next.js run, compiles and build the web app, it creates a public directory where the index.html, JS, and CSS files reside which are used to serve the static web app.

In this lesson we will cover and focus on how to deploy and make live, a node.js, react.js, or next.js server which build and used to connect to databases or APIs.

Basic setup and dependency to run node/react/next servers

Let's name Node.js/React.js/Next.js servers as Applications Servers and Apache Webserver as Apache Server.

When installed and configured application server on cloud or on local, it will run on a specific port, and since apache2 server also runs on HTTP protocol, it uses some port, since only one process can listen on any given port, both cannot run on same port directly. The solution to run the application server and apache server is using a reverse proxy method.

What is a Reverse Proxy? What is the Proxy Server?

A reverse proxy is a bridge or it sits in between the server and forwards clients' requests to the main web server or application webservers. It provides security and level of abstraction and controls the efficient flow of the network traffic between clients and servers.

The apache server will act as a reverse proxy server and forwards the requests to the application server for any requests a client makes.

let's first install the apache2 server

sudo apt install apache2

Check and list if the proxy modules are available, the modules we will use are:

1. mod_proxy
2. mod_proxy_http

The mod_proxy modules are default modules and its's official documentation can be found here: https://httpd.apache.org/docs/2.4/mod/mod_proxy.html

List Available modules:

$ ls /etc/apache2/mods-available/

List Proxy Modules

sudo en2mod proxy
sudo a2enmod proxy_http

Restart the apache server

sudo service apache2 restart

Cross-check if the modules is enabled or not
List Enabled modules:

$ ls /etc/apache2/mods-enabled/

The Apache web server will be operating as a reverse proxy. Requests to it will be proxied to the application server.'

Configuring virtualhost to set proxy and reverse proxy

First, set up the application server, and run it locally on the server.

$ cd /home/application/project
$ npm run build
$ npm run dev

Then, Open the VirtualHost Configuration file and configure the application setup:

# Default Configuration File
sudo vi /etc/apache2/sites-available/000-default.conf

# Custom Website configuration
sudo vi /etc/apache2/sites-available/my-domain.conf

Edit and add the Proxy Pass and Reverse proxy server address

<VirtualHost *:80>
    ServerName mysite.com
    ServerAlias www.mysite.com

    ProxyRequests Off
    ProxyPreserveHost On
    ProxyVia Full

    <Proxy *>
        Require all granted
    </Proxy>

    ProxyPass / http://127.0.0.1:3000/
    ProxyPassReverse / http://127.0.0.1:3000/
</VirtualHost>

To the configuration for any error in syntax or enabling module, execute the following command:

sudo apachectl configtest

Run the application server in the background and restart the apache web server

Finally, run the application server in the background using & or nohup Or Pm2 library

& is used to run background process just like nohup which means "no hung up process"
We will also learn about PM2 in upcoming lessons.

$ npm run build
$ npm run dev&

Reload and restart the apache web server

# Reload
sudo systemctl reload apache2

# Restart
sudo systemctl restart apache2

Checking and dry running the configuration

To check the application server is running or not

1. Check the apache webserver status

2. Check the application server status

3. Curl localhost:80

4. If in cloud get the public IP and open the web application using the IP or domain set in configuration file.

Before deploying frontend servers plan how the functions and working of the website and web applications will work, if the website is static in react or vue.js, it just needs to be built and deliver the static contents and if the website has APIs and database integrated then the proxy servers and background processes, caching, Header settings all are required to set.