Vue + Flask 实战开发系列（十）
Vue + Flask 实战开发系列（十）
欢迎来到我的“Vue + Flask”系列的第十部分。这也是本系列最后一部分。在次内容中，我们将把我们的项目部署在一个生产服务器上。在部署应用之前，需要在服务器上安装好nginx。关于nginx的安装本文不做介绍。我们先从前端的部署开始。
现在让我们为Vue项目创建一个nginx配置文件。假设我们的项目目录是/var/www/vue-flask-app。以下是 nginx 的 dist 目录配置:
server {
listen 80;
root /var/www/vue-flask-app/dist;
index index.html;
location / {
try_files $uri $uri/ = 404;
add_header Cache-Control "no-cache";
}
location /static {
expires 1y;
add_header Cache-Control "public";
}
}root指令告诉 nginx 项目根目录的位置。Index指令用于配置当客户端请求以/结尾的 URL 或者没有找到路径时返回的默认文件。Vue 项目的主文件是 index. html，所以我们需要使用这个文件。完成上面的配置后，重新启动nginx服务。
$ nginx -s reload重启成功后，你去访问的时候，应该可以看到登录页面。
Vue端现在已经可以正常工作了，现在让我们来看看Flask API。在开发过程中使用了 Flask 开发 web 服务器，但是这个服务器不够健壮，不适合生产使用。我们需要的是一个生产级的 web 服务器。在本文中，我将使用 Gunicorn，它需要安装在我们的 API 项目的虚拟环境中:
(venv) $ pip install gunicorn用 Gunicorn 运行我们的 API 项目的命令如下:
$ gunicorn -b 127.0.0.1:5000 api:app由于此应用程序将在生产服务器上运行，因此我们必须确保它始终在运行，因此从命令行启动应用程序实际上是不够的。
Linux 有几个进程监视系统，专门用于保持服务的运行。在大多数现代 Linux 发行版中，systemd 都是用于此目的的。现在让我们在/etc/systemd/system/目录下，创建一个vue-flask-app.service配置文件，然后输入下面内容：
[Unit]
Description=A simple Flask API
After=network.target
[Service]
User=root
WorkingDirectory=/var/www/vue-flask-app/api
ExecStart=/var/www/vue-flask-app/api/venv/bin/gunicorn -b 127.0.0.1:5000 api:app
Restart=always
[Install]
WantedBy=multi-user.target完成上面的配置后，重新加载systemd:
$ sudo systemctl daemon-reload如果一切都正常，现在你就可以启动Flask API项目了:
$ sudo systemctl start vue-flask-app如果你想验证服务是否正在运行，你可以使用 status 命令:
$ sudo systemctl status vue-flask-app
● react-flask-app.service - <a description of your application>
Loaded: loaded (/etc/systemd/system/react-flask-app.service; disabled; vendor preset: enabled)
Active: active (running) since Sat 2020-07-28 16:54:09 UTC; 17h ago
Main PID: 10449 (gunicorn)
Tasks: 2 (limit: 1152)
CGroup: /system.slice/vue-flask-app.service
├─10449 /var/www/vue-flask-app/api/venv/bin/python3 /var/www/vue-flask-app/api/venv/bin/gunicorn -b 127.0.0.1:5000 api:app
└─10493 /var/www/vue-flask-app/api/venv/bin/python3 /var/www/vue-flask-app/api/venv/bin/gunicorn -b 127.0.0.1:5000 api:app
Mar 28 16:54:09 demobox systemd[1]: Started <a description of your application>.
Mar 28 16:54:10 demobox gunicorn[10449]: [2020-07-28 16:54:10 +0000] [10449] [INFO] Starting gunicorn 20.0.4
Mar 28 16:54:10 demobox gunicorn[10449]: [2020-07-28 16:54:10 +0000] [10449] [INFO] Listening at: http://127.0.0.1:5000 (10449)
Mar 28 16:54:10 demobox gunicorn[10449]: [2020-07-28 16:54:10 +0000] [10449] [INFO] Using worker: sync
Mar 28 16:54:10 demobox gunicorn[10449]: [2020-07-28 16:54:10 +0000] [10493] [INFO] Booting worker with pid: 10493通过status命令，可以看到服务的运行状态，如果服务运行出现错误，也可以看到具体的错误信息。接下来，我们使用 nginx 作为 API 服务的反向代理。继续在ngnix配置文件中，添加如下内容：
location /api {
include proxy_params;
proxy_pass http://localhost:5000;
}添加完配置内容，重新加载nginx。
$ sudo systemctl reload nginx现在，在刷新页面，前端就可以调用api正常登录了。到此这个项目已经完全配置部署好了！