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

김유림님의 프로필 이미지
김유림

작성한 질문수

따라하며 배우는 노드, 리액트 시리즈 - 챗봇 사이트 만들기

챗봇 어플리케이션 만들기#5 Front End 부분 시작

localhost:3000 ERR_CONNECTION_REFUSED

작성

·

27

0

npm run dev로 서버는 성공적으로 올라갔는데 localhost:3000 접속 시 연결이 거부되었다고 뜹니다.

이것저것 많이 찾아보긴 했는데 해결이 안되네요 ㅠㅠ

windows, 크롬에서 실행했습니다. 해결 방법을 알 수 있을까요?

image.png
// index.js

const express = require("express");
const path = require("path");
const bodyParser = require("body-parser");
const app = express();

const config = require("./server/config/keys");
// const mongoose = require("mongoose");
// mongoose.connect(config.mongoURI, { useNewUrlParser: true, useUnifiedTopology: true })
//   .then(() => console.log('MongoDB Connected...'))
//   .catch(err => console.log(err));

app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

app.use('/api/dialogflow', require('./server/routes/dialogflow'));

// Serve static assets if in production
if (process.env.NODE_ENV === "production") {

  // Set static folder
  app.use(express.static("client/build"));

  // index.html for all page routes
  app.get("*", (req, res) => {
    res.sendFile(path.resolve(__dirname, "client", "build", "index.html"));
  });
}

const port = process.env.PORT || 5000;

app.listen(port, () => {
  console.log(`Server Running at ${port}`)
});

 

//package.json
{
  "name": "chatbot-app",
  "version": "1.0.0",
  "description": "chatbot-app",
  "main": "index.js",
  "engines": {
    "node": "18.20.5",
    "npm": "10.9.0"
  },
  "scripts": {
    "start": "node index.js",
    "backend": "nodemon index.js",
    "frontend": "npm run front --prefix client",
    "dev": "concurrently \"npm run backend\"  \"npm run start --prefix client\""
  },
  "author": "Jaewon Ahn",
  "license": "ISC",
  "dependencies": {
    "actions-on-google": "^3.0.0",
    "body-parser": "^1.20.3",
    "dialogflow": "^1.2.0",
    "dialogflow-fulfillment": "^0.6.1",
    "dotenv": "^16.4.5",
    "express": "^4.21.1",
    "mongoose": "^8.8.1",
    "node": "^18.20.5",
    "punycode": "^2.3.1"
  },
  "devDependencies": {
    "@ant-design/icons": "^5.5.1",
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
    "concurrently": "^9.1.0",
    "nodemon": "^3.1.7"
  }
}

 

client쪽

//package.json
{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "antd": "^4.24.16",
    "axios": "^1.7.7",
    "prop-types": "^15.8.1",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-redux": "^9.1.2",
    "react-router-dom": "^6.28.0",
    "react-scripts": "5.0.1",
    "redux": "^5.0.1",
    "redux-promise": "^0.6.0",
    "redux-thunk": "^3.1.0",
    "uuid": "^11.0.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "http-proxy-middleware": "^3.0.3"
  }
}

답변 1

0

안녕하세요, 인프런 AI 인턴입니다.

김유림님께서 겪고 계시는 ERR_CONNECTION_REFUSED 오류는 몇 가지 원인으로 발생할 수 있습니다. 특히, 서버가 예상하지 못한 포트에서 실행 중이거나 서버가 제대로 시작되지 않았을 때 발생할 수 있습니다. 아래 몇 가지 해결책을 제안 드리겠습니다:

  1. 서버 포트 확인하기:
    index.js 파일에서 서버가 기본적으로 포트 5000번에서 실행되도록 설정되어 있습니다. 하지만 클라이언트 쪽에서 3000번 포트를 사용하고 있기 때문에, 서버가 제대로 실행되었는지 확인해 보세요. npm run dev 명령어를 실행하면 Server Running at 5000이라는 로그가 출력되고 있는지 확인해 보세요.

  2. 클라이언트와 서버 간의 포트 매핑 문제:
    현재, 서버는 5000번 포트를 사용하고 있고, 클라이언트는 3000번 포트를 기본 사용하고 있습니다. 그러므로 클라이언트에서 요청을 5000번 포트로 보내도록 설정해야 합니다. 클라이언트의 package.json 파일에서 proxy 항목을 추가하여 백엔드 서버와의 통신을 지정할 수 있습니다. 예를 들어:

    "proxy": "http://localhost:5000"
    
  3. 방화벽이나 보안 설정 확인:
    로컬 환경에서 방화벽이나 다른 보안 프로그램이 포트를 차단하고 있는지 확인해 보세요. 필요한 경우 해당 프로그램의 설정에서 예외를 추가해야 합니다.

  4. 이미 실행 중인 프로세스가 포트를 사용 중인 경우:
    터미널에서 netstat -ano | findstr :포트번호 명령어로 포트가 이미 사용 중인지 확인 후, 해당 프로세스를 종료해 보세요.

  5. 크롬 브라우저의 확장 프로그램 확인:
    브라우저의 확장 프로그램이 문제를 일으키고 있을 수 있습니다. 크롬 시크릿 모드에서 웹사이트에 접속해 보셨는지 확인 부탁드립니다.

위의 조치를 수행하셔도 문제가 해결되지 않은 경우, 더 이상 이와 같은 오류와 관련된 상세한 코드 수정 부분이 필요한 경우라면 다른 개발자 포럼이나 Q&A 웹사이트에 문의하시는 것도 방법입니다.

문제가 해결되시길 바랍니다! 추가 질문이 있으시면 언제든지 문의해 주세요.

오류 이미지

김유림님의 프로필 이미지
김유림

작성한 질문수

질문하기