포트 정리
front와 back을 구성하는 건 완료했다. 이제 둘을 실행할 포트를 지정해줘야 한다.
front는 3000포트, back은 8080포트를 사용할 예정이다.
찾아보니, NGINX를 앞에 두는 게 안전할 것 같았다.
왜 안전한 지는 이 블로그를 참고하면 될 것 같다.
https://velog.io/@dgh03207/Nginx-%EB%A6%AC%EB%B2%84%EC%8A%A4-%ED%94%84%EB%A1%9D%EC%8B%9C%EB%B0%B1%EC%97%94%EB%93%9C%EB%9E%91-%ED%94%84%EB%A1%A0%ED%8A%B8%EB%A5%BC-%EA%B0%99%EC%9D%80-%ED%8F%AC%ED%8A%B880%ED%8F%AC%ED%8A%B8%EB%A1%9C-%EC%97%B0%EA%B2%B0
nginx.conf 파일을 찾아 열고 server 부분을 다음과 같이 설정했다.
server {
listen 80;
listen [::]:80;
server_name jaewontop.com;
root /usr/share/nginx/html;
# Load configuration files for the default server block.
include /etc/nginx/default.d/*.conf;
location /api {
proxy_pass http://jaewontop.com:8080;
}
location / {
proxy_pass http://jaewontop.com:3000;
}
error_page 404 /404.html;
location = /404.html {
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
}
}server_name에는 본인의 도메인 주소
location에는 input 주소와 연결시킬 주소+포트를 작성해주면 된다.
이 사이트의 경우, /로 그냥 들어올 때는 프론트 포트(3000), /api로 들어올 땐 백엔드 포트(8080)로 접속할 수 있게 해주었다.
그리고
systemctl restart nginx명령어를 통해 nginx를 재시작했다.
성공!
뒤에 포트를 붙이지 않고 프론트 포트(3000)에 접속하는 걸 확인할 수 있다.
그럼 백엔드 포트는 어떨까?
우선 접속이 되는 건 확인했다. 다만 아직 백엔드는 EC2에 올리지 않아서 보이는 페이지 같다.
EC2에서 백엔드 레포지토리를 clone하고 필요한 package를 install한 후 실행해 봤다.
Cannot GET이라고 뜬다.
성공!!
이건 백엔드 코드의 문제이니 포트 정리는 완료되었다.
백그라운드 프로세스(Feat. nohup)
매번 터미널을 끌 때마다 서비스가 종료되면 서버를 두는 의미가 없지 않나?
백그라운드에서 프로세스가 돌아가는 방법이 분명 있을 것 같아서 찾아봤다.
PM2, forever, nohup 등이 있었는데, Nohup을 써보려고 한다.
이유는 일단 간단하게 실행 가능하고, 로그도 남길 수 있고 문제 생길 게 없어보였다. (아니려나..?)
명령어는 진짜 간단하다.
이 프로젝트의 경우 backend 폴더 안으로 들어가서
nohup node index.ts &를 입력했다. 여기서 &는 백그라운드에서 실행시키는 문법이라고 한다.
심지어 nohup.out으로 log도 간단하게 출력해준다.
front도 마찬가지로 폴더 안에서
nohup npm run dev &명령어를 쳐주었다. 물론 나중엔 npm run dev가 아닌 실제 프로덕트 명령어를 쳐주어야 겠지만, 아직은 개발 단계이기에 dev로 돌려주려고 한다. instance 두 개를 운영해서 develop과 production으로 나누는 게 맞을 거 같기도 하다.
백그라운드에서도 돌아가니 이제 본격적인 코딩을 시작할 수 있다ㅎ
