帮忙做ppt赚钱的网站,安装和使用wordpress,外贸模板网站,设计网站推荐htmlFastAPINuxt单域名部署实践#xff1a;无需子域名的前后端分离解决方案
注#xff1a;此博客写于2024年5月23日。FastAPI已经到0.111.0 版本了。
背景历史
上一个接手网站的人不管了#xff1a;Wordpress —重写– Vue
发现Vue做SEO优化很麻烦#xff1a;Vue —重构…FastAPINuxt单域名部署实践无需子域名的前后端分离解决方案
注此博客写于2024年5月23日。FastAPI已经到0.111.0 版本了。
背景历史
上一个接手网站的人不管了Wordpress —重写– Vue
发现Vue做SEO优化很麻烦Vue —重构– Nuxt
发现每次改商品数据还要重新上传服务器Nuxt —增强– Nuxt githubActions自动部署
发现还是得做后端Nuxt githubActions自动部署 —加后端– Nuxt githubActions FastAPI
回顾纯前端
对于构建一个网站来说最简单的网站肯定是纯静态网站。
只要将HTML、CSS、JavaScript、图片等资源文件放在某一个服务器的文件夹里在宝塔里配置好域名Nginx配置好就可以通过域名访问到网站。
如果使用了Vue、React、Nuxt、Next等框架就用 yarn generate pnpm build 等等的命令生成出来的dist或者output文件夹将这些文件夹里的内容部署到服务器对应域名的文件夹里就可以了。
但这个不能接后端这只是纯前端。
回顾后端前端 子域名反向代理法
如果接入后端以FastAPI举例子我们可以用FastAPI提供的API接口然后用Nuxt渲染出前端页面。
以前个人做法是整两个域名一个是子域名
example.com
api.example.com然后用SSH连接服务器单独开一个screen部署后端上去单独开一个后端的接口比如说8000。
然后再在宝塔里开一个api.example.com的站点设置反向代理把8000端口的代理到api子域名上。
然后Nuxt前端里就可以用fetch或者axios 请求 api.example.com 接口获取数据渲染出页面。
问题
本文提供一个使用FastAPINuxt的方案可以使用一个域名就把后端和前端都部署到一起。
这个Nuxt应该可以换成React、Vue、Next都行只要保证是可以静态打包的就可以。
所以重点不在前端了重点在FastAPI。
fastAPI很简单只用 app.mount一句话就能让某一个路由绑定一个前端文件夹了。
然后我们规定 /api 开头的url全部都走我们自定义的路由函数不要去访问前端文件夹。
但是但是我们如果直接用 / 作为URL绑定那个前端文件夹经过测试发现我们自定义的api就全被覆盖了。
比如 GET: https://example.com/api/product/all
他会绑定到前端静态文件里面去了会认为有一个叫api的页面等等等的。而不是一个返回json的后端接口。
那不把前端绑在 / 上把前端绑定在 /website 或者 /static 上不就可以了吗
但这样不好我们访问的网站url前面就必须全部加上一个 /website 了如果我们的前端代码里某些js加了当前url的判断这样可能会出问题。
所以不能用mount直接绑定。还少要写一个if判断。
FastAPI代码
fastAPI项目使用poetry管理。以前发过如何使用poetry的文章这里不再重复。
backend-fastapims_backend_fastapicerts # 存放ssl证书routers # 路由层utils # 工具层__init__.py__main__.py.gitignorepyproject.tomlREADME.md整个项目结构是这样的。里面必须再套一个。符合模块化。并且里面要有双下划线夹住的init和main。
并且里面这个文件夹不能是短横线了因为要符合模块命名改成下划线。前面之所以多个ms只是因为这个是项目名称的缩写。
[tool.poetry]
name ms-backend-fastapi
version 0.1.0
。。。后面的就省略了toml里的name和那个内层文件夹一样只是短横线和下划线的区别。
然后就是__main__.py 这个模板可以通用在其他fastAPI项目里from fastapi import FastAPI, HTTPException
from fastapi.responses import FileResponse
from pathlib import Pathfrom ms_backend_fastapi.utils.path_utils import get_frontend_dir
from ms_backend_fastapi.routers import routersdef main():import uvicornimport syslocal -l in sys.argv# HTTPS运行ssl_files Path(__file__).parent / certsapp FastAPI()for router in routers:app.include_router(router)port 25543print(fhttp://localhost:{port})uvicorn.run(app,host0.0.0.0,portport,# pem文件ssl_keyfileNone if local else (ssl_files / website.key).as_posix(),# crt文件ssl_certfileNoneif localelse (ssl_files / website.pem).as_posix(),)if __name__ __main__:main()
记得certs文件夹里放ssl证书的key文件和pem文件。网站开https要用的。
之所以写一个 -l 是因为方便在本地测试本地就不能用https了。
utils里面有一个get_frontend_dir这个其实就是动态判断前端打包了的文件夹的路径
这个前端文件夹一定不要套在这个fastAPI项目里面会导致打包巨大并且也违背了前后端分离开发的初衷了本来前端有一个仓库git push之后能自动触发github Actions流水线自动部署到服务器的。
所以get_frontend_dir这个就是一个动态判断当前是Windows还是Linux系统如果是Linux系统干脆写死一个绝对路径了。
from functools import lru_cachelru_cache(1)
def get_frontend_dir():import platformos_name platform.system()if os_name Windows:return rD:\啊吧啊吧什么东西什么东西\website\.output\publicelif os_name Linux:return r/www/wwwroot/这里是你baota上的最终部署的那个网站文件夹else:raise Exception(Unsupported system: os_name)
拿到这个前端文件夹路径就是为了开放一个 / URL的 接口提供静态文件形成网页用的。
这里再展开上面文件结构里的routers
routersapi__init__.pyexample.py # 随便举个例子product.py # 和产品相关的增删改查接口log.py # 和日志相关的增查接口client__init__.pyclient_path.pyroot.pyroot.py 部分的内容
from fastapi import APIRouter, HTTPExceptionrouter APIRouter()router.get(/)
async def read_root():# 直接返回前端的主页内容而不是重定向index_path Path(get_frontend_dir()) / index.htmlif index_path.exists():return FileResponse(index_path)else:raise HTTPException(status_code404, detailIndex file not found)
client_path.py 里面的内容
from pathlib import Path
from fastapi.responses import FileResponse
from fastapi import APIRouter, HTTPException
from ms_backend_fastapi.utils.path_utils import get_frontend_dirrouter APIRouter()router.api_route(/{path:path}, methods[GET], include_in_schemaFalse)
async def frontend_fallback(path: str):此路由作为前端的回退路由用于捕获除 /api/ 开头以外的所有其他请求并尝试将它们导向静态文件。注意这应该放在所有其他路由定义之后。# 如果请求的路径是API路径能走到这里说明没找到前面没有拦截住。if path.startswith(api):return {message: f找不到该API接口 {path},status_code: 404}# 尝试从静态文件中提供请求的路径处理嵌入资源如CSS、JS等static_file_path Path(get_frontend_dir()) / pathif static_file_path.exists() and static_file_path.is_file():return FileResponse(static_file_path)else:# 如果静态文件不存在可以考虑返回404页面或者前端的错误处理页面error_path Path(get_frontend_dir()) / 404.htmlif error_path.exists():return FileResponse(error_path)else:raise HTTPException(status_code404, detailFile not found)
可以看到重点就在上面遇到api开头的接口
所以要先把api开头的接口写在前面拦截住。
app会注册好几个router路由因此上面写了一个循环语句。
在router __init__.py文件里可以写
from typing import Listfrom fastapi import APIRouterfrom .client import client_path, root
from .api import api_router
routers [api_router,# 上面要拦截住所以和API相关的一定要在前面client_path.router,root.router,
]
接下来就是api/example.py 里的内容了
from fastapi import APIRouterrouter APIRouter(prefix/example)router.get()
async def example_api_endpoint():return {message: /example 被访问了}router.get(/{example_id})
async def example_api_endpoint_with_id(example_id: int):return {message: f含有 ID: {example_id}}router.post(/)
async def example_api_endpoint_post(example_data: dict):return {message: fpost 请求数据: {example_data}}
可以这样写但还要注意 要用 https://example.com/api/example 才能访问到上面第一个路由函数
所以api文件夹里的__init__.py 文件里要这样写
import importlib
from pkgutil import iter_modules
from pathlib import Pathfrom fastapi import APIRouter
from . import example, logapi_router APIRouter(prefix/api)
# 获取当前包的绝对路径
package_dir Path(__file__).resolve().parent# 自动发现并注册所有router
for (_, module_name, _) in iter_modules([str(package_dir)]):# 排除掉__init__.py自身if module_name __init__:continue# 动态导入模块module importlib.import_module(f.{module_name}, package__package__)# 尝试从模块中获取router对象并注册router getattr(module, router, None)if router:api_router.include_router(router)print(f模块注册成功 {module_name})else:print(f模块{module_name}中没有找到router对象)raise ImportError(f模块{module_name}中没有找到router对象)
这样就能实现动态的导入以后再开新的接口直接新建py文件就可以了不用再去点开init文件里再import了。
