Generating Static Frontend Files

Let's say we want to deploy our Angular website on a Linux server. We have a frontend Angular application and a backend Express/Node.js REST API.

1. Our Angular project is in a folder named myangularweb.
2. First, we generate our frontend files using: ng build.
3. This command will generate a bunch of .js files and an index.html file inside the dist/ folder within our Angular project folder.
4. Create a folder in /var/www for our website. For example, /var/www/myangularweb.com.
5. Copy the contents of the dist folder into the /var/www/myangularweb.com folder.

Configuring httpd/Apache to Host the Files

1. The httpd configuration files are located in /etc/httpd/conf/.
2. We have two options:

• Edit the /etc/httpd/conf/httpd.conf directly.

• Create a new config file in /etc/httpd/conf.d/ and include that file from httpd.conf.

• using the first option we edit the file /etc/httpd/conf/httpd.conf with the following.

    <Directory "/var/www/myangularweb.com">
    AllowOverride None
    FallbackResource ./index.html
    Options Indexes FollowSymLinks
    Require all granted
    </Directory>

• we add a DocumentRoot to point to /var/www/myangularweb.com.
• these few lines, tells httpd to use our project folder contain index.html as root of our server.
• then restart httpd or apache service

nurbxfit@jun:~ systemctl restart httpd.service

Enabling Reverse Proxy in httpd

• When we make a request to our server, let's say the domain is myangularweb.com.
• The httpd server will send the index.html file we copied into /var/www/myangularweb.com earlier, to the web browser.
• The browser will render our Angular frontend and send a request to the backend API running on the same domain.
• Let's say on our development machine, our Angular frontend makes a fetch request to http://localhost:4545/users/ to get the list of users and then render it in the browser.
• When we serve it on a server, we no longer use localhost as our host; instead, we use the domain name or the IP address to connect to the API.
• We can run our Node.js server on port 4545 and make a request to it using http://myangularweb.com:4545/users/.
• Doing so will require us to open port 4545 for external access.
• Instead, we use httpd/Apache/nginx as a proxy on port 80.
• httpd will redirect requests for the API from our frontend to the backend API running on http://localhost:4545/.

Required Modules to Enable httpd Reverse Proxy

• we need these modules to enable httpd reverse proxy.
  • proxy_module
  • lbmethod_byrequests_module
  • proxy_balancer_module
  • proxy_http_module
• we can check if our modules are loaded by opening /etc/httpd/conf.modules.d/00-proxy.conf
• if the name of our modules is commented, uncomment it to use it.
• then inside of /etc/httpd/conf.d/.
  • create new config file name: default-site.conf
  • inside the newly create file, paste this config.

<VirtualHost *:80>
ProxyPreserveHost On

ProxyPass /api/ http://0.0.0.0:4545/
ProxyPassReverse /api/ http://0.0.0.0:4545/
</VirtualHost>

• if our website is listening on different IP or different server in internal network, replace the http://0.0.0.0:4545/ with your website ip.
• the /api/ tells the ProxyPass to redirect request with /api/ to our api server.
• so let say our server domain is http://myangularweb.com
• by sending request to http://myangularweb.com/api all the request will be redirect to our internal backend api.

side note:

• if our server is RHEL base server running SELinux.
• we need to use setsebool to set this.

 setsebool -P httpd_can_network_connect on

• otherwise we will get 503 error message from the httpd, when visiting /api