flask和vue前后端部署，步骤记录

前端

本地前端项目，压缩包上传至服务器，npm install，npm run build生成的dist---记住路径/var/www/html,  后面记住nginx配置要用这个静态资源的路径： /var/www/html/dist

6.在正确生成dist之后,配置nginx

 

7.nginx配置如下

#这个是nginx+vue的虚拟主机
server {
listen 80;
server_name localhost;
error_page 404 /404.html;
#请求来到这里时,返回vue的页面
location / {
root  /var/www/html/dist;
index index.html;
try_files $uri $uri/ /index.html;
}
}

#这个是nginx反向代理,转发vue请求给drf的虚拟主机
server {
listen 9500;  9500是vue前端js中api端口，注意检查是否修改一致
server_name localhost;
location / {
include uwsgi_params;
uwsgi_pass 0.0.0.0:11111;（云服务器ip）11111此端口需要与uwsgi.ini中后端口保持一致
}

}

 

8.此时访问vue地址即可,看到

后端

项目先在本地命令终端：pip freeze > requirements.txt

后端代码上传至服务器，自己建个文件夹存放

新建虚拟环境，安装刚才requirements文件

在项目根目录新建uwsgi.ini,配置内容大致：

[uwsgi]

http  = :11111


# the base directory (full path)
chdir = /opt/onlinewww/MyFlask

wsgi-file = /opt/onlinewww/MyFlask/manage.py
#  wsgi file
callable = app
# wsgi-file = myproject/wsgi.py

# process-related settings
# master
master = true

# maximum number of worker processes
processes = 2

# ... with appropriate permissions - may be needed
# chmod-socket    = 664
# clear environment on exit
vacuum = true

#daemonize = /home/

#pidfile = /home/lin/Desktop/lin/code/workspace/partner/uwsgi_pid.log

执行启动后端服务命令：uwsgi --ini uwsgi.ini

 

Supervisor安装和监控

/etc/supervisord.conf内容：

 

[supervisord]
logfile = /tmp/supervisord.log
logfile_maxbytes = 50MB
logfile_backups=10
loglevel = info
pidfile = /tmp/supervisord.pid
nodaemon = false
minfds = 1024
minprocs = 200
umask = 022
identifier = supervisor
directory = /tmp
nocleanup = true
childlogdir = /tmp
strip_ansi = false

[supervisorctl]
serverurl = unix:///tmp/supervisor.sock
prompt = mysupervisor


[program:MyFlask]

# 启动命令入口
command=/usr/bin/uwsgi /opt/onlinewww/MyFlask/uwsgi.ini
directory=/opt/onlinewww/MyFlask
#运行命令的用户名
user=root
autostart=true #跟随Supervisor一起启动
autorestart=true # 挂掉之后自动重启
#日志地址
#stdout_logfile=/var/www/app/logs/uwsgi_supervisor.log

启动：supervisord -c /etc/supervisord.conf