FastAPI, docs/redoc js, css, 로고, 파비콘을 static 처리

FastAPI,  docs/redoc js, css, 로고, 파비콘을 static 처리

 

글. 수알치 오상문 

 

FastAPI는 기본으로 스웨거(docs)와 도규먼트(redoc)을 제공합니다. 그리고 도규먼트 페이지 상단 우측에, 로고가 나타납니다. 그런데 이 때 사용하는 js, css, 로고 파일을 웹을 통해 가져옵니다(브라우저 탭에 나타나는 파비콘도 마찬가지). 그래서 웹과 차단된 내부 서버에서는 docs, redoc 페이지가 제대로 동작할 수 없습니다. 이 경우에 js, css, 로고, 파비콘 파일을 static 폴더에 저장하고 불러오면 웹과 차단된 경우에도 동작시킬 수 있습니다.

참고: https://fastapi.tiangolo.com/advanced/extending-openapi/ 

1. main.py 파일 위치에 static 폴더 생성하고 아래 파일들을 저장합니다.

정식 문서에서는 main.py를 app 폴더에 저장하고 app과 대등한 static 폴더에 파일을 저장하라고 하는데 저는 main.py 폴더에 static 폴더를 만들어 사용했습니다.

2. docs 화면 아이콘 이미지 다운로드합니다. 페이지에 나오는 이미지 아이콘(logo-teal.png)을 저장해서 사용하거나 사용자 이미지를 지정할 수 있습니다. 아니면 제가 올린 로고 파일과 파비콘(favicon.png)을 다운로드해서 사용하세요. 이 파일들을 static 폴더에 저장합니다. 

 3. 아래 파일은 링크를 참조하여 static 폴더에 다운로드합니다. 아니면 제가 올린 파일을 다운로드해서 사용하세요.

    redoc_standalone.jss   <-- 파일명을 변경해서 사용했음 (원래 파일명: redoc.standalone.jss)
    swagger-ui-bundle  
    swagger-ui 

 

[다운로드 참조 링크)  https://fastapi.tiangolo.com/advanced/extending-openapi/

4. main.py 코드를 아래처럼 수정합니다. 

 

[main.py 소스 코드]

from fastapi import FastAPI

# -----------------------------------------------
# docs/redoc static setting: js, css, icon
# -----------------------------------------------
from fastapi.openapi.utils import get_openapi
from fastapi.openapi.docs import (
    get_redoc_html,
    get_swagger_ui_html,
    get_swagger_ui_oauth2_redirect_html,
)
from fastapi.staticfiles import StaticFiles

# app = FastAPI()
app = FastAPI(docs_url=None, redoc_url=None, )

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

@app.get(app.swagger_ui_oauth2_redirect_url, include_in_schema=False)
async def swagger_ui_redirect():
    return get_swagger_ui_oauth2_redirect_html()


@app.get("/docs", include_in_schema=False)
async def custom_swagger_ui_html():
    return get_swagger_ui_html(
        openapi_url=app.openapi_url,
        title=app.title + " - Swagger UI",
        oauth2_redirect_url=app.swagger_ui_oauth2_redirect_url,
        swagger_css_url="static/swagger-ui.css",
        swagger_js_url="static/swagger-ui-bundle.js",
        swagger_favicon_url="static/favicon.png",
    )

@app.get("/redoc", include_in_schema=False)
async def redoc_html():
    return get_redoc_html(
        openapi_url=app.openapi_url,
        title=app.title + " - ReDoc",      
        redoc_js_url="static/redoc-standalone.js",
        redoc_favicon_url="static/favicon.png", 
    )


def custom_openapi():
    if app.openapi_schema:
        return app.openapi_schema
    openapi_schema = get_openapi(
        title="MTT API Docs.",
        version="3.2.0",
        description="MTT OpenAPI schema",
        routes=app.routes,
    )
    openapi_schema["info"]["x-logo"] = {
        "url": "/static/logo.png"
    }
    app.openapi_schema = openapi_schema
    return app.openapi_schema

app.openapi = custom_openapi
# -------------------------------------------------------------


@app.get("/users/{username}")
async def read_user(username: str):
    return {"message": f"Hello {username}"}

@app.get("/items/")
async def read_items():
    return [{"name": "Foo"}]

 

5. 네트워크 연결을 끓은 상태에서 fastapi 서버를 실행합니다.
   uvicorn main:app --reload --host=0.0.0.0 --port=80

6. 웹 브라우저를 실행하고 docs, redoc 페이지에 접속해봅니다.

 

  127.0.0.1/docs

  127.0.0.1/redoc 

 

logo-teal.png

0.02MB

favicon.png

0.00MB

redoc-standalone.js

0.95MB

swagger-ui.css

0.14MB

swagger-ui-bundle.js

1.04MB