scene
Nginx introductory tutorial - introduction, installation, reverse proxy, load balancing, dynamic and static separation, use examples:
https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/103101304
The front end is a project made of Vue and the back end is SpringBoot. How to deploy the front and rear end projects on the Windows server and use Nginx for proxy.
Nginx download address
http://nginx.org/en/download.html
Click the corresponding version of Windows here
After downloading, a compressed package is extracted to a directory on the server
Agent configuration
Enter the conf directory extracted above and edit the Nginx configuration file Nginx conf
server node found
First, the port under listen here is the interface in front of the agent, which should be connected with the Vue of the front-end project config. The ports in JS are consistent.
server { listen 70; server_name 10.229.36.158;
Then the following server_name is the ip address of your server. It is recommended not to use localhost even if it is used locally to avoid problems caused by modifying the hosts file.
So set the ip address of the server you want to deploy the project.
Then, the following location / configuration is the path of the front-end static resources before the agent.
The path of the root directory on the front-end server is the path of the root directory represented by dist.
The following two configurations remain the default and do not change. The configuration is to prevent 404 and entry page.
location / { root D:/www/kaoqin/dist/; try_files $uri $uri/ /index.html; index index.html index.htm; }
Then, the following location / prod API / is the address of the configured agent.
location /prod-api/ { proxy_set_header Host $http_host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header REMOTE-HOST $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_pass http://localhost:8080/; }
The / prod API / here is consistent with the path rewriting of the proxy set by the front-end project.
The following is to set the request header to prevent cross domain problems.
Then the lowest proxy_pass is the address after the proxy is set, that is, the url of the background interface on your server.
Through the above two configurations, all requests on the server can be realized
As long as it is through
http://10.229.36.158/70/dev-api/
All requests sent will be proxied to
Down. In this way, the request agent of front and back-end projects can be realized.
Full conf code
#user nobody; worker_processes 1; #error_log logs/error.log; #error_log logs/error.log notice; #error_log logs/error.log info; #pid logs/nginx.pid; events { worker_connections 1024; } http { include mime.types; default_type application/octet-stream; #log_format main '$remote_addr - $remote_user [$time_local] "$request" ' # '$status $body_bytes_sent "$http_referer" ' # '"$http_user_agent" "$http_x_forwarded_for"'; #access_log logs/access.log main; sendfile on; #tcp_nopush on; #keepalive_timeout 0; keepalive_timeout 65; #gzip on; server { listen 70; server_name 10.229.36.158; #charset koi8-r; #access_log logs/host.access.log main; location / { root D:/www/kaoqin/dist/; try_files $uri $uri/ /index.html; index index.html index.htm; } location /prod-api/ { proxy_set_header Host $http_host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header REMOTE-HOST $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_pass http://localhost:8080/; } # redirect server error pages to the static page /50x.html # error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } # proxy the PHP scripts to Apache listening on 127.0.0.1:80 # #location ~ \.php$ { # proxy_pass http://127.0.0.1; #} # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000 # #location ~ \.php$ { # root html; # fastcgi_pass 127.0.0.1:9000; # fastcgi_index index.php; # fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name; # include fastcgi_params; #} # deny access to .htaccess files, if Apache's document root # concurs with nginx's one # #location ~ /\.ht { # deny all; #} } # another virtual host using mix of IP-, name-, and port-based configuration # #server { # listen 8000; # listen somename:8080; # server_name somename alias another.alias; # location / { # root html; # index index.html index.htm; # } #} # HTTPS server # #server { # listen 443 ssl; # server_name localhost; # ssl_certificate cert.pem; # ssl_certificate_key cert.key; # ssl_session_cache shared:SSL:1m; # ssl_session_timeout 5m; # ssl_ciphers HIGH:!aNULL:!MD5; # ssl_prefer_server_ciphers on; # location / { # root html; # index index.html index.htm; # } #} }
Start Nginx
Go to the directory (on the server) where Nginx has been decompressed above, which contains Nginx Exe directory, open the command line here
start nginx.exe
start nginx
If you modify the configuration file of nginx
nginx -s reload
If the environment variable is not configured or the prompt does not work, use nginx Exe.
Normal stop or shutdown of Nginx:
nginx -s quit
After starting Nginx successfully, open the browser for verification and enter
If a page can appear, that is, the index of the corresponding front-end static resource HTML page, and can display the verification code, which is through the agent
Background interface acquisition. Then the agent is successful. Remember not to close the command line of this nginx.
If you fail to access the address on the server, check whether port 70 is open
Control panel - Firewall - Advanced Settings
Inbound rule - new rule - port, add 70
Click next
Select allow connection
Configure the connection domain and click next
Set the name and click save.