Openapi 또는 Bust : 내가 어떻게 사랑스러운 플레이를했는지 진짜 백엔드
내가 사랑을 처음 발견했을 때, 나는 빠른 프론트 엔드 개발에 대한 약속에 끌렸다. 그러나 많은 개발자들과 마찬가지로, 나는 기꺼이 참여하지 않을 맞춤형 백엔드를 가지고 있습니다. 그래서 나는 둘을 연결하기위한 여정을 시작했습니다. 항상 간단한 경로는 아닙니다. 원활한 통합의 순간과 좌절하는 장애물의 순간이있었습니다. 이 게시물에서는 그 과정의 최고점과 최저점을 안내해 드리겠습니다. 효과가 있었던 것, 그렇지 않은 것, 그리고 마침내 매끄럽고 효율적인 워크 플로를 만들기 위해 배운 주요 교훈.
1. OpenAPI 사양 만들기 (가장 큰 승리)
통합 여행에서 가장 큰 승리는 AI가 OpenAPI 사양과 잘 어울린다는 것을 알아내는 것이 었습니다. 엔드 포인트, 요청/응답 형식, 인증 메소드 등을 포함하여 백엔드 API를 설명하는 기계 읽을 수있는 문서입니다. 이를 프론트 엔드와 백엔드 사이의 계약으로 생각하여 양측이 효과적으로 의사 소통하는 방법을 이해하도록하십시오.
이미 사양이있는 경우 간단히 복사하십시오 openapi.yml 또는 openapi.json 사랑스러운 프로젝트의 루트에 파일을 파일하십시오.
그러나 훌륭한 Documenter가 아닌 경우 Claude Code 또는 Github Copilot 채팅과 같은 AI 코드 에이전트를 사용하여 기존 백엔드 코드에서 하나를 생성 할 수 있습니다. 다음은 샘플 프롬프트입니다.
Extract the OpenAPI specification from the attached files and output it as a single openapi.yml file. Ensure that objects are
defined in the components section and referenced appropriately. Include all endpoints, request parameters, and response schemas.
The specification should be comprehensive enough for a developer to implement the API without additional context.
이 프롬프트를 실행할 때 백엔드 코드 파일을 첨부해야합니다.
일단 당신이 있으면 openapi.yml 사랑스러운 프로젝트의 루트에서 파일은 TypeScript API 클라이언트를 생성 할 수 있습니다. 백엔드로 URL을 수정하여 다음 프롬프트를 실행하십시오.
Interpret the openapi.yml file in the root of this project and generate a typescript API client in `lib/api.ts`. Include all
schemas as types and interfaces. The client should have functions for each endpoint with appropriate parameters and return types.
Use fetch for making HTTP requests and handle errors gracefully. Ensure the code is clean, well-documented, and follows best
practices.
The backend URL is
API 클라이언트를 생성합니다 lib/api.ts 백엔드 서비스와 상호 작용하는 데 사용할 수 있습니다. Lovable이 항상 API 클라이언트를 사용하도록하려면 사랑스러운 프로젝트의 다음 “지식”섹션을 추가해야합니다.
The API client is located in lib/api.ts and should be imported to fetch any data from the backend.
작동하지 않은 것
이 방법은 바위가없는 시작이 없었습니다. 다음은 OpenApi 사양 접근 방식에 정착하기 전에 발생한 몇 가지 과제입니다.
- 직접 엔드 포인트 설명 : 처음에는 요청 및 응답 쌍을 제공했습니다. AI가 특정 예에서 일반화하기 위해 고군분투함에 따라 일관되지 않은 결과가 이루어졌습니다.
- 진행중인 도전 : 엔드 포인트가없는 새로운 기능 및 OpenAPI 사양을 업데이트합니다. 원래 OpenAPI 사양에서 지원되지 않은 새로운 기능을 추가하라는 사랑을받는 경우 API 클라이언트 코드를 환각시키는 경향이 있습니다. 내가 이것과 싸우는 유일한 방법은 백엔드를 먼저 변경하고 OpenAPI 사양을 업데이트 한 다음 API 클라이언트를 재생하는 것입니다.
작동 할 수있는 것
내가 시도하지 않은 것은 Swagger Codegen 또는 OpenApi 생성기와 같은 도구를 사용하여 백엔드 코드베이스에서 API 클라이언트를 직접 생성하는 것이 었습니다. 고객을 단순하게 유지하고 싶었 기 때문에 이것을 선택하지 않았습니다. AI 생성 API 클라이언트를 사용했을 때 환각이 많이 발생하지 않았습니다.
2. 저장소 관리 및 배포
일반적인 문제는 2 개의 리포지토리를 관리하는 것입니다. 하나는 백엔드 용이고 하나는 사랑스러운 프론트 엔드를위한 것입니다. 이로 인해 배포 할 때 많은 문제가 발생했습니다. 두 리포지토리를 개별적으로 배포해야했기 때문입니다.
효과가있는 것
백엔드와 사랑스러운 프론트 엔드를 동기화하기 위해 Lovable Github 리포지토리를 백엔드 프로젝트의 하위 모드로 추가했습니다. 이것은 a를 만듭니다 의사 모노로 설정백엔드 코드가 저장소의 근본에 사는 경우, 사랑스러운 프론트 엔드는 하위 디렉토리에 살고 있습니다. 이를 통해 코드베이스를 더 쉽게 관리하고 변경 사항을 좌표 할 수 있습니다.
하위 모듈을 추가하려면 백엔드 프로젝트의 루트 디렉토리에서 이러한 명령을 실행하십시오.
git submodule add
git submodule update --init --recursive
이제 프로젝트 구조가 다음과 같은 것으로 보입니다.
/my-backend-project
/project-ui (Lovable submodule)
CloudFlare Workers를 사용하기 때문에 Lovable Frontend의 생성 된 파일을 내 백엔드에 복사하기 위해 간단한 빌드 스크립트를 설정했습니다. public 배포 중 디렉토리. 다음은 이것을 자동화하는 샘플 스크립트입니다.
#!/bin/bash
# Navigate into the Lovable project submodule
cd project-ui
# Pull the latest changes
git pull origin main
# Install dependencies and build the frontend
npm install
npm run build
# Remove the old public directory and copy the new build files
rm -rf ../public
mkdir -p ../public
cp -r dist/ ../public
이것은 디렉토리 구조가 다음과 같이 가정합니다.
/my-backend-project
/project-ui (Lovable generated submodule)
/dist (generated frontend files)
/public (backend's public directory)
CloudFlare Workers에 익숙하지 않은 사람들의 경우 정적 파일과 서버리스 기능을 한 곳에 배포 할 수 있습니다. 정적 파일이 들어갑니다 public 디렉토리, 백엔드 로직은 작업자가 처리 할 수 있습니다. 와 함께 honoAPI 경로와 함께 정적 파일을 쉽게 제공 할 수 있습니다.
const app = new Hono<{ Bindings: Bindings }>();
// your API routers
app.route("/api/users", usersRouter);
// Serve static files from the public directory
app.get("*", async (c) => {
return c.env.ASSETS.fetch(c.req.raw);
});
export default app;
작동하지 않은 것
일은 3 개의 프로젝트를 완벽하게 만들었습니다. 내가 만난 함정은 다음과 같습니다.
- 별도의 리포지토리 : 처음에는 백엔드와 사랑스러운 프론트 엔드를 별도의 리포지토리로 유지했습니다. 한 리포지토리의 변경 사항은 종종 다른 저장소의 변경이 필요했기 때문에 동기화 문제로 이어졌습니다. 배포를 관리하고 두 부품이 최신 상태인지 확인하는 것이 번거롭게되었습니다.
- 복사 및 붙여 넣기 : 두 개의 리포지토리를 분리하려고 했으므로 생성 된 사랑스러운 파일을 백엔드의 공개 디렉토리에 수동으로 복사하려고 시도했습니다. 이것은 오류가 발생하고 지루했습니다. 특히 프론트 엔드를 변경할 때마다 기억해야 할 때.
- Monorepo 접근법 : 나는 백엔드와 사랑스러운 프론트 엔드를 단일 모노레 포로 가져 오려고 시도했습니다. 그러나 Lovable은 백엔드 종속성을 설치하는 데 많은 어려움을 겪었으므로 Lovable에 대한 이상한 미리보기 오류로 이어졌습니다. 이 접근법은 궁극적으로 포기되었습니다.
3. 인증 처리
Lovable의 가장 좋은 기능 중 하나는 인스턴트 미리보기입니다. 그러나 백엔드가 인증이 필요한 경우, 사랑스러운 프론트 엔드가 일반적으로 iframe 인 미리보기 환경 내에서 처리 할 수 있는지 확인해야합니다. “Google으로 로그인”또는 일회성 링크와 같은 일부 방법은 여기에서 어려울 수 있습니다. 나는 이것을 처리하는 두 가지 신뢰할 수있는 방법을 발견했습니다.
LocalStorage 및 Bearer 토큰을 사용하십시오
이것은 Lovable로 인증을 관리하는 가장 간단한 방법입니다. 사용자가 로그인하면 저장할 수 있습니다 소지자 토큰 ~에 localStorage. 그런 다음 수정하십시오 lib/api.ts 클라이언트는이 토큰을 자동으로 포함시킬 수 있습니다 Authorization 모든 API 요청의 헤더. 이 접근법은 잘 작동하며 구현하기가 간단합니다.
Samesite = 없음 및 안전한 플래그가있는 쿠키를 사용하십시오 (스테이징 만 해당)
인증을 위해 쿠키를 사용해야하는 경우 SameSite=None 그리고 Secure 깃발. 이를 통해 브라우저는 Lovable의 Iframe 환경에 필수적입니다.
이 접근법에 대해 매우 조심하십시오. 백엔드를 취약하게 만들 수 있습니다 크로스 사이트 요청 위조 (CSRF) 공격. 스테이징 API에서만이 방법을 사용하는 것이 가장 좋습니다. 백엔드 프레임 워크가 지원하는 경우 anti-CSRF 토큰을 사용 하여이 위험을 완화 할 수 있습니다.
작동하지 않은 것
이것은 또 다른 시행 착오 과정이었습니다. 내가 시도하지 않은 몇 가지 방법은 다음과 같습니다.
- 사랑스러운 미리보기 iframe 내에서 Oauth 흐름을 작동 시키려고 노력합니다. 대부분의 OAUTH 제공 업체는 타사 쿠키를 차단하므로 인증 프로세스를 완료 할 수 없습니다.
- Lovable Preview 내에서 사용자 이름 및 비밀번호 로그인 우회. 이것은 보안 위험이었고 확장 가능한 솔루션이 아닙니다.
- 사랑스러운 미리보기에서 모든 인증을 조롱합니다. 이로 인해 미리보기와 생산 환경 사이의 불일치가 발생하여 개발 중에 혼란이 발생했습니다. 또한, 그것은 많은 복잡성을 추가했습니다
lib/api.ts실제 인증 흐름과 조롱 된 인증 흐름을 모두 처리해야했습니다.
\
Post Comment