nginx部署前端flask项目
时间: 2025-01-17 08:58:37 浏览: 39
### 使用 Nginx 部署基于 Flask 的前端项目
#### 1. 准备工作
为了成功部署包含 Flask 框架的前端项目,需先完成必要的准备工作。确保已安装 Python 和 pip 工具,并通过 pip 安装 Flask 及其他所需的依赖库[^1]。
```bash
pip install flask gunicorn
```
对于前端部分,假设使用 Vue.js 构建的应用已经编译完毕并生成了 `dist` 文件夹。此文件夹中的静态资源将由 Nginx 提供服务[^3]。
#### 2. 启动 Flask 应用
创建一个简单的 Flask 应用来处理 API 请求或其他后端逻辑:
```python
from flask import Flask, jsonify
app = Flask(__name__)
@app.route('/api/data')
def get_data():
return jsonify({"message": "Hello from Flask!"})
if __name__ == '__main__':
app.run()
```
保存上述代码至名为 `app.py` 的文件中。接着可以利用 Gunicorn 来作为 WSGI HTTP Server 运行该应用:
```bash
gunicorn --workers=3 --bind unix:myproject.sock -m 007 wsgi:app
```
这里需要注意的是,在生产环境中通常会采用 Unix 域套接字而非默认绑定 IP 地址的方式启动 Gunicorn 实例。
#### 3. 配置 Nginx
编辑 `/etc/nginx/sites-available/default` 或者新建站点配置文件来设置反向代理规则和服务静态资源路径:
```nginx
server {
listen 80;
server_name your_domain_or_ip;
location / {
root /path/to/your/vue/dist; # 将此处替换为实际Vue打包后的dist目录位置
try_files $uri $uri/ /index.html;
}
location /api/ {
proxy_pass http://unix:/run/myproject.sock; # 对应Gunicorn监听的Unix域套接字地址
include proxy_params;
proxy_set_header Host $host;
}
}
```
这段配置使得所有以 `/api/` 开头的请求都会被转发给后台运行着的 Flask 应用;而其他的 URL 则会被视为静态页面请求交由 Nginx 处理。
最后重启 Nginx 让更改生效:
```bash
sudo systemctl restart nginx
```
这样就完成了整个项目的部署流程,访问指定域名或IP即可看到正常工作的前端界面并与之交互调用后端接口数据。
阅读全文
相关推荐


















