3d网页游戏_疫情防控工作新闻发布会_网络舆情分析报告模板_谷歌浏览器搜索引擎入口

解决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_templateapp = 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;}# 动态请求转发给Flasklocation / {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 appif __name__ == "__main__":app.run()

6.3 启动Gunicorn

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

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

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

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