Deploy Angular Application on Rocky Linux with NGINX

Introduction

This tutorial provides a comprehensive guide on deploying an Angular application on a Rocky Linux server using NGINX as a web server. Rocky Linux, a community enterprise operating system, is known for its stability and enterprise-level reliability, making it an excellent choice for hosting web applications. NGINX, renowned for its high performance and low resource consumption, serves as the perfect web server to deliver your Angular application efficiently.

Objective

By the end of this tutorial, you will learn how to set up your Rocky Linux environment, install the necessary software (Node.js, NPM, Angular CLI), create and build an Angular application, install and configure NGINX to serve your app, and manage firewall settings for secure and optimal web access.

Target Audience

This guide is intended for developers, system administrators, or anyone interested in deploying Angular applications. It assumes basic knowledge of Angular, Linux command line, and networking concepts.

Prerequisites

Before you begin, ensure you have:

• Access to a Rocky Linux server (with sudo privileges).
• Basic familiarity with terminal commands and text editors (like nano or vi).
• An understanding of Angular and its build process.

Importance of Deployment

Deploying your Angular application on a Rocky Linux server with NGINX offers several benefits:

1. Stability and Security: Rocky Linux provides an environment that is stable and secure, ideal for running production applications.
2. Performance: NGINX is known for its high performance and efficient handling of static files, which is crucial for Angular apps.
3. Control: Hosting your application on your own server gives you full control over the environment and configuration.

By following this guide, you’ll gain the skills and knowledge needed to successfully deploy and manage your Angular applications in a Linux server environment.

Let’s get started!

1. Prepare Your Rocky Linux Environment

a. Update Rocky Linux

Update all packages:

sudo dnf update

b. Install Node.js and NPM

Install Node.js and NPM, required for building Angular applications:

sudo dnf install nodejs npm

2. Install Angular CLI

Install Angular CLI globally:

sudo npm install -g @angular/cli

3. Create Your Angular Application

Create and navigate to your Angular application:

ng new my-angular-app
cd my-angular-app

4. Build Your Angular Application

Build your app for production:

ng build --configuration production

This creates a dist/ folder with your app.

5. Install NGINX

Install and start NGINX:

sudo dnf install nginx
sudo systemctl start nginx
sudo systemctl enable nginx

6. Configure NGINX to Serve Your Angular Application

Edit the NGINX configuration file:

cd /etc/nginx
sudo nano nginx.conf

(or use sudo vi nginx.conf)

Configure the server block (adjust the root path accordingly):

server {
    listen       80;
    server_name  example.com;

    location / {
        root   /path/to/your/dist/my-angular-app;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
}

7. Configure the Firewall

Open HTTP (port 80) on the firewall:

sudo firewall-cmd --permanent --zone=public --add-service=http
sudo firewall-cmd --reload

8. Restart NGINX

Restart NGINX to apply the new configuration:

sudo systemctl restart nginx

9. Access Your Angular Application

Your Angular application should now be accessible via your server’s IP address or domain name.

Example NGINX Configuration

For an app named “my-angular-app”:

server {
    listen       80;
    server_name  myapp.example.com;

    location / {
        root   /var/www/my-angular-app/dist/my-angular-app;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
}

Note: This guide provides the basic steps. For production environments, consider additional security measures and configurations.

Conclusion

Deploying an Angular application is just the beginning. The real journey involves continuous learning and improvement, adapting to new challenges, and leveraging the strengths of your tools and environment. Keep exploring, keep learning, and keep building amazing applications on robust platforms like Rocky Linux and NGINX.

Further Reading

For more information and resources about Angular and deploying it on Rocky Linux with NGINX, you can refer to the following links:

1. Angular Official Documentation: Extensive documentation on Angular’s features, best practices, and more.
2. Rocky Linux Documentation: Dive deeper into managing and configuring Rocky Linux.
3. NGINX Beginner’s Guide: Learn more about NGINX configuration and management.

Troubleshooting

If you encounter any issues while following this tutorial, here are some common problems and their solutions:

1. NGINX Not Serving Angular App: Ensure the root directive in NGINX configuration correctly points to the dist/ directory of your Angular app.
2. Firewall Blocking Access: Check if the firewall rules are correctly configured to allow traffic on port 80 (HTTP).
3. Build Issues with Angular: Make sure all dependencies are correctly installed and your Angular CLI version is compatible with your project.

Feedback and Questions

We value your feedback on this tutorial! If you have any questions or suggestions for improvement, please feel free to reach out:

1. Email: shady@shadynagy.com
2. Twitter: @ShadyNagy_
3. LinkedIn: Shady Nagy

We’re here to help with any queries or issues you might have and are eager to enhance your experience with deploying Angular on Rocky Linux and NGINX.