# app1

**Repository Path**: qinly_work/app1

## Basic Information

- **Project Name**: app1
- **Description**: flaskapp demo
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-02-14
- **Last Updated**: 2023-05-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

    项目准备
        后端flask
        前端vue
    安装gunicorn
    解决跨域
    项目上传到服务器（虚拟机也行）
        上传到git
        克隆到自己制定的文件夹
    配置虚拟环境
        生成虚拟环境
        激活虚拟环境
        安装第三方库
    配置nginx
    配置service

好了，完结了，上面的各项内容都是一切从简。深入理解还是要看文档。
————————————————
版权声明：本文为CSDN博主「御前吹水」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/not_so_bad/article/details/122286564


flask+vue
systemctl+nginx+gunicorn+virtualenv的架构进行部署的
gunicorn是一个 Python 的高性能 WSGI HTTP 服务器
启动gunicorn -w 3 -b 127.0.0.1:5000 app:app -k gevent
在架构上是这样的，nginx负责动态的转发和静态文件的直接访问，gunicorn和uwsgi作为网关服务用来解析http请求，后面的flask只是个application而已，没有server的服务特征。

在服务器能正常通信后，Werkzeug提供的的WSGI并不适合生产环境，调试完代码第一件事就找个独立WSGI容器。
我们这里选择uWSGI和gunicorn，相对来说这两个比gevent更适合大型项目，uWSGI出现的比较早，gunicorn是从Ruby的unicorn移植而来，配置也简单。为了熟悉uwsgi我都尝试一下吧
pip install uwsgi
然后运行
uwsgi --socket 0.0.0.0:5000 -w main:app

[uwsgi]
module = main:app
#用以启动程序名
master = true
processes = 4
#子进程数量
chdir = /root/WePub/wepub
#python启动程序目录
socket = /root/WePub/wepub/wepub_uwsgi.sock
#uwsgi 启动后所需要创建的文件，和 Nginx 通信，配置 Nginx 时用
logto = /root/WePub/wepub/%n.log
chmod-socket = 660
#赋予 .sock 文件权限与 Nginx 通信
vacuum = true
http = 0.0.0.0:5000
#http地址和端口

保存后运行：
uwsgi --ini wepub_uwsgi.ini

gunicorn
$ pip install gunicorn
运行
$ gunicorn -w 4 -b 0.0.0.0:8000 main:app
其中-w 是--workers是定义同步worker的数量，--bind为主机地址和端口，不用异步的话这就够了 

uwsgi做异步好一些，gunicorn简单部署

wepub:
server {
    listen  80;
    server_name _;

    location / {
    include      uwsgi_params;
    uwsgi_pass unix:/root/WePub/wepub/wepub_uwsgi.sock;
    }
}



gun NGINX配置
server {
        listen       80 default_server;
        listen       [::]:80 default_server;
        server_name  _;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        location / {
                root /root/projects/csdnblog/front/dist;
                index index.html;
                try_files $uri $uri/ /index.html;
        }  

        location ^~/api {
                proxy_pass http://127.0.0.1:5000;
        }

    }

===========
常用命令
在命令行里执行下下面语句生成requirements.txt文件，可以记录安装的python包
pip freeze > requirements.txt

@app.route('/api')
加多一个api的原因是为了方便nginx做路由的转发，用来区分来自前后端的请求。


在flask项目里面安装vue
vue create 命令构建vue项目
创建vueapp目录，用来方式 你的vue项目。
步骤：
vue create  项目名称
例如：vue create vueshop1
手动配置一下选项
进入项目
cd shopapp
启动项目
npm run serve
cd vueshop1  使用doc命令，切换进入到你的项目中
npm run serve  启动项目


npm run build
可以看到build目录下出现了一个dist文件夹


-------
配置虚拟环境

安装virtualenv
pip3 install virtualenv
生成虚拟环境

下面的命令生成虚拟环境，后面是虚拟环境的路径（我进入了项目根目录，然后把虚拟环境创建在项目根目录的上一级目录，即projects文件夹下）
virtualenv ../csdnblog_venv
在这里插入图片描述
激活虚拟环境

进入项目目录，执行：
source ../csdnblog_venv/bin/activate
在这里插入图片描述可以看到命令行前面出现了一个括号括着的刚刚创建的虚拟环境名字，那么此时我们的虚拟环境就启动成功了；所安装的依赖不会污染到全局环境中。
安装第三方库

安装requirements.txt里面指定的包，执行：
pip3 install -r requirements.txt在这里插入图片描述
现在我们就已经得到和本地开发时一样的虚拟环境了。