Python Flask + Vue.js + AWS elastic beanstalk 实现全栈快速上线部署

AWS Elastic beanstalk 是一项Web快速部署与持续交付服务

只需要按照亚马逊的要求在开发环境进行一些微小的修改，就可以直接将开发环境和生产环境连接，一键完成生产环境部署，还是很方便的。

我将使用最简单的代码完成一次快速部署，即 ： 开发-部署-公网访问

项目结构

其中.elasticbeanstalk是Elastic beanstalk的配置文件，在使用eb cli 中的eb init命令后会创建。

front是项目的vue.js前端部分代码。

static是前端打包后静态文件的存储位置，templates存放前端打包后的入口index文件。

.ebigore是使用eb cli时eb create 打包时忽略的文件，这里我只需要忽略front目录和Pipfile和Pipfile.lock就可以了。

当使用eb create 上传代码的时候，只需要保存requirements.txt就可以了，elastic beanstalk会自动读取并安装其中的依赖包。

Flask 部分代码：

from flask import Flask, render_template, jsonify

application = Flask(__name__)

@application.route('/',methods=["GET"])
def index():
    return render_template('index.html')

@application.route('/get_something',methods=["GET"])
def get_something():
    return jsonify( { "code":200,"msg":'you getted my massege',"data": {} } )

if __name__ == '__main__':
    application.run()

后端只需要可以访问与交互就可以了。

Vue.js 部分代码

const path = require('path')

module.exports = {
  assetsDir: '../static', //输出静态文件位置
  publicPath: undefined,
  outputDir: path.resolve(__dirname, '../templates'),// 输出index入口文件位置
  runtimeCompiler: undefined,
  productionSourceMap: undefined,
  parallel: undefined,
  css: undefined,
  devServer: {
    host: 'localhost',
    port: 8080,
    https: false,
    // 以上的ip和端口是我们本机的;下面为需要跨域的
    proxy: { // 配置跨域
      '/get_something': {
        target: 'http://localhost:5000', // 这里后台的地址模拟的;应该填写你们真实的后台接口
        ws: true,
        changOrigin: true // 允许跨域
      }
    }
  }
}

前端代码更简单，就是Vue的初始代码，加了几个按钮交互而已，重要的是在 yarn build 时候的输出打包文件位置要对应到Flask的static目录和templates目录。

打包上线

为了迅速可以在公网访问到我们的项目，可以下载使用eb cli，这个是elastic beanstalk提供的快速配置项目的命令行工具。

使用也很简单，直接参考教程安装使用就可以了.https://docs.aws.amazon.com/zh_cn/elasticbeanstalk/latest/dg/eb-cli3.html

 

eb init //创建环境
// 开发完成后
eb create test-app // 等待几分钟就会部署上线

 

部署完成后再项目管理页面会有一个URL，这个就是亚马逊自动分配的一个公网地址，可以通过它访问到开发的项目。

已经可以通过公网访问并且正确交互了。

谈一谈

AWS Elastic beanstalk最大的卖点其实还不是快速部署，而是自动拓展，也就是说当当前服务器压力很大的时候，他会自动完成扩展服务器的工作，保持服务器负载再合理范围内。

但是Elastic beanstalk也有不是很方便的地方，就是对于Web服务器网关的配置部分的教程不够清晰，它默认使用Nginx+Gunicorn的服务端配置，关于Nginx的配置部分文档中基本没有，Gunicorn部分也只是稍微提了一嘴....