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:
- mod_proxy
- 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
Check the apache webserver status
Check the application server status
Curl localhost:80
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.
Top comments (0)