【Flask公网部署】采用Nginx+gunicorn解决Flask框架静态资源无法加载的问题

解决Flask框架静态资源无法加载的问题

1.【解决的问题】
2. Flask应用的完整示例，包含背景图、CSS和JS的静态文件部署：
3. Flask应用的本地部署运行示例
4. 部署至公网，本人采用的是https://www.deepln.com/租的算力平台进行部署。上传flask工程到服务器上，直接运行python app.py，发现出现的网站和预期的不一致，究其原因是由于静态文件无法加载，导致的该问题的出现。
5.采用生产服务器Nginx+gunicorn工具配置解决静态文件无法加载的问题
6.Gunicorn运行Flask
7.配置完运行发现静态资源还是没有显示

1.【解决的问题】

对于小白的我来说(没有部署网站的经验)。首先辛辛苦苦的在本地上把Flask框架的网页搭建好了，并且本地部署没有问题，结果部署到公网服务器上，CSS、JS、背景图等静态资源都找不到，导致网页无法直视。因此就到了不断查找资料的环节：

2. Flask应用的完整示例，包含背景图、CSS和JS的静态文件部署：

2.1 项目结构：

myflaskapp/
├── app.py
├── static/
│   ├── css/
│   │   └── style.css
│   ├── js/
│   │   └── script.js
│   └── images/
│       └── background.jpg
└── templates/
    └── index.html

2.2 app.py 内容：

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=80, debug=False)

2.3 templates/index.html 内容：

<!DOCTYPE html>
<html>
<head>
    <title>我的Flask应用</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
    <div class="content">
        <h1>欢迎来到我的网站！</h1>
        <p>这是一个Flask部署示例</p>
        <button onclick="showAlert()">点击测试JS</button>
    </div>
    
    <script src="{{ url_for('static', filename='js/script.js') }}"></script>
</body>
</html>

2.4 static/css/style.css 内容：

body {
    margin: 0;
    padding: 0;
    background-image: url('../images/background.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    font-family: Arial, sans-serif;
}

.content {
    background-color: rgba(255, 255, 255, 0.8);
    padding: 30px;
    border-radius: 10px;
    width: 60%;
    margin: 100px auto;
    text-align: center;
}

h1 {
    color: #2c3e50;
}

button {
    padding: 10px 20px;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

button:hover {
    background-color: #2980b9;
}

2.5 static/js/script.js 内容：

function showAlert() {
    alert("JavaScript 运行正常！");
}

3. Flask应用的本地部署运行示例

在这里插入图片描述

4. 部署至公网，本人采用的是https://www.deepln.com/租的算力平台进行部署。上传flask工程到服务器上，直接运行python app.py，发现出现的网站和预期的不一致，究其原因是由于静态文件无法加载，导致的该问题的出现。

在这里插入图片描述

5.采用生产服务器Nginx+gunicorn工具配置解决静态文件无法加载的问题

5.1 安装Nginx

sudo apt update && sudo apt install nginx

5.2 配置Nginx反向代理

创建配置文件 /etc/nginx/sites-available/myflaskapp

server {
    listen 80;
    server_name your_server_ip;  # 或域名

    # 静态文件直接由Nginx处理
    location /static {
        alias /path/to/myflaskapp/static;
        expires 30d;
    }

    # 动态请求转发给Flask
    location / {
        proxy_pass http://127.0.0.1:8000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

5.3 启用配置

sudo ln -s /etc/nginx/sites-available/myflaskapp /etc/nginx/sites-enabled/
sudo nginx -t  # 测试配置
sudo systemctl restart nginx   或者 sudo service nginx restart

6.Gunicorn运行Flask

6.1 安装Gunicorn

pip install gunicorn

6.2 创建WSGI入口文件

新建 wsgi.py

from app import app

if __name__ == "__main__":
    app.run()

6.3 启动Gunicorn

gunicorn -w 4 -b 127.0.0.1:8000 wsgi:app --daemon

7.配置完运行发现静态资源还是没有显示

分析原因是由于网页上的url缺少proxy/8000的路由，导致的样式不能正常显示，因此需要着重解决该问题。
在这里插入图片描述

最后通过添加硬编码解决
在这里插入图片描述