Deploy front-end projects using nginx (super detailed tutorial)

Deploy front-end projects using nginx (super detailed tutorial)

(The front-end template used has been uploaded to personal resources, please get it for free)
There is no limit to all articles. We meet by chance, separate calmly, do not disturb each other, each is well, and live towards the sun.

1.Install nginx

Direct installation error recurrence

 yum -y install nginx

explain:

Nginx is not available in the CentOS official software repository, but it is available in the EPEL (Extra CentOS Packages) software repository, so you need to install the EPEL software repository before installation

Correct installation method

1.Install epel-release

yum -y install epel-release

2. Install Nginx

 yum -y install nginx

3. Start Nginx

After the Nginx installation is complete, start the Nginx service

 systemctl start nginx  	#启动服务
 systemctl enable nginx 	#设置开机自启
 systemctl status nginx  	#查看启动状态

4. Configure Nginx

Since the Nginx default configuration file does not suit our needs, we need to modify it. You can follow the steps below:

Back up the default configuration file:

cp /etc/nginx/nginx.conf /etc/nginx/nginx.conf.bak

Open the new configuration file using a text editor /etc/nginx/nginx.confand modify it to the following content:

user  nginx;
worker_processes  auto;
worker_rlimit_nofile 8192;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;

events {
    
    
    worker_connections  1024;
}

http {
    
    
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    access_log  /var/log/nginx/access.log;
    error_log   /var/log/nginx/error.log;

    sendfile        on;
    tcp_nopush      on;
    tcp_nodelay     on;

    #gzip  on;

    server {
    
    
        listen       80;
        server_name  localhost;
        root         /usr/share/nginx/html;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        location / {
    
    
        }

        error_page 404 /404.html;
            location = /40x.html {
    
    
        }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
    
    
        }
    }
}

The above configuration file specifies the user running Nginx as nginx, configures a worker process for each CPU core, adds some basic configurations in the "http" section, adds the default www root directory and default website for Nginx, and Configured several common error pages

5. Restart Nginx

systemctl restart nginx

Now, you have successfully installed and configured Nginx. You can test by opening the server's IP address or domain name and accessing the server using the HTTP protocol.

2. Configure your own web page

1. Create the website root directory

Create a new directory on the server to store your website files. For example, you can create a new directory called mysite within the /var/www/ directory:

 mkdir -p /var/www/mysite

2. Add website files

You can use the ftp tool, or you can create an html yourself

3. Configure Nginx

vim /etc/nginx/nginx.conf

server {
        listen 8888; #配置端口
        listen [::]:8888;

        server_name 192.168.6.100; #修改为您的域名

        root /var/www/mysite; #必须在这个层里面有自己的index.html首页
        index index.html;

        location / {
                try_files $uri $uri/ =404;
        }
}

In the server block in the Nginx configuration file, you often see two listen statements, which look a bit strange:

server {
    listen 80;
    listen [::]:80;
    ...
}

Among them, listen 80;means that it will listen on port 80 of the server, and listen [::]:80;is the listener of the IPv6 address and also listens on port 80.

This approach ensures that your website is accessible over both IPv4 and IPv6 connections. For example, if you are using the first listen statement, you can only use an IPv4 address to connect to your website (for example, 192.0.2.1), whereas if your server supports IPv6, use [::ffff:192.0.2.1 ] Perform IPv4 conversion. And if you change it to use IPv6 only, browsers that only support IPv6 won't be able to access your site.

Therefore, to make your website accessible over both IPv4 and IPv6, it's best to use both listen 80;and listen [::]:80;. If you believe that your site only needs to be accessible through one protocol, only use the corresponding listenstatement.

The above configuration file specifies a new virtual host, where "server_name" is specified as the name of the website you want to host, such as "192.168.6.100", and "root" is specified as the root directory of the website you created, such as "/var/www" /mysite", and "index" is specified as the default website file name.

Please note that the content of the rest of the configuration files will remain unchanged and you will not need to change the default configuration file for launch and access

4. Test Nginx configuration

5. Restart Nginx

 systemctl restart nginx

3.Possible problems

If you still can't access your website after configuring Nginx, there may be some common issues:

1. The firewall port is not open

If you are using a Linux firewall (such as firewalld or iptables), you may need to open ports to allow people to access your website through your Nginx server. For example, if you are listening on port 80, you can open the port with the following command:

Using firewalld (CentOS 7+ system):

sudo firewall-cmd --zone=public --add-port=80/tcp --permanent
sudo firewall-cmd --reload

Using iptables:

sudo iptables -I INPUT -p tcp --dport 80 -j ACCEPT
sudo iptables-save > /etc/sysconfig/iptables

2.SELinux rule restrictions

If your operating system has SELinux installed, it may prevent Nginx from accessing certain files or ports. You can disable SELinux using the following command:

sudo setenforce 0

In addition, you can also edit the SELinux rules to allow Nginx to access the corresponding files or ports to avoid reducing system security when SELinux is disabled.

3. Other port or path conflicts

If you have configured your web server on a different port, you must have Nginx listen on a different port. Likewise, if you install other software or web applications, port or path conflicts may occur. In this case, you need to change the Nginx configuration or change other service configurations to avoid conflicts.

4. Check configuration file syntax and errors

When modifying Nginx configuration files, it is easy to make syntax or other errors. You can check whether the syntax of the Nginx configuration file is correct using the following command:

sudo nginx -t

If your configuration file has syntax errors, the output will resemble the following:

nginx: [emerg] unexpected "[" in /etc/nginx/conf.d/example.com.conf:8

Please check the output error message carefully and fix the syntax errors in the configuration file.

5. The current network is unavailable

Finally, make sure you are using a network with internet access to avoid network issues that prevent you from accessing your website. If you can access other websites but not your own, it may be due to incorrect DNS configuration. In this case, you can temporarily modify the hosts file on your local computer to try to connect directly to your server.