姑苏城外一茅屋，万树梅花月满天

0%

前后端分离 | 进阶 && 项目实战

发表于 更新于 分类于 ， ， ， ， ， ， ， Valine：

这里是我经历了一次完整的项目的前后端分离。

在 MacBook、win、ubuntu 都有不同的部署方案，绝对具有指导意义。

并且，给出了三种场景。

这里先介绍一下项目。

  • 前后端分离
  • webpack + bootstrap
  • 两个独立的前端，一个后台
    • 其中一个前端依附于一个后台「flask」
      • 对应于前端 8444 后台 6666
    • 另外一个只是前端页面
      • 对应于 1234
    • 总共需要依附于 3 个端口
  • 走 https 链接

本地

本地用的是 MacBook 的开发方式。

在此之前，你要阅读我下面的博文。

本地使用的是

  • DevServer

这个来解决。

所以，本地不需要安装 nginx 或者其他东西来进行跨域，但是，这个只能本地运行，不可以部署到服务器上。

本地测试的话，非常方便。

这里给出，我的配置。

1
2
3
4
5
6
7
8
9
10
devServer: {
        contentBase: path.join(__dirname, 'dist'),
        port: 9000,
        proxy: {
            '/dang': {
                target: "http://127.0.0.1:6666",
                changeOrigin: true,
            },
        }
    },

上面的配置，针对的是 网页 + 后台端口。

里面的请求依附于 axios ，让请求的 url 包含 /dang 的时候，这个请求就通过临时服务器，发送到 6666 端口。

ubuntu 服务器

在 ubuntu 中，我们使用的是 nginx 服务器，进行跨域。

你需要参考

我们在本地测好，将项目打包，然后发到 ubuntu 中，其中, nginx 的配置如下。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
http {
	...

	server {
            listen 8444 ssl;
            server_name ****.com; #需要将yourdomain.com替换成证书绑定的域名。
            root html;
            index index.html index.htm;
            ssl_certificate conf.d/cert/5057263_****.com.pem;  #需要将cert-file-name.pem替换成已上传的证书文件的名称。
            ssl_certificate_key conf.d/cert/5057263_****.com.key; #需要将cert-file-name.key替换成已上传的证书密钥文件的名称。
            ssl_session_timeout 5m;
            ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
            #表示使用的加密套件的类型。
            ssl_protocols TLSv1 TLSv1.1 TLSv1.2; #表示使用的TLS协议的类型。
            ssl_prefer_server_ciphers on;
            location / {
                    root /var/www/html8444;  #站点目录。
                    index index.html index.htm;
            }
			location /rest {
	                	proxy_pass https://aip.baidubce.com;
	        	}
			location /dang {
				proxy_pass http://127.0.0.1:6666;
			}

        }

	server {
		listen 1234 ssl;
		server_name ***.com;
		root html;
		index index.html index.htm;
		ssl_certificate conf.d/cert/5057263_***.com.pem;  #需要将cert-file-name.pem替换成已上传的证书文件的名称。
		ssl_certificate_key conf.d/cert/5057263_****.com.key; #需要将cert-file-name.key替换成已上传的证书密钥文件的名称。
		ssl_session_timeout 5m;
		ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
		#表示使用的加密套件的类型。
		ssl_protocols TLSv1 TLSv1.1 TLSv1.2; #表示使用的TLS协议的类型。
		ssl_prefer_server_ciphers on;
		location / {
			root /var/www/htmldangpiying;
			index index.html index.htm;
		}
	}
}

这里面对外接口只有

  • 8444
  • 1234

其中，flask 的接口 6666 因为，nginx 做了本地的转发，所以，不需要对外开放。

项目部署上去后，nginx 开启就可以了。

我们使用的是阿里云服务器，如果你想知道关于 https 以及服务器如何走 https 的话，可以参考。

win

项目最后部署是在 win server 上。假设，该服务器绑定的域名为 aa.com

先说一下背景。

除了我们这个项目要部署在那台服务器上，还有一个项目需要部署，并且，另外一个项目已经先于我们部署了，其使用的是 「小皮面板」，另外其使用的是 apache ，虽然有 nginx 和 apache 共用的方案，但是，为了不破坏现有的环境，我将采用另外一套方案来做前后端分离。

首先先把证书要一下。其给的证书为

  • ***.crt
  • ***.key

首先，我们把小皮面板添加两个网站，就是指向了前端页面，选择 https 线路，固定好端口

  • 8444
  • 1234

参考下面的博文，知道，flask 可以通过 cors 技术来实现跨域。

并且，因为，我们不借助 nginx 转发请求，所以，flask 的端口就要实现开发，外界通过

  • aa.com:6666/v1/get_name

的方式来获取数据「前端通过 axios 来获取」

flask 在这里有两个坑，一个是端口不能用 6666 否则会提示 :ERR_UNSAFE_PORT，具体原因，还有其他的端口请看

所以，在这里我们换上 5000 作为开放端口。

另外有一点，就是，假设前端走了 https 链接，你后端也要走 https 链接，不然，就会出错。

所以，flask 的代码为

1
2
3
4
5
6
7
8
9
10
11
12
from flask import Flask
from flask_cors import CORS
app = Flask(__name__)
CORS(app, supports_credentials=True)

@app.route('/')
def index():
    return "这是首页"

if __name__=="__main__":
    app.run('0.0.0.0', debug=True, port=5000, ssl_context=('D:\\ssl\\***.crt', 'D:\\ssl\\***.key'))
    # app.run('0.0.0.0', debug=True, port=5000, ssl_context=('path/xxxx.pem', 'path/xxxx.key'))

在 win 中，我们使用了 3 个开放端口，每一个端口都可以被外界访问，并且，前后端，我们走的都是 https 协议。

另外，在 win server 中，想要 python 类似于 ubuntu 的 nohup 可以使用

start /min python main.py
请我喝杯咖啡吧～