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 etcdirectory. You can also execute the command rpm -ql nginxto view the path.

After switching to the/etc/nginxdirectory, you can see thenginx.confconfiguration file.
Executevi nginx.confto open the configuration file.

vim common commands

##i Start typing in front of the cursor a Start typing in front of the cursor Esc Exit input mode u Undo the previous operation in non-input mode :w In non-input mode, save :wq In non-input mode, save and close :q Close (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; } } }

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; } } }

• Put the

  distfile packaged with the front-end code into the specified service directory

• Specify the service directory to the

  spa-project/distdirectory 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

• locationis 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 -tto 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 reloadto complete the smooth transition and reload the configuration

Nginx common commands

Command Description ##nginx -h nginx -v nginx -t nginx -T nginx nginx -s reload nginx -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!