Nginx deploys front-end and back-end separation services and configuration instructions

This article mainly introduces the front-end and back-end separation services and configuration instructions for Nginx deployment. It has certain reference value. Now I share it with you. Friends in need can refer to it

Install Nginx

Use the yum command to install Nginx in CentOS 7 server:

sudo yum install -y nginx

Configure Nginx

File location

Generally, the nginx configuration file is in the etc directory. You can also execute the command rpm -ql nginx to view the path.

After switching to the /etc/nginx directory, you can see the nginx.conf configuration file.
Execute vi nginx.conf to open the configuration file.

vim common commands

##iStart typing in front of the cursoraStart typing in front of the cursorEscExit input modeuUndo the previous operation in non-input mode:wIn non-input mode, save:wqIn non-input mode, save and close:qClose (saved) :q!Do not save, force close

Command	Function

Nginx configuration instructions

# For more information on configuration, see:
#   * Official English Documentation: http://nginx.org/en/docs/
#   * Official Russian Documentation: http://nginx.org/ru/docs/

user nginx;
worker_processes auto; #启动进程
error_log /var/log/nginx/error.log; #全局错误日志
pid /run/nginx.pid; #PID文件

# Load dynamic modules. See /usr/share/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;

events {
    worker_connections 1024; #单个后台worker process进程的最大并发链接数 
}

http {
    gzip on; #开启gzip压缩
    gzip_min_length 1k; #设置对数据启用压缩的最少字节数
    gzip_buffers    4 16k;
    gzip_http_version 1.0;
    gzip_comp_level 6; #设置数据的压缩等级,等级为1-9，压缩比从小到大
    gzip_types text/plain text/css text/javascript application/json application/javascript application/x-javascript application/xml; #设置需要压缩的数据格式
    gzip_vary on;

    #虚拟主机配置
    server {
        listen       80 default_server; #侦听80端口,并为默认服务,default_server只能有一个
        server_name  www.binlive.cn binlive.cn; #服务域名,可以有多个,用空格隔开
        
        location /{
            proxy_pass http://127.0.0.1:3000; #代理本机3000端口服务
            proxy_set_header  Host              $http_host;   # required for docker client's sake
            proxy_set_header  X-Real-IP         $remote_addr; # 获取用户的真实IP地址
            proxy_set_header  X-Forwarded-For   $proxy_add_x_forwarded_for;
            proxy_set_header  X-Forwarded-Proto $scheme;
            proxy_read_timeout                  900;
        }
        # 图片缓存时间设置
        location ~ .*.(gif|jpg|jpeg|png|bmp|swf)$ {
            expires 10d;
        }
        # JS和CSS缓存时间设置
        location ~ .*.(js|css)?$ {
            expires 1h;
        }
        # 404定义错误提示页面
        error_page 404             /404.html;
        # 500定义错误提示页面
        error_page   500 502 503 504 /50x.html;
        
    }
    server {
        listen       80;
        server_name  admin.binlive.cn;
        location /{
            proxy_pass http://127.0.0.1:3080;
            proxy_set_header  Host              $http_host;   # required for docker client's sake
            proxy_set_header  X-Real-IP         $remote_addr; # pass on real client's IP
            proxy_set_header  X-Forwarded-For   $proxy_add_x_forwarded_for;
            proxy_set_header  X-Forwarded-Proto $scheme;
            proxy_read_timeout                  900;
        }
        
    } 
}

Copy after login

Deployment of front-end and back-end separation projects

In the front-end and back-end separation project, the front-end The code will be packaged into pure static files. The purpose of using Nginx is to allow static files to run services. Since the back-end interface is also separated, direct requests may cause cross-domain problems. In this case, Nginx is required to forward the proxy back-end interface.

Nginx configuration is as follows

# For more information on configuration, see:
#   * Official English Documentation: http://nginx.org/en/docs/
#   * Official Russian Documentation: http://nginx.org/ru/docs/

user nginx;
worker_processes auto; #启动进程
error_log /var/log/nginx/error.log; #全局错误日志
pid /run/nginx.pid; #PID文件

# Load dynamic modules. See /usr/share/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;

events {
    worker_connections 1024; #单个后台worker process进程的最大并发链接数 
}

http {
    gzip on; #开启gzip压缩
    gzip_min_length 1k; #设置对数据启用压缩的最少字节数
    gzip_buffers    4 16k;
    gzip_http_version 1.0;
    gzip_comp_level 6; #设置数据的压缩等级,等级为1-9，压缩比从小到大
    gzip_types text/plain text/css text/javascript application/json application/javascript application/x-javascript application/xml; #设置需要压缩的数据格式
    gzip_vary on;

    #虚拟主机配置
    server {
        listen       80;
        server_name  mark.binlive.cn;
        root /home/spa-project/dist; #定义服务器的默认网站根目录位置
        index index.html; #定义index页面
        error_page    404         /index.html; #将404错误页面重定向到index.html可以解决history模式访问不到页面问题
        location ^~ /api/{
            proxy_pass http://127.0.0.1:7000;
            proxy_send_timeout 1800;
            proxy_read_timeout 1800;
            proxy_connect_timeout 1800;
            client_max_body_size 2048m;
            proxy_http_version 1.1;  
            proxy_set_header Upgrade $http_upgrade;  
            proxy_set_header Connection "Upgrade"; 
            proxy_set_header  Host              $http_host;   # required for docker client's sake
            proxy_set_header  X-Real-IP         $remote_addr; # pass on real client's IP
            proxy_set_header  X-Forwarded-For   $proxy_add_x_forwarded_for;
            proxy_set_header  X-Forwarded-Proto $scheme;
        }
        location ^~ /auth/{
            proxy_pass http://127.0.0.1:7000;
            proxy_send_timeout 1800;
            proxy_read_timeout 1800;
            proxy_connect_timeout 1800;
            client_max_body_size 2048m;
            proxy_http_version 1.1;  
            proxy_set_header Upgrade $http_upgrade;  
            proxy_set_header Connection "Upgrade"; 
            proxy_set_header  Host              $http_host;   # required for docker client's sake
            proxy_set_header  X-Real-IP         $remote_addr; # pass on real client's IP
            proxy_set_header  X-Forwarded-For   $proxy_add_x_forwarded_for;
            proxy_set_header  X-Forwarded-Proto $scheme;
        }
    }    
}

Copy after login

• Put the

  dist file packaged with the front-end code into the specified service directory

• Specify the service directory to the

  spa-project/dist directory to proxy the static service

• Gzip compression is enabled in the configuration , can greatly reduce the file size

• Redirect the 404 error page to index.html, which can solve the problem of 404 in the front-end history routing mode due to the inability to access the service when refreshing the page. The problem

• location is the proxy interface. You can forward the request interface domain name or IP of the proxy backend to solve the interface cross-domain problem

Start Nginx service

After completing the configuration, you can start nginx

Execute
nginx -t to test whether the Nginx configuration is correct. Execute
nginx, and the nginx service can be started if the configuration file is correct. After modifying the nginx configuration file, execute
nginx -s reload to complete the smooth transition and reload the configuration

Nginx common commands

CommandDescription##nginx -hnginx -vnginx -tnginx -Tnginxnginx -s reloadnginx -s stop# The above is the entire content of this article. I hope it will be helpful to everyone’s learning. For more related content, please pay attention to the PHP Chinese website!

View Nginx help
Check Nginx version
Test Nginx configuration
Test the Nginx configuration and print the configuration information
Start nginx
Reload the configuration file and start nginx smoothly
Stop nginx The command

Related recommendations:

Nginx sets unbound domain names to prohibit access

nginx implements reverse proxy and load balancing

Nginx deploys static pages

The above is the detailed content of Nginx deploys front-end and back-end separation services and configuration instructions. For more information, please follow other related articles on the PHP Chinese website!