FastAPIwithnginx不提供HTTPS中的靜態檔案

我有一個小型的測驗 FastAPI Web 應用程式，它提供一個簡單的 HTML 頁面，該頁面需要位于靜態檔案夾中的 css 樣式表。它安裝在 Linode 服務器 (Ubuntu 20.04 LTS)、nginx、gunicorn、uvicorn workers 和 supervisorctl 上。我已經使用 certbot 添加了證書。

該應用程式在 http 中運行良好，但無法訪問 https 中的靜態檔案。在 http 中訪問時，所有基于靜態的功能都可以使用，但是當使用 https 訪問時，它缺少 css 樣式表中的所有樣式。我需要讓它作業，這樣我才能加載一個更復雜的應用程式，它需要 css 和其他靜態檔案夾存盤功能。

檔案結構為：

/home/<user_name>/application
- main.py
- static
   |_ css
   |_ bootstrap
- templates
   |_ index.html

主要.py：

import fastapi
import uvicorn
from fastapi import Request
from fastapi.responses import HTMLResponse
from fastapi.staticfiles import StaticFiles
from fastapi.templating import Jinja2Templates


api = fastapi.FastAPI()

api.mount('/static', StaticFiles(directory='static'), name='static')
templates = Jinja2Templates(directory="templates")


@api.get('/')
@api.get('/index', response_class=HTMLResponse)
def index(request: Request):
    message = None
    return templates.TemplateResponse("index.html", {"request": request,
        'message': message})


if __name__ == '__main__':
    uvicorn.run(api, port=8000, host='127.0.0.1')

nginx 位于 /etc/nginx/sites-enabled/<my_url>.nginx

server {
    listen 80;
    server_name www.<my_url>.com <my_url>.com;
    server_tokens off;
    charset utf-8;

    location / {
        try_files $uri @yourapplication;
    }

    location /static {
        gzip            on;
        gzip_buffers    8 256k;

        alias /home/<user_name>/application/static;
        expires 365d;
    }


    location @yourapplication {
        gzip            on;
        gzip_buffers    8 256k;

        proxy_pass http://127.0.0.1:8000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-Protocol $scheme;
    }
  }

server {
    listen              443 ssl;
    server_name         www.<my_url>.com;
    ssl_certificate /etc/letsencrypt/live/<my_url>.com/fullchain.pem; # mana>
    ssl_certificate_key /etc/letsencrypt/live/<my_url>.com/privkey.pem; # ma>
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

    location / {
        try_files $uri @yourapplication;
    }

  location /static {
        gzip            on;
        gzip_buffers    8 256k;

        alias /home/<user_name>/application/static;
        expires 365d;
    }

    location @yourapplication {
        gzip            on;
        gzip_buffers    8 256k;

        proxy_pass http://127.0.0.1:8000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-Protocol $scheme;
    }
}

并且正在使用主管腳本服務：

[program:api]
directory=/home/<user_name>/application
command=gunicorn -b 127.0.0.1:8000 -w 4 -k uvicorn.workers.UvicornWorker main:api
environmentenvironment=PYTHONPATH=1
autostart=true
autorestart=true
stopasgroup=true
killasgroup=true
stderr_logfile=/var/log/app/app.err.log
stdout_logfile=/var/log/app/app.out.log

使用 url_for 在 html 中呼叫 css 樣式表，如下所示：

<link href="{{ url_for('static', path='/css/ATB_style.css') }}" rel="stylesheet">

I have tried a whole host of modifications to the location /static block in nginx including:

• adding slash after static in either line or both
• trying to add https://static or https://www.<my_url>.com/home/<my_url>/application/static
• adding and removing the location static from the http and https lines
• changing proxy_pass to https://127.0.0.1:8000;
• added root /home/<user_name>/application to the server section

I have loaded this server twice, once letting certbot modify the nginx file the second, and current configuration, where I did it manually. I am at a complete loss on what to do.

uj5u.com熱心網友回復：

感謝@AdramKhan 的評論解決了這個問題。原來我需要在我的 html 頁面中添加一個元行，以允許使用 https 訪問 css 樣式表：

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

uj5u.com熱心網友回復：

我認為您希望服務器處理它。如果您只是在埠 80 上設定一個單獨的塊以將所有請求永久轉換為 443 (HTTPS)，您會很好：

server {
    listen 80;
    server_name yourserver.com;
    return 301 https://yourserver.com$request_uri;
}

server {
    listen 443 ssl http2;
    server_name yourserver.com;
    ...
}```

標籤：nginx https fastapi uvicorn

上一篇：應用在AcceptTcpClient()后無回應

下一篇：使用ConfigMap向NGINXIngress添加標頭不起作用