nginx front-end and back-end separation

The installation of jdk and tomcat will not be explained too much here, you can check related tutorials on Baidu

First install the nginx dependency library:

yum -y installl gcc gcc-c++ autoconf automake

yum -y install pcre pcre-devel

yum -y install zlib zlib-devel

Create a new folder, download and unzip nginx

mkdir /usr/my

cd /usr/my

wget http://nginx.org/download/nginx-1.14.0.tar.gz

tar -zxvf nginx-1.14.0.tar.gz

install nginx

cd nginx-1.14.0

./configure

make && make install  #当usr/local文件夹下出现nginx文件夹表明已经安装成功

Switch to the nginx directory and configure nginx.conf. Create a new one without this file

cd /usr/local/nginx/conf

# nginx.conf
user nobody;
worker_processes 2;
events{
        worker_connections 1024;
}
http{
 	include mime.types; #文件扩展名与文件类型映射表
	default_type application/octet-stream; #默认文件类型
        server{
                listen 192.168.2.19:80; #配置成自己本机的ip地址和端口
                server_name 192.168.2.19;
                access_log logs/server1.accesscombined;
		#定义服务器的默认网站根目录位置
		root /usr/my/web-project/ve/dist/;
       		index login.html;
                # index index.html     # vue的配置
 		#默认请求
        	location / {
        	    index login.html;
                    # 以下是vue的配置
        	    # try_files $uri $uri/ @router;
        	    # index index.html; 
        	}                
               # location @router {
               #    rewrite ^.*$ /index.html last;
               # }
		#配置Nginx动静分离，定义的静态页面直接从Nginx发布目录读取。
	        location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|css|js|eot|svg|ttf|woff|woff2|properties|json|map)$ {
          	    if (-f $request_filename) {
                      expires 1d;
                      break;
                    }
                }                            
		#设置代理，转发请求，msm是我部署到tomcat的项目名
		location /msm  {
		    index login.html;
                    proxy_set_header X-Forwarded-Host $host;
                    proxy_set_header X-Forwarded-Server $host;
                    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                    proxy_pass http://localhost:8080;
		}
        }
}

Create a login page, corresponding to the path of the page configured in nginx.conf

touch /usr/my/web-project/ve/dist/login.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>login</title>
</head>
<body>
	<div style="border: 1px solid #666666; width: 250px; height: 150px; position: absolute;">
		<div style="margin-top: 20px;">
			<span>用户名：</span>
			<input type="text" id="username" name="username" value=""><br />
		</div>
		<div>
			<span style="margin-left: 15px;">密码：</span>
			<input type="text" id="password" name="password" value="" style="margin-top: 10px; margin-bottom: 10px;"><br />
		</div>
		<button style="margin-left: 160px;" onclick="login();">登陆</button>
	</div>
	<script type="text/javascript"> 
        var url = "/msm/api/login"; 
        function login(){    
		    var postData = "username=" + document.getElementById("username").value + "&password=" + document.getElementById("password").value;     
		    var xhr = new XMLHttpRequest();  
		    xhr.onreadystatechange = function(event){   
		        if(xhr.readyState == 4){    
		            if(xhr.status == 200){    
		                //console.log(xhr)   
		            }
		        }
		    };
		    xhr.open('POST',url,true);   
		    xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded'); 
		    xhr.send(postData);     
		}   
	</script>
</body>
</html>

For the background project, I directly downloaded a project source code of mybatisplus , and added a test method to userController

    @ResponseBody
    @RequestMapping("/api/login")
   public Object login(@RequestParam(value = "username", required = false) String username,
    @RequestParam(value = "password", required = false) String password){
    	return renderSuccess("验证成功:"+username);
    }

Package this project into a war package named msm. Put it in tomcat to run

nginx common commands, start nginx

cd /usr/local/nginx/sbin
./nginx                    # 启动
./nginx -s reload     # 修改完配置文件之后重新加载
./nginx -s reopen    # 重新启动 
./nginx -s stop        # 停止

Accessing 192.168.2.19 in the browser will directly open the login page, enter the user name/password and click the login button, press F12 to enter the browser's debug mode, check whether an http request has been initiated, and what is the result returned by the request.

You can download a vue background management template , put the dist in /usr/my/web-project/ve/ and try it after packaging, modify the requested link or something, and completely create a project that separates the front and back ends.

nginx front-end and back-end separation

Guess you like