Web项目部署指南
Web项目部署指南
本文记录了部署Vue项目到阿里云服务器上的过程,其中云服务器的操作系统是CentOS 7,Web服务器用的是nginx。因为项目涉及发送异步请求,而由Flask编写的后端应用监听的并非80端口,存在跨域的问题,在部署Vue项目的过程中给我带来了困扰,因此将部署Flask应用的过程一并记录。
安装和配置nginx
-
安装并启动nginx
yum install -y nginx systemctl start nginx systemctl status nginx
-
上传打包后的项目到
/var/www/
目录mkdir -p /var/www cd /var/www && unzip dist.zip chown -R nginx:nginx /var/www/
这里需要注意的是需要使用
chown
命令修改目录/var/www/
的所有者是nginx,否则通过浏览器访问应用时会提示Internal Server Error,而通过查看nginx日志文件发现这一异常状况是由权限问题引起的:“stat() "xxx" failed (13: Permission denied)” -
配置nginx
-
首先要通过配置安全组规则,确保云服务器允许公网通过HTTP、HTTPS等服务访问实例
-
修改nginx配置文件
vi /etc/nginx/nginx.conf
http { // 省略部分内容 server { listen 80; server_name xxx.xxx.xxx.xxx; location / { root /var/www/dist/; try_files $uri $uri/ @router; index index.html index.htm; } location @router { rewrite ^.*$ /index.html last; } } }
-
重启nginx
nginx -s reload
部署Flask项目
项目采用Gunicorn作为WSGI容器,用Supervisor管理进程,另外还用到了部分Flask插件,比如flask-cors。
-
准备Python环境
conda create --name flask Python conda activate flask conda install flask pip install flask-cors pip install gunicorn pip install supervisor
-
配置supervisor
# 创建目录,初始化配置文件 mkdir -p /usr/supervisor/supervisord.d echo_supervisord_conf > /usr/supervisor/supervisord.conf # 修改supervisor配置文件 vi /usr/supervisor/supervisord.conf
[include] files = /usr/supervisor/supervisord.d/*.conf
-
配置项目
vi /usr/supervisor/supervisord.d/appname.conf
[program:appname] ; 每个program就是一个或一组进程 directory = /root/Programs/app-folder/ ; 指定项目所在目录 command = /opt/miniconda/envs/flask/bin/gunicorn -w 4 -b 0.0.0.0:5000 main:app ; 启动命令 autorestart = true ; 设置在Supervisord启动的时候也自动启动 startsecs = 5 ; 启动5秒后没有异常退出,就当作已经正常启动了 startretries = 3 ; 启动失败自动重试次数,默认是3次 user = root redirect_stderr = true
这里注意不要配置
nodaemon=True
,否则会引发异常:“FATAL Exited too quickly (process log may have details)” -
启动supervisor
# 启动supervisor supervisord -c /usr/supervisor/supervisord.conf # 查看supervisor supervisorctl -c /usr/supervisor/supervisord.conf
-
解决跨源问题
# 修改nginx配置文件 vi /etc/nginx/nginx.conf
http { // 省略部分内容 server { listen 80; server_name xxx.xxx.xxx.xxx; // 省略部分内容 location @router { rewrite ^.*$ /index.html last; } // 当请求跨域时配置端口转发 location /api { proxy_pass http://xxx.xxx.xxx.xxx:5000/api; } } }