• 카테고리

    질문 & 답변
  • 세부 분야

    백엔드

  • 해결 여부

    미해결

서버 배포 후 api 연동 시에 net::ERR_CONNECTION_REFUSED 에러가 나옵니다

24.04.21 22:52 작성 조회수 121

0

안녕하세요 제로초님! 항상 좋은 강의 올려주셔서 감사합니다

 

제로초님 강의를 그대로 따라하다가 react로 혼자 프론트를 만들어서 api 연동 웹사이트를 만드는 중입니다.

 

서버 배포까지 마쳐서 pm2 list 해도 재시작 0회로 잘 올라가 있는 상황입니다!

 

스크린샷 2024-04-21 오후 10.34.36.png

 

그런데 프론트에 서버 주소를 입력해서 테스트를 해보니 아래와 같은 에러가 나옵니다. (프론트는 아직 localhost를 사용하고 있습니다)

 

스크린샷 2024-04-21 오후 10.37.46.png

프론트에서는 아래와 같이 주소를 연동해서 사용했습니다

export const url = "http://106.10.34.138";

 

강의 때 백엔드에 8002 포트 설정을 해줬어서 :8002를 붙여봤지만 동일한 오류가 나왔습니다

 

프론트, 서버 둘다 cors 에러가 나올까봐 아래처럼 cors 설정도 해줬습니다

//프론트
headers: {
"Access-Control-Allow-Origin": "*",
},
app.use(
  cors({
    origin: "*",
    credentials: true,
  })
);

 

이제 잘 되는지만 테스트 하면 되는 단계인데 여기서 막혀서 도저히 해결이 안되네요

 

이런 경우에 어떻게 해결할 수 있는지 알려주시면 감사하겠습니다!

 

늘 좋은 강의 감사합니다

답변 2

·

답변을 작성해보세요.

0

백엔드에 포트 몇 번으로 app.listen 하셨나요?

서버아이피:포트 로 접근하셔야 합니다.

정상적으로 접근했는데도 저렇게 뜨는거면 서버가 안 켜진 겁니다.

pm2 logs --err --lines 200 해서 에러 확인해보세요.

kti님의 프로필

kti

질문자

2024.04.22

app.set("port", process.env.PORT || 8002);

app.listen(app.get("port"), () => {
  console.log(app.get("port"), "번 포트에서 대기중");
});

현재는 8002 포트를 사용하고 있습니다

 

그리고 프론트에서도 8002번 포트로 api 요청을 보내고 있습니다 그런데 동일한 에러가 나오네요

image

 

pm2 list 명령어 입력 시 화면입니다.

image

 

 

알려주신대로 pm2 logs --err --lines 200을 했었을 때는 아래와 같은 에러가 나옵니다

 

 

 

pm2 logs --err --lines 200

[TAILING] Tailing last 200 lines for [all] processes (change the value with --lines option)

/root/.pm2/logs/app-error.log last 200 lines:

0|app      |     at /root/.nvm/versions/node/v17.9.1/lib/node_modules/pm2/node_modules/async/internal/onlyOnce.js:12:16

0|app      |     at WriteStream.<anonymous> (/root/.nvm/versions/node/v17.9.1/lib/node_modules/pm2/lib/Utility.js:186:13)

0|app      | TypeError: require(...) is not a function

0|app      |     at Object.<anonymous> (/root/mccoco-back/app.js:12:44)

0|app      |     at Module._compile (node:internal/modules/cjs/loader:1099:14)

0|app      |     at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)

0|app      |     at Module.load (node:internal/modules/cjs/loader:975:32)

0|app      |     at Function.Module._load (node:internal/modules/cjs/loader:822:12)

0|app      |     at /root/.nvm/versions/node/v17.9.1/lib/node_modules/pm2/lib/ProcessContainer.js:304:25

0|app      |     at wrapper (/root/.nvm/versions/node/v17.9.1/lib/node_modules/pm2/node_modules/async/internal/once.js:12:16)

0|app      |     at next (/root/.nvm/versions/node/v17.9.1/lib/node_modules/pm2/node_modules/async/waterfall.js:96:20)

0|app      |     at /root/.nvm/versions/node/v17.9.1/lib/node_modules/pm2/node_modules/async/internal/onlyOnce.js:12:16

0|app      |     at WriteStream.<anonymous> (/root/.nvm/versions/node/v17.9.1/lib/node_modules/pm2/lib/Utility.js:186:13)

 

 

 

애러가 더 많이 출력되긴 했는데 모두 동일한 에러여서 한개만 가져왔습니다

 

저의 app.js 12번째 줄에는 connect-redis 설정이 있습니다

const RedisStore = require("connect-redis").default;

 

그래서 connect-redis npm 사용법 쪽이랑 제로초님이 2일 전에 수정하신 깃허브 코드도 봤는데 동일해 보이더라고요

 

 

 

혹시 몰라 제 app.js의 redis 부분들을 모두 공유드립니다

 

const RedisStore = require("connect-redis").default;
const { sequelize } = require("./models"); //models/index.js에 있는 db 객체 안에 있는 sequelize
const cors = require("cors");

dotenv.config(); //process.env 사용 가능 여기 아래부터만
const redisClient = redis.createClient({
  url: `redis://${process.env.REDIS_HOST}:{process.env.REDIS_PORT}`,
  password: process.env.REDIS_SECRET,
});
redisClient.connect().catch(console.error);

...

const sessionOption = {
  resave: false,
  saveUninitialized: false,
  secret: process.env.COOKIE_SECRET,
  cookie: {
    httpOnly: true,
    secure: false,
  },
  store: new RedisStore({ client: redisClient }),
};

 

redisClient 쪽의 url에 있는 {process.env.REDIS_PORT} 쪽 $ 표시는 자꾸 코드 블럭 안에서 글씨체가 이상하게 바뀌어서 뺐습니다. 실 코드 안에서는 달러 표시 붙여서 사용 중입니다!

 

질문 받아주셔서 감사합니다

connect-redis가 7버전이 맞나요?

npm ls connect-redis 해보시면 됩니다.

그리고 8002 포트는 외부 접근 열어두신 게 맞나요?

kti님의 프로필

kti

질문자

2024.04.22

connect-redis는 7.1.1 버전입니다!

네이버 클라우드 플랫폼으로 서버 띄우고 ACG에 아래 사진처럼 모든 아이피 8002 포트를 허용해뒀습니다!

 

image

이렇게 한 후에 아래 코드로 url 연결했지만 결과는 동일한 상황입니다

export const url = "http://106.10.34.138:8002";

 

aws 라이트세일로 우선 해보는 게 좋을까요?

0

인프런 AI 인턴님의 프로필

인프런 AI 인턴

2024.04.21

안녕하세요, 인프런 AI 인턴입니다. kti님의 질문에 답변드리겠습니다.

서버 배포 후 React 프론트엔드에서 API 연동 시 net::ERR_CONNECTION_REFUSED 에러가 발생하는 것과 관련하여, 이 에러는 클라이언트 측에서 서버로의 연결이 거부되었을 때 발생합니다. 대부분의 경우, 서버 주소나 포트 설정 문제, 서버의 CORS 설정, 서버가 올바르게 실행되지 않고 있거나 네트워크 문제로 인해 나타날 수 있습니다.

이와 유사한 문제로 질문한 다른 수강생을 위한 답변을 찾았습니다. 다음의 링크를 참고하세요:

  • “서버 배포 후 api 연동 시에 net::ERR_CONNECTION_REFUSED 에러가 나옵니다”에서는 리버스 프록시 설정을 통한 문제 해결 방법이 제시되었습니다. 이는 nginx를 활용한 리버스 프록시 구성을 통해 해결할 수 있습니다. 이 경우, nginx가 노드 서버를 가리키도록 고유한 설정이 필요합니다. 특히, 도메인 이름을 사용하여 서버에 접근하려면 nginx 설정에서 해당 도메인을 서버 이름으로 지정해야 합니다.

  • pm2 사용 후 페이지 연결 문제 해결 사례에서는 node_modules 폴더를 삭제한 후 다시 설치하여 문제를 해결한 사례가 있습니다. 때때로 의존성 문제나 설치 오류로 인해 비슷한 연결 문제가 발생할 수 있으며, 이 방법으로 해결이 가능합니다.

  • 서버 배포 후 사이트 연결 불가 문제에서 인스턴스 재부팅을 통해 해결된 사례가 있습니다. 서버 또는 인스턴스의 장애가 원인일 수 있으며, 재부팅으로 해결될 수 있습니다.

이러한 상황에서 고려해볼 수 있는 몇 가지 해결책은 다음과 같습니다:

  1. 서버 주소 및 포트 접근 확인: 서버 주소와 포트가 올바르게 설정되었는지 확인합니다. 8002 포트를 사용한다면, 이 포트가 서버 방화벽이나 네트워크 설정에 의해 차단되지 않았는지 확인이 필요합니다.

  2. CORS 설정 검토: CORS(교차 출처 리소스 공유) 설정이 올바르게 되어있는지 확인합니다. 일반적으로 "Access-Control-Allow-Origin": "*" 설정은 다른 출처에서의 리소스 접근을 허용하지만, 보안 문제로 인해 제한적으로 사용해야 합니다. 상세한 설정을 통해 특정 도메인에서만 요청을 허용하도록 하는 것이 좋습니다.

  3. 네트워크 및 서버 상태 확인: 서버가 정상적으로 작동하고 있고, 네트워크 문제가 없는지 확인합니다. pm2 로그(pm2 logs)를 확인하여 서버 측문제가 없는지 점검하실 수 있습니다.

해당 사례들과 답변이 kti님의 문제를 해결하는 데 도움이 되길 바랍니다. 추가적인 문제가 발생한다면, 보다 상세한 정보와 함께 다시 질문해주세요.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.