FastAPI: HTML 파일에서 CSS/JS/이미지를 동시에 렌더링하는 방법은 무엇입니까?

Question

FastAPI에서 HTML 파일을 렌더링하는 데 문제가 있습니다.

main.py 파일

으아아아

uvicorn을 사용하여 위 파일을 실행하면 http://127.0.0.1:8765/에서 HTML 파일을 렌더링할 수 있지만 CSS, js, 이미지와 같은 정적 파일은 렌더링되지 않습니다.

index.html: HTML 파일용 코드(Angular JS로 구축)

으아아아

파일 구조:

으아아아

브라우저 콘솔을 열면 다음과 같이 표시됩니다.

CSS/js는 정적 포함 없이 렌더링되어야 합니다(예: http://127.0.0.1:8765/styles.87afad25367d1df4.css). 하지만 http://127.0.0.1:8765/static/styles.87afad25367d1df4 .css에서 렌더링됩니다. 브라우저에 로드하고 실행합니다.

이 문제를 해결하는 방법을 잘 모르겠습니다. 도움을 주시면 대단히 감사하겠습니다.

업데이트: 더 나은 설명을 위해 다음 코드를 추가했습니다

main.py

으아아아

이 파일을 test.py 파일의 패키지/모듈로 실행하세요.

으아아아

index.html：

으아아아

파일 구조:

으아아아

Answer 1

먼저, 정적 파일을 제공하기 위해 StaticFiles 时html 标志设置为 True를 사용하는 경우(동적 웹 페이지의 경우 대신 템플릿을 참조하세요), 예:

으아아아

인덱스 페이지를 제공하기 위해 엔드포인트를 정의할 필요는 없습니다. 왜냐하면 html=True 意味着在 HTML 模式下运行您的应用程序；因此，FastAPI/Starlette 会自动加载 index.html — 请参阅 Starlette 文档 静态文件. 또한 추가 엔드포인트가 필요한 경우 애플리케이션에서 엔드포인트를 정의하는 순서가 중요합니다. . 피>

둘째, 설치한 이후 StaticFiles 实例并指定 directory='static'，因此您的静态文件预计将从该目录提供。因此，您所要做的就是将所有静态文件以及 HTML 文件移动到 static 目录中。然后，您应该能够按如下方式提供静态文件（假定您已将 StaticFiles 实例安装到 /，例如 app.mount('/', ...):

으아아아

또는 StaticFiles 实例安装到 /static，例如 app.mount('/static', ...)인 경우(이 답변 참조):

으아아아

귀하의 경우에는 HTML 문서의 모든 StaticFiles 实例安装到 /，因此静态文件仍以 static 前缀加载的原因，例如 http://127.0.0.1:8000/static/someScript.js 只是因为您添加了 상대 URL에 URL을 사용했기 때문입니다. 따라서 HTML 파일에서 다음 줄을 제거 해야 합니다.

으아아아