【Flask公网部署】采用Nginx+gunicorn解决Flask框架静态资源无法加载的问题
解决Flask框架静态资源无法加载的问题
- 1.【解决的问题】
- 2. Flask应用的完整示例，包含背景图、CSS和JS的静态文件部署：
- 2.1 项目结构：
- 2.2 app.py 内容：
- 2.3 templates/index.html 内容：
- 2.4 static/css/style.css 内容：
- 2.5 static/js/script.js 内容：
- 3. Flask应用的本地部署运行示例
- 4. 部署至公网，本人采用的是https://www.deepln.com/租的算力平台进行部署。上传flask工程到服务器上，直接运行python app.py，发现出现的网站和预期的不一致，究其原因是由于静态文件无法加载，导致的该问题的出现。
- 5.采用生产服务器Nginx+gunicorn工具配置解决静态文件无法加载的问题
- 5.1 安装Nginx
- 5.2 配置Nginx反向代理
- 5.3 启用配置
- 6.Gunicorn运行Flask
- 6.1 安装Gunicorn
- 6.2 创建WSGI入口文件
- 6.3 启动Gunicorn
- 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的路由，导致的样式不能正常显示，因此需要着重解决该问题。
最后通过添加硬编码解决
