안녕하세요 제로초님 배포후 에러가 발생해서 문의드립니다 ㅠ

Question

이전과 다른 프로젝트를 만들었는데 또 같은 에러가 ㅠㅠ

처음 에러나는 부분이고

회원가입이나 다른 버튼 클릭시에는

cors, mixed contents 둘다 에러가 나네요 ㅠ

app.js

const express = require('express');
const cors = require('cors');
const session = require('express-session');
const cookieParser = require('cookie-parser')
const passport = require('passport');
const dotenv = require('dotenv');
const morgan = require('morgan');
const path = require('path');
const hpp = require('hpp');
const helmet = require('helmet');

const userRouter = require('./routes/user');
const usersRouter = require('./routes/users');
const jobRouter = require('./routes/job');
const careerRouter = require('./routes/career');
const educationRouter = require('./routes/education');
const activityRouter = require('./routes/activity');
const awardRouter = require('./routes/award');
const certificationRouter = require('./routes/certification');
const certificationsRouter = require('./routes/certifications');
const languageRouter = require('./routes/language');
const projectRouter = require('./routes/project');
const socialRouter = require('./routes/social');
const comtestRouter = require('./routes/comtest');
const comtestsRouter = require('./routes/comtests');
const teamreviewRouter = require('./routes/teamreview');
const teamreviewsRouter = require('./routes/teamreviews');
const teamsearchRouter = require('./routes/teamsearch');
const skillRouter = require('./routes/skill');
const skillsRouter = require('./routes/skills');
const userskillRouter = require('./routes/userskill');
const jobsRouter = require('./routes/jobs');

const db = require('./models');
const passportConfig = require('./passport');
dotenv.config();
const app = express();

// db.sequelize.sync({ force: true })
db.sequelize.sync()
  .then(() => {
    console.log('db 연결 성공');
  })
  .catch(console.error);
passportConfig();

//배포를 위한 setting
if (process.env.NODE_ENV === "production") {
  app.use(morgan('combined'))
  app.use(hpp());
  app.use(helmet());
  app.use(cors({
    origin: 'https://choono.co.kr',
    credentials: true, // 다른 주소간 cookie 전달
  }));
} else {
  // front --> backend 요청시 터미널에 송신상태 표현됨
  app.use(morgan('dev'));
  app.use(cors({
    origin: true,
    credentials: true, // 다른 주소간 cookie 전달
  }));
}

// 업로드한 이미지 보이기 위한 작업 - 경로 맞추기 / static: 정적파일 제공 / join: 현 폴더명+uploads라는 이름을 합쳐
// '/': localhost:3065"/images"" --> Postform의 경로 참조
app.use('/', express.static(path.join(__dirname, 'uploads')));
// 자리위치 고정, front(saga)에서 받은 data를 req.body로 넘겨줌 / axios형태
// 즉, front(saga)에서 받은 data를 해석하여 req.body.email 등으로 변경하도록 도움
app.use(express.json());
// 일반 form형태 data 처리
app.use(express.urlencoded({ extended: true }));

// 로그인시 front와 back이 같은 data를 갖고있어야 함
// 로그인시 db의 user정보를 다시 브라우저에 보내줄 때 비번: 보안위험요소 존재(암호화해서 cookie형태로 보냄)
app.use(cookieParser(process.env.COOKIE_SECRET));
app.use(session({
  saveUninitialized: false,
  resave: false,
  // proxy: true, // 배포시
  secret: process.env.COOKIE_SECRET, // 암호화
  cookie: {
    httpOnly: true,
    // secure: false,
    secure: true, // 배포시
    domain: process.env.NODE_ENV === 'production' && '.choono.co.kr'
  }
})); // passport 로그인시 활용
app.use(passport.initialize());
app.use(passport.session());
app.get('/', (req, res) => {
  res.send('hello express');
})

app.use('/user', userRouter);
app.use('/users', usersRouter);
app.use('/job', jobRouter);
app.use('/career', careerRouter);
app.use('/activity', activityRouter);
app.use('/award', awardRouter);
app.use('/certification', certificationRouter);
app.use('/certifications', certificationsRouter);
app.use('/language', languageRouter);
app.use('/project', projectRouter);
app.use('/social', socialRouter);
app.use('/education', educationRouter);
app.use('/comtest', comtestRouter);
app.use('/comtests', comtestsRouter);
app.use('/teamreview', teamreviewRouter);
app.use('/teamreviews', teamreviewsRouter);
app.use('/teamsearch', teamsearchRouter);
app.use('/skill', skillRouter);
app.use('/skills', skillsRouter);
app.use('/userskill', userskillRouter);
app.use('/jobs', jobsRouter);

app.listen(3065, () => { console.log("서버 실행중!") });
 

config/config.js (프론트)

export const backUrl = 'https://api.choono.co.kr';
// export const backUrl = "http://3.34.2.218"; // Ubuntu 빌드시 검토
// exports.backUrl = 'http://localhost:3065';

코드작성에는 이상없다고 생각했는데

문제를 찾아봐도 해결방법이 나오질 않네요 ㅠㅠ

api.도메인.co.kr로 들어가면 잘 작동하는 것 같습니다.

부탁드립니다 ㅠ

pm2 모니터시에 처음엔 db연결 완료라고 나오는데

실행중에 아무것도 뜨지 않는 부분에서 문제가 있으려나 모르겠네요 ㅠ

이건 pm2 에러 확인입니다

프론트앤드 package.json

{
  "name": "choono-front",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "next -p 3060",
    "build": "cross-env NODE_OPTIONS=--max-old-space-size=8192 NODE_ENV=production ANALYZE=true next build",
    "start": "cross-env NODE_OPTIONS=--max-old-space-size=8192 NODE_ENV=production next start -p 3060"
  },
  "author": "SehwanJun",
  "license": "ISC",
  "dependencies": {
    "@ant-design/icons": "^4.6.4",
    "@next/bundle-analyzer": "^11.1.2",
    "antd": "^4.3.0",
    "axios": "^0.21.4",
    "babel-plugin-styled-components": "^1.13.2",
    "cross-env": "^7.0.3",
    "immer": "^9.0.6",
    "moment": "^2.29.1",
    "nanoid": "^3.1.25",
    "next": "^9.5.5",
    "next-redux-wrapper": "^6.0.2",
    "nprogress": "^0.2.0",
    "pm2": "^5.1.2",
    "prop-types": "^15.7.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-quill": "^1.3.5",
    "react-redux": "^7.2.5",
    "react-tooltip": "^4.2.21",
    "redux": "^4.1.1",
    "redux-devtools-extension": "^2.13.9",
    "redux-saga": "^1.1.3",
    "styled-components": "^5.3.1"
  },
  "devDependencies": {
    "babel-eslint": "^10.1.0",
    "eslint": "^7.32.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-plugin-import": "^2.24.2",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-react": "^7.25.2",
    "eslint-plugin-react-hooks": "^4.2.0"
  }
}

백앤드 package.json

{
  "name": "choono-back",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "dev": "nodemon app",
    "start": "cross-env NODE_ENV=production pm2 start app.js"
  },
  "author": "SehwanJun",
  "license": "ISC",
  "dependencies": {
    "aws-sdk": "^2.1022.0",
    "axios": "^0.24.0",
    "bcrypt": "^5.0.1",
    "cookie-parser": "^1.4.5",
    "cors": "^2.8.5",
    "cross-env": "^7.0.3",
    "dotenv": "^10.0.0",
    "express": "^4.17.1",
    "express-session": "^1.17.2",
    "helmet": "^4.6.0",
    "hpp": "^0.2.3",
    "morgan": "^1.10.0",
    "multer": "^1.4.3",
    "multer-s3": "^2.10.0",
    "mysql2": "^2.3.0",
    "passport": "^0.4.1",
    "passport-kakao": "^1.0.1",
    "passport-local": "^1.0.0",
    "passport-naver": "^1.0.6",
    "pm2": "^5.1.2",
    "sequelize": "^6.6.5",
    "sequelize-cli": "^6.2.0"
  },
  "devDependencies": {
    "nodemon": "^2.0.12"
  }
}

Answer

리버스 프록시 해보고 질의응답 찾아가며도 고쳐봐도 쉽지않네요..

말씀하신 것처럼 nginx가 노드서버를 가리키도록 하기 위해서는 conf파일을 수정해야할 것 같아서 작업중인데

딱히 틀린것 같진 않지만 계속 보고 있습니다 ㅠ

(app.js 리버스프록시 적용 수정내용)

nginx를 다시설치해서 해봐도 같네요

Answer

postman으로 다른 요청도 해봤는데 404에러가 나는거 보면 연결자체가 문제가 있는건가요?

pm2 monit하면

연결성공으로 나오는데 이거랑은 다른건가요? ㅠㅠ

Answer

jquery는 https 하시면 되고요. user 요청은 서버쪽 에러 있진 않나 확인해보세요.

PaPillOn빠삐용

안녕하세요 제로초님 배포후 에러가 발생해서 문의드립니다 ㅠ

이 글과 비슷한 Q&A

mongoDB 데이터 확인하는 법

로그인후 replace가 안되는 이유?

postman 에러

세션5 상품 목록 컴포넌트 처리