인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

인프런 커뮤니티 질문&답변

갱갱님의 프로필 이미지
갱갱

작성한 질문수

React + API Server 프로젝트 개발과 배포 (CI/CD)

02. SPA 개발 환경 구성 (1)

vite 사용 안하고 CRA 프론트 백 분리시켜서 하고있는데 질문있습니다.

작성

·

336

·

수정됨

0

vite 사용 안하고 CRA 프론트 백 분리시켜서 하고있는데 질문있습니다.

백엔드 서버에 그냥 node만 받아서 올려놨는데

swagger options에 routes 디렉토리가 없으면 어떻게 작성하죠?

루트에 index.js를 api 로 사용하는데 그럼 apis: ["./index.js"]이렇게 넣으면 될까요?

그리고 swagger 사용에 router 폴더 없이 사용하려고 하는데, 어떻게 해야 스웨거로 넘어가죠??

이미 api들은 다 작성한 상태구요

답변 2

0

Kenu 허광남님의 프로필 이미지
Kenu 허광남
지식공유자

가능하면 vite를 사용하는 것을 추천합니다.

cra는 webpack, vite는 rollup 이라서 번들링할 때 차이가 많이 있습니다.

npm install swagger-ui-express swagger-jsdoc

 

CRA로 저도 시도해보겠습니다.

 

 

일단 AI에게 물어 봤습니다.

ANSWER | PHIND V9 MODEL

Swagger를 사용하여 API 문서화를 진행하려면, swagger-ui-express 라이브러리를 사용할 수 있습니다. 이 라이브러리를 사용하면 Swagger UI를 Express 애플리케이션에 쉽게 통합할 수 있습니다.

먼저, swagger-ui-expressyamljs를 설치해야 합니다. 이 라이브러리들은 Swagger 정의를 로드하고 처리하는 데 사용됩니다.

npm install swagger-ui-express yamljs

그런 다음, index.js 파일에 Swagger UI를 설정하고, 이를 Express 애플리케이션에 연결해야 합니다.

const express = require('express');
const swaggerUi = require('swagger-ui-express');
const YAML = require('yamljs');
const swaggerDocument = YAML.load('./swagger.yaml');

const app = express();

app.use('/api-docs', swaggerUi.serve, swaggerUi.setup(swaggerDocument));

위의 코드에서 './swagger.yaml'은 Swagger 정의 파일의 경로입니다. 이 파일은 API의 모든 엔드포인트와 관련된 정보를 포함해야 합니다.

그러나, 질문에서 언급한대로 routes 디렉토리가 없는 경우, swagger.yaml 파일에 모든 API 경로를 명시적으로 선언해야 합니다. 이렇게 하면 Swagger가 API 문서를 생성하고 표시할 수 있습니다.

마지막으로, apis: ["./index.js"]와 같이 작성하면, Swagger는 index.js 파일을 통해 API 정의를 가져오려고 시도합니다. 이 파일에는 API 엔드포인트에 대한 정보가 포함되어야 합니다.

이 방식을 사용하면, Swagger를 사용하여 API 문서를 생성하고 표시할 수 있습니다. 이렇게 하면, 개발자가 API를 이해하고 사용하는 데 도움이 됩니다.

 

from: https://www.phind.com/search?cache=bcs8i2d5sfcxohzc2e9zzi1n

0

갱갱님의 프로필 이미지
갱갱
질문자

vite 사용안하고 cra로 적용하신 상세한 가이드 문서가 있으시면 공유 부탁드립니다. 상세 설명 없이 따라가는 강의라..ㅠㅠ 환경도 많이 달라서 적용이 거의 안되네요

프론트 , 백 분리 되어 있고

ec2 인스턴스는 우분투입니다.

 

Kenu 허광남님의 프로필 이미지
Kenu 허광남
지식공유자

ec2도 바꾸셨네요.

저도 시도해 보겠습니다.

정보 감사해요.

 

Kenu 허광남님의 프로필 이미지
Kenu 허광남
지식공유자

일단 https://localhost:4000/api-docs 에서 hello는 보이나요?

매우 급하신 듯해서,

일단 영상 찍어서 올렸습니다.

https://youtu.be/JvsxhUGu5zk

갱갱님의 프로필 이미지
갱갱
질문자

피드백 너무 감사합니다!! hello는 찍었고 지금 http는 디비에서 까지 잘 가져오는데 https 로는 502가 뜨고 브라우저에서는 hello도 뜨지 않고있습니다..ㅠㅠㅠ

Kenu 허광남님의 프로필 이미지
Kenu 허광남
지식공유자

discord 될까요?

https://discord.gg/CReEHsXc

https 도메인은 어디인가요?

letsencrypt 쪽 이슈 같습니다.

 

갱갱님의 프로필 이미지
갱갱

작성한 질문수

질문하기