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

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

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 内容:

python 复制代码
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 内容:

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 内容:

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 内容:

javascript 复制代码
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

css 复制代码
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

python 复制代码
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的路由,导致的样式不能正常显示,因此需要着重解决该问题。

最后通过添加硬编码解决

相关推荐
CRMEB定制开发2 小时前
【实战】CRMEB Pro 企业版安装教程(附 Nginx 反向代理配置 + 常见问题解决)
nginx·商城系统·微信商城·crmeb
亚力山大抵2 小时前
实验六-使用PyMySQL数据存储的Flask登录系统-实验七-集成Flask-SocketIO的实时通信系统
后端·python·flask
孙克旭_20 小时前
day045-nginx跳转功能补充与https
linux·运维·nginx·https
博同学1 天前
Nginx + ELK + Grafana 全球访问热力图
nginx·elk·grafana
RW~1 天前
Minio安装配置,桶权限设置,nginx代理 https minio
运维·nginx·https·minio
CodeWithMe1 天前
Nginx入门进阶:从零到高手的实战指南
运维·nginx
Ahlson1 天前
【fnNAS】docker的nginx配置html
nginx·docker·容器·fnnas
何双新1 天前
第 1 课:Flask 简介与环境配置(Markdown 教案)
后端·python·flask
斯普信专业组1 天前
K8s环境下基于Nginx WebDAV与TLS/SSL的文件上传下载部署指南
nginx·kubernetes·ssl
MO2T1 天前
使用 Flask 构建基于 Dify 的企业资金投向与客户分类评估系统
后端·python·语言模型·flask