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

작성자 없음

작성자 정보가 삭제된 글입니다.

[리뉴얼] React로 NodeBird SNS 만들기

백엔드에 https 적용하기

nginx 후 Front(502 Bad Gateway), back(welcome to nginx) 라고만 나오는 문제

24.01.24 23:58 작성

·

762

·

수정됨

0

안녕하세요 선생님
front, back nginx 한 뒤로
둘다 https라고 바뀌고 인증서도 있긴한데,

Front(502 Bad Gateway)라고 나오고

back(welcome to nginx) 라고만 나오는 상태입니다.
(설치는 Nginx Ubuntu20보고 했습니다
https://certbot.eff.org/instructions?ws=nginx&os=ubuntufocal&tab=standard)

스크린샷 2024-01-24 오후 9.47.31.png스크린샷 2024-01-24 오후 10.27.25.png스크린샷 2024-01-24 오후 10.28.34.png스크린샷 2024-01-24 오후 9.47.34.png

스크린샷 2024-01-24 오후 10.27.13.png스크린샷 2024-01-24 오후 10.27.33.png

문제1)그래서 첫번째 문제로 back에서 sudo npx pm2 logs --err --lines 200를 해보았을 땐 아래와 같은 경고가 나왔습니다.

0|app      | Warning: connect.session() MemoryStore is not
0|app      | designed for a production environment, as it will leak
0|app      | memory, and will not scale past a single process.

질문1)찾아보니까 express-session 미들웨어의 기본 메모리 저장소(MemoryStore)를 사용할 때 MemoryStore가 개발 환경에서는 적합하지만, 실제 프로덕션 환경에서는 메모리 누수 문제와 단일 프로세스 제한으로 인해 적합하지 않아 프로덕션 환경에서는 Redis, MongoDB 등의 세션 저장소를 사용하라는데, 그럼 front 화면이 나오는건지 궁금합니다,,

 

문제2)그리고 두번째 문제로 back에서 tail /var/log/nginx/error.log를 했을 땐 아래와 같은 에러가 나왔습니다.

ubuntu@ip-172-31-12-59:~/react_nodebird/back$ tail /var/log/nginx/error.log
2024/01/24 12:19:54 [warn] 420260#420260: conflicting server name "api.luckyhaejin.com" on 0.0.0.0:80, ignored
2024/01/24 12:19:54 [notice] 420260#420260: signal process started

질문2)찾아보니 Nginx 설정 파일 내에api.luckyhaejin.com이라는 서버 이름(server name)이 80 포트에서 두 번 이상 선언되었음을 나타내는 에러라는데 어떤 부분이 잘못되었는지 잘 모르겠어서 어딜 확인하면 좋을지 문의 드립니다.

 

질문3)강의에서 Ubuntu서버만 바꿔주고 로컬은 바뀌는 부분 이없는거같아서 Ubuntu서버에서만 바꿔줬는데, 그럼 로컬에도 Ubuntu에 설치한 것 다 포함해서 코드까지 다 바꿔준 뒤 Ubuntu에서 git pull 다시 해줘야할까요,,?
 

현재 설정된 내용)

front=> /etc/nginx/nginx.conf => server관련

(글을 옮겨적으니까 들여쓰기 해서 정리 한게 코드가 전부 합쳐져서 사진으로 올립니닷,,)

스크린샷 2024-01-24 오후 11.10.53.png
front/pacakage.json에서 start부분에 3060 잘 되어있음

스크린샷 2024-01-24 오후 10.51.03.pngfront => /etc/nginx/nginx.conf
스크린샷 2024-01-24 오후 11.12.40.pngfront/config/config.js에서 backUrl설정 잘 되어있음

스크린샷 2024-01-25 오전 5.43.19.png

back => /etc/nginx/nginx.conf

스크린샷 2024-01-24 오후 11.22.35.pngback => app.js(사진이 보기 편하실거같아서 코드랑 둘다올려욧)

스크린샷 2024-01-24 오후 11.53.24.png

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 postRouter = require('./routes/post');
const postsRouter = require('./routes/posts');
const userRouter = require('./routes/user');
const hashtagRouter = require('./routes/hashtag');
const db = require('./models');
const passportConfig = require('./passport');
const path = require('path');
const hpp = require('hpp');
const helmet = require('helmet');
dotenv.config();
const app = express();
db.sequelize.sync()
    .then(() => {
        console.log('DB 연결 성공');
    }).catch(console.error);
passportConfig();
if(process.env.NODE_ENV === 'production'){
    app.use(morgan('combined'));
    app.use(hpp());
    app.use(helmet());
    app.use(cors({
        origin: 'https://luckyhaejin.com',
        credentials: true
    }));
} else {
    app.use(morgan('dev'));
}
app.use('/', express.static(path.join(__dirname, 'uploads')));
app.use(express.json());
app.use(express.urlencoded({extended:true}));
app.use(cookieParser(process.env.COOKIE_SECRET));
app.use(session({
    saveUninitialized: false,
    resave: false,
    secret: process.env.COOKIE_SECRET,
    cookie: {
        httpOnly: true, //자바스크립트로 접근하지못하게
        secure: true, //일단 false로 하고 https적용할 땐 ture
        domain: process.env.NODE_ENV = 'production' && '.luckyhaejin.com' //도메인 사용할 경우 
    },
}));
app.use(passport.initialize());
app.use(passport.session());
app.get('/', (req, res) =>{
    res.send('hello express');
});

app.use('/posts', postsRouter);
app.use('/post', postRouter);
app.use('/user', userRouter);
app.use('/hashtag', hashtagRouter);

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

back => /etc/nginx/nginx.conf

스크린샷 2024-01-24 오후 11.22.08.png
사용중인 Os) macOS

답변 2

1

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

2024. 01. 25. 09:03

프론트쪽은 luckyhaejin.com이 3060이 아니라 3360 포트로 되어있네요.

백엔드쪽은 nginx.conf에 api.luckyhaejin.com 관련 설정이 두 개 이상 있는 거 아닌가요?

박해진님의 프로필 이미지

2024. 01. 25. 15:29

감사합니당! front, back 둘다 port 오타 수정했더니 front 화면 나왔고요, back에서 server_name중복 문제 확인해보니까 nginx.config에서는 중복없이 front와 똑같이 설정 되어있긴 했는데, 다른 파일에 동일한 server_name이 발견이 되서 중복 삭제했더니 back에서 hello express 나오고 front에서 로그인, 게시물 불러오기됐습니다!

==================================

back 80포트에 server_name중복된 문제 원인)
처음에 설치할 때 front는 server설정 먼저 한 다음 명령어를 쳐줬는데, back부터는 자동으로 server설정 되는줄알고 서버 설정 안한 상태에서 명령어를 쳤다가 설정이 안되어있어서 다시 설정한 다음 명령어를 다시 쳐서 back만 중복이 됐던거같습니다!

 

해결 과정)

sudo grep -R "luckyhaejin.com" /etc/nginx/sites-enabled/

 sudo grep -R "api.luckyhaejin.com" /etc/nginx/sites-available/

스크린샷 2024-01-25 오후 1.25.55.png스크린샷 2024-01-25 오후 1.28.21.png

 sudo vim /etc/nginx/sites-enabled/default

스크린샷 2024-01-25 오후 1.36.17.png스크린샷 2024-01-25 오후 1.36.37.png

수정 후

둘다 sudo systemctl restart nginx
front 에서 sudo npm run build
둘다 sudo npx pm2 reload all


==================================



0

Lorde Laura님의 프로필 이미지

2024. 06. 18. 13:01

Engage with the Emoji Kitchen community online. Sharing your creations and seeing what others have made can provide inspiration and new ideas.

작성자 없음

작성자 정보가 삭제된 글입니다.

질문하기