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

最后通过添加硬编码解决

相关推荐
岁岁种桃花儿9 小时前
详解 Kubernetes 命令:kubectl exec -it nginx -- bash 及实战场景
运维·nginx·kubernetes
Q_Q5110082859 小时前
python+django/flask+uniapp基于微信小程序的瑜伽体验课预约系统
spring boot·python·django·flask·uni-app·node.js·php
VueVirtuoso9 小时前
前后端部署 + Nginx 配置 + Cloudflare 全攻略(通俗易懂版)
运维·nginx
小白银子9 小时前
零基础从头教学Linux(Day 42)
linux·运维·服务器·网络·nginx
初学者_xuan10 小时前
零基础新手小白快速了解掌握服务集群与自动化运维(七)Nginx模块--Nginx反向代理与缓存功能(二)
运维·nginx·自动化
看好多桂花树10 小时前
Nginx SSL/TLS 配置
网络·nginx·ssl
岚天start10 小时前
Nginx配置中location和proxy_pass指令尾部是否带斜杠的区别
运维·nginx·centos·proxy_pass·location·uri·斜杠
xx.ii10 小时前
54.Nginx部署与lnmp的部署
运维·nginx·负载均衡
luckys.one12 小时前
第12篇|[特殊字符] Freqtrade 交易所接入全解:API、WebSocket、限频配置详解
网络·ide·python·websocket·网络协议·flask·流量运营
用户516816614584113 小时前
使用[DeepSeek]快速定位nginx前端部署后报错:500 Internal Server Error nginx/1.29.1
nginx·deepseek