pm2 연결, 프론트 서버 배포

개발공부·2023년 2월 7일
0

* AWS 원격으로 접속되어 있는데 서버 끄면 화면이 아예 꺼짐

▶ forground process (node app.js 실행 시) : 터미널 끄면 같이 꺼짐
▶ background process : 터미널 꺼도 안 꺼짐 (pm2)

[prepare/back]

sudo node server.js

▶ ubuntu는 80번 포트로 접속할 권한이 없음(sudo suroot로 진행해야 함)

* 탄력적 IP로 설정 하기 전 IP 간에는 쿠키 전달되지 않음

▶ 결과 2) 배포 후 로그인 시 로그인은 되나 바로 로그인이 풀려버리는 것이 그 이유
(참고 : 로그인할 때 쿠키가 안 들어가집니다.)

*결과

1) 배포 후 회원가입

2) 배포 후 로그인

[pm2 연결]

  • 아래의 과정은 sudo su 후 진행
  1. pm2 설치

npm i -g pm2

  1. package.json 이동

vim package.json

"start": "node server.js"에서 "start": "pm2 start server.js

npm start

  1. pm2 모니터링

npx pm2 monit

  1. pm2 끄는 것

npx pm2 kill

  1. AWS내 인스턴스 IP가 계속 바뀜(탄력적 IP로 고정 가능, but 돈 나감)
  • server.js
if (process.env.NODE_ENV === "production") {
  app.use(morgan("combined"));
  app.use(hpp());
  app.use(helmet());
  app.use(
    cors({
      origin: [ "가비아에서 산 주소", "http://localhost:3000"],
      credentials: true,
    })
  );
} else {
  app.use(morgan("dev"));
  app.use(
    cors({
      origin: "http://localhost:3000",
      credentials: true,
    })
  );
}
  • package.json

"start": "cross-env NODE.ENV=production pm2 start server.js"

* git 오류 : git pull 시 Aborting (참고 : 로컬 브랜치와 충돌로 인해 pull 오류 발생 시 대처법)

1. HEAD 되돌리기

git reset --hard HEAD
git pull

2. git stash로 스택 쌓고(임시 저장) 이후 수정한 내용 복구 가능

git stash
git pull

▶ 했던 작업 다시 가져오기 (참고 블로그)

git stash apply

▶ 했던 작업 제거하기

git stash drop

▶ stash 되돌리기

git stash show -p | git apply -R

3. git reset --hard 사용하기(이걸 주로 이용함)

▶ 현재 작업 위치인 HEAD의 포인터를 특정 위치로 변경

  1. pm2 list 확인

npx pm2 list

  1. 80번 포트 확인

lsof -i tcp:80

  1. pm2 삭제

npx pm2 kill

  • npx pm2 reload all(다시 재시작)
  1. git에서 수정한 내용들 중 npm으로 설치할 것이 있는 경우

npm i

  1. pm2 다시 시작

npm start

  1. AWS 인스턴스 내 자동 할당된 IP 주소로 주소 확인하기

[프론트 서버 배포]

  • 아래의 과정은 sudo su 후 진행(prepare/front에서 진행)
  1. 백엔드 서버가 열려있어야 프론트가 정상 작동

▶ server side props 등이 백엔드에서 데이터를 갖고와 보여주기 때문
▶ 문제 sagas/rootSaga.js 내 axios 주소가 localhost:3005로 되어 있음

axios.defaults.baseURL = "http://localhost:3005";

▶ 백엔드 서버주소를 관리하는 config/config.js 생성
(saga 말고도 컴포넌트 단에서 백엔드와 호출하는 것들이 존재하기 때문)

  1. pm2 설치 후 git pull

npm run build

npx pm2 start npm -- start

sudo npx pm2 monit

sudo npx pm2 logs //에러 확인하기 위함

* 오류 1 : front 화면이 보이지 않을 경우

▶ npm run build는 정상적으로 동작
▶ npm start(cross-env NODE_ENV=production pm2 next start -p 80) 시 오류남

  • 수정 사항
    npx pm2 start npm -- start로 pm2를 실행하므로 package.jsonstart에서 pm2 삭제

수정 전 : start": "cross-env NODE_ENV=production pm2 next start -p 80"

수정 후 : start": "cross-env NODE_ENV=production next start -p 80"

▶ backend와 연결 시 front의 퍼블릭 주소가 없다면 연결되지 않음
(prepare/back/server.jsapp.use.corsorigin에 front 퍼블릭 주소 추가)
▶ 아직 탄력적 IP 발급하지 않음

//수정 전
 app.use(
    cors({
      origin: [
        "가비아 발급 주소",
        "http://localhost:3000",
      ],
      credentials: true,
    })
  );
//수정 후
 app.use(
    cors({
      origin: [
        "가비아 발급 주소",
        "http://localhost:3000",
        "인스턴스 퍼블릭 IPv4 주소",
      ],
      credentials: true,
    })
  );

* 오류2 (80번 포트 관련)

▶ 해결책 : 참고 블로그)
▶ 감사합니다... 감사합니다....
▶ 80번 포트를 사용해야 하는데 이미 사용하고 있었기 때문에 생긴 오류

//오류코드
Access to XMLHttpRequest at 'http://15.165.15.241/user' from origin 'http://43.201.108.146' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value 'http://localhost:3000' that is not equal to the supplied origin.
  • pm2로 실행 시 서버 켜짐과 동시에 모니터링을 해야 함

  • front쪽

npx pm2 start npm -- start && npx pm2 monit

  • backend쪽

npm start && npx pm2 monit (혹은 npm start && npx pm2 logs)

▶ 확인한 내용

Error: listen EADDRINUSE: address already in use :::80

  • 80번 포트 사용 하는 것 찾기

sudo lsof -i :80

//만약 포트가 있다면 나올 결과
COMMAND   PID USER   FD   TYPE DEVICE SIZE/OFF NODE NAME
node    18869 root   21u  IPv6 104078      0t0  TCP *:http (LISTEN) 

kill -9 18869

sudo lsof -i :80 //결과가 아무것도 안 나와야 정상

* 상황 : mysql databases 내 next_engword 파일을 삭제하고 다시 생성하고 싶을 경우

mysql > drop database next_engword;

mysql > show databases; //next_engword 없음

root# npx sequelize db:create

root# npm start && npx pm2 logs

mysql > show databases; //next_engword 있음

profile
개발 블로그, 티스토리(https://ba-gotocode131.tistory.com/)로 갈아탐

0개의 댓글