Enhancing Angular Server-Side Rendering Build Deploys on CyberPanel with Reverse Proxy

In the realm of web development, optimizing server-side rendering (SSR) for Angular applications is crucial for performance. This guide will walk you through the steps to deploy your Angular project on CyberPanel with a reverse proxy, ensuring a seamless user experience.

Logging into CyberPanel

1. Accessing CyberPanel: To commence the process, log in to your CyberPanel using the following URL format: your-ip:8090.

Configuring vHost

1. Navigating to vHost Conf: Once logged in, click on "vHost Conf" to access the virtual host configuration.

2. Document Root Configuration: Set the document root folder path as follows:

The first line of our document root folder path is like this

docRoot $VH_ROOT/public_html/dist/<Your-Project-name>/browser/

3. Script Handler Addition: In the script handler section, include the following code:

scripthandler  {
 add proxy:<Cyber-panel-generated-project-name> html
}

4. Extprocessor Section Configuration: Copy and paste the code below into the extprocessor section:

type proxy
address <Your Node JS server url like (127.0.0.1:4000)>
maxConns 2000
initTimeout 20
retryTimeout 0
respBuffer 0

5. Rewrite Section Setup: Add the following code to the rewrite section:

rewrite  {
  RewriteCond %{HTTP:UPGRADE} ^WebSocket$ [NC]
  RewriteCond %{HTTP:CONNECTION} Upgrade$ [NC]
  RewriteRule /(.*) ws://<your node js server url>/$1 [P]
  enable                  1
  autoLoadHtaccess        1
}

6. Adding a New Object: At the end of the file, add a new object with the following code:

context / {
  type proxy
  handler <Cyber-panel-generated-project-name>
  addDefaultCharset off
}

5. In the extprocessor section copy this code and paste it.

type proxy
address <Your Node JS server url like (127.0.0.1:4000)>
maxConns 2000
initTimeout 20
retryTimeout 0
respBuffer 0

6. Rewrite section add this code.

rewrite  {
RewriteCond %{HTTP:UPGRADE} ^WebSocket$ [NC]
RewriteCond %{HTTP:CONNECTION} Upgrade$ [NC]
RewriteRule /(.*) ws://<your node js server url>/$1 [P]
  enable                  1
  autoLoadHtaccess        1
}

7. add a new object in this file end of the code.

context / {
type proxy
handler <Cyber-panel-generated-project-name>
addDefaultCharset off
}

Note:- Finally our vHost file would be like this code.

docRoot                   $VH_ROOT/public_html/dist/front/browser/
vhDomain                  $VH_NAME
vhAliases                 www.$VH_NAME
enableGzip                1
enableIpGeo               1

index  {
  useServer               0
  indexFiles              index.php, index.html
}

errorlog $VH_ROOT/logs/$VH_NAME.error_log {
  useServer               0
  logLevel                ERROR
  rollingSize             10M
}

scripthandler  {
 add proxy:bolly4617 html
}

extprocessor bolly4617 {
type proxy
address 127.0.0.1:4000
maxConns 2000
initTimeout 20
retryTimeout 0
respBuffer 0
}

rewrite  {
RewriteCond %{HTTP:UPGRADE} ^WebSocket$ [NC]
RewriteCond %{HTTP:CONNECTION} Upgrade$ [NC]
RewriteRule /(.*) ws://127.0.0.1:4000/$1 [P]
  enable                  1
  autoLoadHtaccess        1
}

context / {
type proxy
handler bolly4617
addDefaultCharset off
}
 

Finalizing vHost Configuration

After completing the above steps, your vHost file should resemble the provided code snippet. Ensure the accuracy of the configuration for optimal performance.

Understanding CyberPanel and Reverse Proxy

What is CyberPanel?

CyberPanel is a control panel that simplifies the management of web hosting environments. It offers a user-friendly interface for tasks such as domain management, SSL installation, and server configuration.

What is a Reverse Proxy?

A reverse proxy acts as an intermediary between client requests and server responses. It enhances security, load balances traffic, and accelerates content delivery by forwarding requests to the appropriate server.

Why Use a Reverse Proxy?

1. Enhanced Security: Protects backend servers by shielding their identities from direct exposure.

2. Load Balancing: Distributes incoming traffic across multiple servers to optimize resource utilization.

3. Content Acceleration: Improves website performance by caching static content and reducing server load.

In conclusion, mastering the integration of Angular SSR builds with CyberPanel and a reverse proxy elevates your web application's efficiency and security. Stay ahead in the ever-evolving landscape of web development by implementing these advanced techniques.

Azad Mohammed

An editor at AzadEducation

View Articles

I'am Azad, These blogs, tech skills and programing news, I am sharing with my exprience. I have 4+ year experiece in the web development. Also we are learning investing ideas. I believe in "big mind big dream", that will convert in smart mind. You can follow me on Linkedin profile.