CSS не распознается при обслуживании с FastAPI

Question

У меня есть приложение FastAPI и индексный файл, css и js, которые работают при прямом открытии, но я не могу заставить файл css отображаться при обслуживании с FastAPI. Я пробовал устранять неполадки на случай, если проблема связана с CORS, я попытался переупорядочить файлы, чтобы они находились в одном или разных каталогах (и соответственно повторно указали путь href), но ничего не сработало. На данный момент это мой каталог:

working_directory
└── app
|__ index.html
    ├── style.css
    └── main.js

Если домашний маршрут приложения настроен так:

file_path = "index.html"

@app.get("/")
async def home():
    return FileResponse(file_path)

Нужно ли мне также указать путь к файлу css внутри переменной file_path? Форматы, которые я пробовал, пока не работали, и ошибки с FastAPI не так хорошо документированы, как, например, с Flask или Django.

Моя ошибка выглядит так: GET http://localhost: 8000 / style. css net :: ERR_ABORTED 404 (не найдено)

Как заставить веб-приложение распознавать мой стиль. css файл?

Answer 1

Вам действительно нужно обслуживать файлы c stati. Ниже показан пример использования FastAPI. В сценарии «реального мира» вы, вероятно, оставите обслуживание этих файлов на обратном прокси, например nginx.

Рассмотрим следующую структуру:

src
  app/main.py
  static/css/main.css
  templates/index.html

main.py

from fastapi import FastAPI, Request
from fastapi.staticfiles import StaticFiles
from fastapi.templating import Jinja2Templates
from pathlib import Path


app = FastAPI()

app.mount(
    "/static",
    StaticFiles(directory=Path(__file__).parent.parent.absolute() / "static"),
    name="static",
)

templates = Jinja2Templates(directory="templates")


@app.get("/")
async def root(request: Request):
    return templates.TemplateResponse(
        "index.html", {"request": request}
    )

индекс. html

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