一个单页应用的部署

Posted 2021-05-01 W0nd3rb0y

前言

为一个项目开发后台管理界面，前端使用 vue + elemental ui，后端使用 Flask 写 API

起因

在开发调试过程中遇到了跨域的问题，先是根据以往的经验使用了一个浏览器插件设置请求头，但是在 OPTION 请求环节会遇到严重的延迟问题。本着包子性格忍了一个礼拜，实在不堪其烦，开始探索更好的方案。早该如此，任何事情都应该追求最佳实践。

前端部分

使用 vue-cli 提供的 proxy-table 功能1

dev: {
        env: require('./dev.env'),
        port: 8080,
        autoOpenBrowser: true,
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
        proxyTable: {
            '/api':{
                target:'http://localhost:5050',
                changeOrigin:true,
                pathRewrite:{
                    '^/api':''
                }
            },
            '/ms':{
                target: 'https://www.easy-mock.com/mock/592501a391470c0ac1fab128',
                changeOrigin: true
            }
        },
        // CSS Sourcemaps off by default because relative paths are "buggy"
        // with this option, according to the CSS-Loader README
        // (https://github.com/webpack/css-loader#sourcemaps)
        // In our experience, they generally work as expected,
        // just be aware of this issue when enabling this option.
        cssSourceMap: false
    }

开发环境下，在代码中形如/api/book/all的调用将转换为 localhost:8080/book/all，去掉 /api前缀。经过测试，没有之前遇到的延迟问题。生产环境下，请求 URL 并不会发生改变，依然保留了前缀。这就需要后端配合。

后端

后端统一使用 Flask Blueprint 配置 url 前缀

    app.register_blueprint(login_routes, url_prefix='/login')
    app.register_blueprint(books_routes, url_prefix='/book')
    app.register_blueprint(user_routes, url_prefix='/user')
    app.register_blueprint(order_routes, url_prefix='/order')
    app.register_blueprint(board_routes, url_prefix='/board')

注意我依然没有加上/api前缀。因为我觉得每一条路由信息都加上这么几个字母，会显得十分冗余和低效。由于生产环境使用 nginx 部署，显然可以在 nginx 中将入口直接改为 /api

location /api {
        # 代理地址
        proxy_pass http://127.0.0.1:5050/;
        proxy_read_timeout 300;
        proxy_connect_timeout 300;
        proxy_redirect     off;
        proxy_set_header   X-Forwarded-Proto $scheme;
        proxy_set_header   Host              $http_host;
        proxy_set_header   X-Real-IP         $remote_addr;
    }

5050 端口是对外关闭的。如此一来，前端代码中的请求 URL，在两个环境中便不需要任何修改。

没完

还有一处地方需要修改。之前的首页由 Flask 返回

@app.route('/')
def index():
    return render_template('index.html')

按照上面的方案，首页入口岂不是会变成 XXX.com/api解决方法也很简单，nginx 代理所有静态资源，然后将 flask 主路由删除。将原本 flask 项目目录中的静态资源和 index.html 软链接至单独目录，并且配置 nginx 2

root /home/ubuntu/www/XXXXadmin-static;
location / {
        # 静态文件
        try_files $uri $uri/ =404;
    }

软链接的原因是，保留的 git 版本管理的同时避免将整个 flask 项目加入 root 目录。

总结

最后达成的效果，是前端代码编译之前无需切换请求 URL，Flask 完全负责 Api，nginx 代理单页和 js 等静态资源。

参考链接