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

最后通过添加硬编码解决

相关推荐
@昵称不存在7 小时前
Flask input 和datalist结合
后端·python·flask
就改了9 小时前
Nginx 动静分离配置(详细版)
nginx
未来之窗软件服务19 小时前
基于 Nginx 与未来之窗防火墙构建下一代自建动态网络防护体系—仙盟创梦IDE
网络·ide·nginx·服务器安全·仙盟创梦ide·东方仙盟
java1234_小锋20 小时前
【NLP舆情分析】基于python微博舆情分析可视化系统(flask+pandas+echarts) 视频教程 - 热词评论查询功能实现
python·自然语言处理·flask
先生沉默先20 小时前
Docker常用命令详解:以Nginx为例
nginx·docker
正宗咸豆花1 天前
在 Azure 中配置 SMS 与 OTP
microsoft·flask·azure
苹果醋31 天前
iview中实现点击表格单元格完成编辑和查看(span和input切换)
运维·vue.js·spring boot·nginx·课程设计
飛_1 天前
【Word Press基础】创建一个动态的自定义区块
运维·nginx·html·word press
程序员黄老师1 天前
在 Windows 使用 Nginx/HAProxy 实现负载均衡
windows·nginx·负载均衡
贺贺丿1 天前
Docker4-容器化企业级应用
linux·nginx·docker·云原生·eureka·tomcat·ssh