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

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

作者:边海聆音 时间: 2020-07-26 07:02:33
边海聆音 2020-07-26 07:02:33

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

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

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

项目结构

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

其中.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 // 等待几分钟就会部署上线

 

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

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

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

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

谈一谈

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

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

 

 

 

 

 

相关文章

勿删,copyright占位
分享文章到微博
分享文章到朋友圈

上一篇:sa密码不满足强密码要求_恢复丢失的SA密码

下一篇:【Hoxton.SR1版本】Spring Cloud Eureka服务注册中心集群搭建

您可能感兴趣

华为云40多款云服务产品0元试用活动

免费套餐,马上领取!
CSDN

CSDN

中国开发者社区CSDN (Chinese Software Developer Network) 创立于1999年,致力为中国开发者提供知识传播、在线学习、职业发展等全生命周期服务。