Web项目部署指南

Web项目部署指南

本文记录了部署Vue项目到阿里云服务器上的过程，其中云服务器的操作系统是CentOS 7，Web服务器用的是nginx。因为项目涉及发送异步请求，而由Flask编写的后端应用监听的并非80端口，存在跨域的问题，在部署Vue项目的过程中给我带来了困扰，因此将部署Flask应用的过程一并记录。

• Web项目部署指南
  • 安装和配置nginx
  • 部署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

1. 首先要通过配置安全组规则，确保云服务器允许公网通过HTTP、HTTPS等服务访问实例

2. 修改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;
          }
      }
  }
  

参考资料

• vue项目部署到nginx
• 详解Supervisor进程守护监控
• 安全组应用案例