Linux Basics: Basic Configuration of Nginx and Apache

Apache and Nginx are two commonly used web server software.

This is a beginner-level operational example. By deploying a front-end page, we will learn their basic usage.

For comparison, both server software are used simultaneously during deployment, combined through reverse proxy.

1. Basic Concepts

Apache HTTP Server is a long-established web server software. It adopts a Process Driven model, creating a separate process or thread for each request. Its characteristics include stability, but it can put excessive memory and processing pressure when the number of connections is high.

Nginx is a high-performance web server that is Event Driven. It uses an asynchronous non-blocking mechanism, allowing a small number of worker processes to handle a large number of concurrent connections. It is often used as a static resource server, load balancer, or reverse proxy gateway.

Most web applications adopt a front-end and back-end separation architecture, with similar configuration methods. For example, a common Vue.js + Spring Boot combination deploys the front end on Nginx and the back end using the embedded Tomcat container of Spring Boot. Nginx receives user requests and returns the page to the user; when the page needs data, Nginx forwards the API request via reverse proxy to the back-end Spring application.

2. Installation and Initial Status Check

Step 2.1: Install Software

Execute the following commands in the terminal to install:

sudo apt install apache2
sudo apt install nginx

Step 2.2: Check Service Status

Confirm whether the services are installed and loaded:

systemctl status apache2
systemctl status nginx

Step 2.3: Check Port Usage

By default, both Apache and Nginx will attempt to listen on port 80, which can lead to conflicts. Execute the following command to check the usage:

sudo lsof -i :80

3. Resolving Port Conflicts

To allow both to run on the same machine, migrate Apache to port 8080, keeping Nginx listening on port 80.

Step 3.1: Modify Listening Configuration

sudo vim /etc/apache2/ports.conf

Change Listen 80 in the file to:

Listen 8080

Step 3.2: Modify Default Virtual Host Configuration

sudo vim /etc/apache2/sites-available/000-default.conf

Change <VirtualHost *:80> to:

&lt;VirtualHost *:8080&gt;

Step 3.3: Restart Services

Restart both services to apply changes and check the service status and port status again:

sudo systemctl restart apache2
sudo systemctl restart nginx
# Verify port allocation
sudo lsof -i :80    # Should show nginx
sudo lsof -i :8080  # Should show apache2

4. Prepare Website Directories and Pages

Create three site directories and generate simple test pages.

Step 4.1: Create Directories

Create three directories at once:

sudo mkdir -p /var/www/{site1,site2,site3}

Step 4.2: Create 3 Page Files

Use echo with sudo tee to write files, avoiding permission issues with >.

• Site 1 (Nginx):

echo "&lt;h1&gt; Site 1 (Nginx 80)&lt;/h1&gt;" | sudo tee /var/www/site1/index.html

• Site 2 (Nginx):

echo "&lt;h1&gt; Site 2 (Nginx 80)&lt;/h1&gt;" | sudo tee /var/www/site2/index.html

• Site 3 (Apache):

echo "&lt;h1&gt; Site 3 (Apache 8080)&lt;/h1&gt;" | sudo tee /var/www/site3/index.html

5. Nginx Configuration

Configure Nginx to host site1 and site2.

Step 5.1: Configure Site 1

Navigate to the configuration directory and create a file:

cd /etc/nginx/sites-available/
sudo vim site1

Write the following content:

server {
    listen 80;
    server_name www.site1.com;
    root /var/www/site1;
    index index.html;
    
    location / {
        try_files $uri $uri/ =404;
    }
}

Step 5.2: Configure Site 2

Create the site2 configuration file in the same way, only modifying the domain name and directory.

server {
    listen 80;
    server_name www.site2.com;
    root /var/www/site2;
    index index.html;
    
    location / {
        try_files $uri $uri/ =404;
    }
}

Step 5.3: Enable Services

Enable the sites by creating soft links and reloading the service:

sudo ln -s /etc/nginx/sites-available/site1 /etc/nginx/sites-enabled/
sudo ln -s /etc/nginx/sites-available/site2 /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl reload nginx.service

6. Apache Configuration

Configure Apache to host site3 and listen on port 8080.

Step 6.1: Create Configuration File

Create the site3.conf file:

sudo vim /etc/apache2/sites-available/site3.conf

Write the following content:

&lt;VirtualHost *:8080&gt;
    ServerName www.site3.com
    DocumentRoot /var/www/site3
    
    ErrorLog ${APACHE_LOG_DIR}/site3_error.log
    CustomLog ${APACHE_LOG_DIR}/site3_access.log combined
&lt;/VirtualHost&gt;

Step 6.2: Enable Services

Enable the site and reload Apache:

sudo a2ensite site3.conf
sudo systemctl reload apache2

7. Configure Nginx to Combine via Reverse Proxy

To access site3 through port 80, configure Nginx as a reverse proxy to forward requests to the back-end Apache.

Step 7.1: Add Proxy Configuration

Create a site3_proxy file in the Nginx configuration directory:

sudo vim /etc/nginx/sites-available/site3_proxy

Write the content:

server {
    listen 80;
    server_name www.site3.com;
    
    location / {
        # Forward requests to local port 8080
        proxy_pass http://127.0.0.1:8080;
        # Pass the Host header to ensure Apache recognizes ServerName
        proxy_set_header Host $host;
    }
}

Step 7.2: Enable Proxy Service

sudo ln -s /etc/nginx/sites-available/site3_proxy /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl reload nginx

8. Local Domain Name Settings

Modify the local computer’s Hosts file to point the domain names to the virtual machine IP (assumed to be 192.168.119.130, please replace with the actual situation).

• Windows: C:\Windows\System32\drivers\etc\hosts
• Linux/Mac: /etc/hosts

Add the following content:

192.168.119.130 www.site1.com
192.168.119.130 www.site2.com
192.168.119.130 www.site3.com

9. Page Design or LLM Generation

The design of the front-end page mainly consists of HTML (structure), CSS (style), and JavaScript (interaction). These three are the foundation of front-end page design.

Using LLM to Generate Complex Pages

Current large language models (LLMs) have excellent capabilities for generating front-end code, allowing for rapid generation of complete front-end pages.

Example: Generate a single-page sliding puzzle game:

“Generate a single-page sliding puzzle game, using the mouse to select images from the left two columns of the most famous Minecraft characters or mobs (from the Minotar API), or upload images locally, with the target image displayed on the right. Support difficulty adjustment, ensuring it is solvable.”

Usage:

1. Copy the complete code generated by the LLM.
2. Use an editor to overwrite the site homepage file:
```
sudo vim /var/www/site1/index.html
```
3. After saving and exiting, visit www.site1.com in the browser to run the game.

The index.html in the example is a pure front-end page that can be opened directly in a local browser for preview before deployment.