Nginx deploys Springboot plus Vue and ordinary css, js, html technology stack projects

Nginx static website deployment and debugging

  • 1) npm manage js vuecli
    Npm run build package and deploy
  • 2)Traditional html+css directly introduce js, traditional static, and
    copy it directly.

Static website dynamic debugging-development stage

  • The vuecli project can start debugging with npm run dev

  • The traditional mode of importing js development cannot be debugged directly in the server mode.You need to install the live-server server.This server is very simple as a node module.

npm install -g live-server
live-server --port=6002

Nginx configures virtual hosts to forward different directories with different domain names or ports (front-end projects)

  • Virtual hosting, also called "website space", is to divide a physical server running on the Internet into multiple "virtual" servers. Virtual host technology has greatly promoted the application and popularization of network technology. At the same time, the rental service of virtual host has become a new economic form in the Internet age.

Configure virtual host based on port

(1) Upload a static website: the
front-end traditional project under nginx/html_xxx The
front-end vuecli project is packaged and uploaded to nginx/vuecli_xxx
(2) Modify the Nginx configuration file: conf/nginx.conf

 server {
    
    
        listen       8081;
        server_name  localhost;
        location / {
    
    
            root   html_xxx;
            index  index.html;
        }      
    }
    server {
    
    
        listen       80;
        server_name  localhost;
        location / {
    
    
            root   vuecli_xxx;
            index  index.html;
        }        
    }

(3) Access test: Reload Nginx reload
address bar and enter http://localhost:82
address bar and enter http://localhost:83

Configure virtual host based on domain name

  • Domain name and IP binding:
    One domain name corresponds to one ip address, and one ip address can be bound by multiple domain names.
    For local testing, you can modify the hosts file (C:\Windows\System32\drivers\etc)
    to configure the mapping relationship between domain name and ip. If the corresponding relationship between domain name and ip is configured in the hosts file, there is no need to go to the dns server. Specify the binding rule IP domain name and then confirm. After the domain name is pointed, modify the nginx configuration file
    Hosts
    127.0.0.1 app_html_xxx
    127.0.0.1 admin_vuecli_xxx
    (1) Upload a static website: the
    front-end traditional project under nginx/html_xxx The
    front-end vuecli project is packaged and uploaded to nginx/vuecli_xxx
    (2) Modify Nginx Configuration file: conf/nginx.conf
server {
    
    
        listen       80;
        server_name  app_html_xxx;
        location / {
    
    
            root   html_xxx;
            index  index.html;
        }
    }
    server {
    
    
        listen       80;
        server_name  admin_vuecli_xxx;
        location / {
    
    
            root   vuecli_xxx;
            index  index.html;
        }
    }

Nginx as a reverse proxy-different domain names or addresses are forwarded to different servers

  • Static projects can deploy multiple projects through virtual hosts, but dynamic tomcat websites will not work, and nginx cannot interpret and run.

Reverse proxy configuration

Modify the Nginx configuration file: conf/nginx.conf

server {
    
    
		listen       80;
		server_name  java_web;

		#charset koi8-r;

		#access_log  logs/host.access.log  main;

		location / {
    
     
		    proxy_pass http://127.0.0.1:6002; #访问域名为java_web都交给6002处理
		    index  index.html index.htm;
		}
	}

	server {
    
    
		listen       80;
		server_name  admin.com;

		#charset koi8-r;

		#access_log  logs/host.access.log  main;

		location / {
    
    
		    proxy_pass http://127.0.0.1:8082; #访问域名为 admin.com都交给8082处理
		    index  index.html index.htm;
		}
	}

The rules of reverse proxy can be distinguished by different domain names, and can also be distinguished by different uris.

Resolve cross-domain:

server {
    
    
		listen       80;
		server_name  admin.mall.com;
 location / {
    
    
            # 检查域名后缀
		  if ($http_origin ~ \.mall\.com) {
    
    
				add_header Access-Control-Allow-Origin $http_origin;
				add_header Access-Control-Allow-Methods GET,POST,DELETE,PUT,OPTIONS;
				add_header Access-Control-Allow-Credentials true;
				add_header Access-Control-Allow-Headers DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,U-TOKEN;
				add_header Access-Control-Max-Age 1728000;
		   }
		   # options请求不转给后端,直接返回204
		   # 第二个if会导致上面的add_header无效,这是nginx的问题,这里直接重复执行下
		   if ($request_method = OPTIONS) {
    
    
				add_header Access-Control-Allow-Origin $http_origin;
				add_header Access-Control-Allow-Methods GET,POST,DELETE,PUT,OPTIONS;
				add_header Access-Control-Allow-Credentials true;
				add_header Access-Control-Allow-Headers DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,U-TOKEN;
				add_header Access-Control-Max-Age 1728000;
				return 204;
		   }
			# 其他请求代理到后端
		   proxy_set_header Host $host;
		   proxy_redirect off;
		   proxy_set_header X-Real-IP $remote_addr;
		   proxy_set_header X-Scheme $scheme;
		   proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
		   proxy_set_header X-Forwarded-Proto $scheme;
		   proxy_pass http://localhost:8081;
        }
    }

Guess you like

Origin blog.csdn.net/weixin_45528650/article/details/110913652