Início / coding / Perguntas / 79531467
Accepted
Daniel Walker
Asked: 2025-03-24 23:25:46 +0800 CST

Servindo o aplicativo React estaticamente do FastAPI

  • 772

Tenho um aplicativo React que estou tentando servir estaticamente do FastAPI. Tenho todos os meus artefatos de build do React na minha staticpasta. Então, meu aplicativo FastAPI se parece com isso:

static/
    assets/
        index-lATvXaZG.js
    index.html
app.py

Em app.py , tenho:

app = FastAPI()
app.mount("/static", StaticFiles(directory="static"), name="react")

@app.get("")
@app.get("/")
@app.get("/index.html")
def serve_index():
    return FileResponse("static/index.html")

No entanto, quando index.htmlé carregado, o cliente compreensivelmente faz uma solicitação GET para /assets/index-lATvXaZG.js. Claro, FastAPI não consegue encontrar isso.

Existe alguma configuração que eu possa colocar no meu aplicativo React (ou, talvez, na minha configuração FastAPI) para alinhar os caminhos?

html

2 respostas

  1. Best Answer

    Devo começar recomendando fortemente que você dê uma olhada nesta resposta e nesta resposta , pois a resposta postada aqui é essencialmente baseada no que está descrito nessas respostas.

    Opção 1

    O problema deve ser facilmente resolvido usando corretamente a StaticFilesinstância para tais propósitos. Isso significa que você deve definir o htmlsinalizador para Truee servir os arquivos estáticos em /route. Dessa forma, você pode acessar o index.htmlsimplesmente digitando na barra de endereços do navegador, por exemplo, http://127.0.0.1:8000/ou http://localhost:8000/. Portanto, quaisquer referências a /assets/whateverdevem funcionar perfeitamente.

    Exemplo

    from fastapi import FastAPI
from fastapi.staticfiles import StaticFiles

app = FastAPI()

app.mount('/', StaticFiles(directory='static', html=True), name='static')

    Mantenha a estrutura dos seus arquivos como está:

    static/
    assets/
        index.js
    index.html
app.py

    Opção 2

    Se você quiser manter sua implementação atual (o que eu não recomendaria) — ou seja, montar a StaticFilesinstância no /staticcaminho, ou seja, app.mount("/static", StaticFiles(directory="static"), name="static")e manter o htmlsinalizador definido como False(que é a configuração padrão) — você pode simplesmente adicionar a seguinte linha no topo de cada arquivo HTML no staticdiretório, ou seja:

    <base href="static/">

    Dessa forma, o prefixo static/deve ser adicionado automaticamente a qualquer referência feita dentro do(s) arquivo(s) HTML e resolver o problema (a static/ausência do início da referência é essencialmente o motivo para não encontrar o assets, já que você os serve na /staticrota— app.mount("/static",...).

    Opção 3

    Alternativamente , se você não quiser adicionar <base href="static/">a cada arquivo, você pode ter um personalizado 404 exception_handler, como demonstrado aqui , e dentro dele obter o caminho da URL do Requestobjeto, como mostrado aqui , e então anexar static/à frente do caminho e retornar um FileResponse(se o arquivo existir). Exemplo:

    from fastapi import FastAPI, Request, HTTPException
from fastapi.responses import FileResponse, PlainTextResponse
from fastapi.staticfiles import StaticFiles
import os


# Same implementation as in your question
app = FastAPI()
app.mount("/static", ...

@app.get("")
...


# The 404 exception handler
@app.exception_handler(404)
async def not_found_exception_handler(request: Request, exc: HTTPException):
    filepath = os.path.join('static/', request.url.path[1:])
    if os.path.isfile(filepath):
        return FileResponse(filepath)
    else:
        return PlainTextResponse("File Not Found",  status_code=404)

    Em vez do costume 404 exception_handler, pode-se usar um endpoint para servir tais arquivos de ativos (semelhante a este ), capturando o caminho da URL, como explicado aqui , e anexando-o static/assets/à frente dele. Portanto, quaisquer arquivos que estejam sob o assets/diretório, como assets/index.jsou assets/images/img.png, seriam servidos com sucesso.

    @app.get("/assets/{asset:path}")
async def get_asset(asset: str):
    filepath = os.path.join('static/assets/', asset)
    if os.path.isfile(filepath):
        return FileResponse(filepath)
    else:
        return PlainTextResponse("File Not Found",  status_code=404)

    Novamente, essa é uma abordagem que eu realmente não recomendaria seguir e com a qual se deve ter muito cuidado, pois alguém pode tentar tirar vantagem dela de forma maliciosa e tentar acessar arquivos provavelmente restritos aos quais não está autorizado. É por isso que os.path.join('static/', ...é usado nos exemplos acima, para mitigar esses riscos e procurar apenas arquivos no static/diretório.

    A escolha da Opção 1 descrita anteriormente deve ser a abordagem preferida para tais propósitos.

    • 1

  2. Ao criar seu aplicativo React, especifique a página inicial em package.json ou defina o PUBLIC_URL durante a criação:

    "página inicial": "/estático" npm executar compilação

    pp = FastAPI()

    app.mount("/static", StaticFiles(diretório="static", html=True), nome="static")

    @app.get("/") def serve_index():`insira o código aquiinsira o código aqui return FileResponse("static/index.html")

    Isso deve servir adequadamente tanto index.html quanto ativos estáticos em /static. Tente isso e me avise se tiver algum problema

    • 0

relate perguntas