Intro
nginx를 처음 접했는데 이게 다 무엇일까 익숙하지 않은 것들 투성이다. 설정들과 속성들이 너무 많은데 나는 그냥 배포용으로 속성 과외를 원한다! 를 목적으로 작성했습니다.
사실 저를 위해 작성했습니다. 자꾸 버벅여서 이거 설정한다고 롤백을 10번쯤 했거든요.
Nginx 설치
brew install nginx
내 개발환경은 Mac(Mini)지만 windows도 사이트 검색하면 충분히 쉽게 다운로드 가능하다.
Nginx 명령어
nginx 시작/중단
brew services start nginx
brew services stop nginx
nginx 재시작
brew services restart nginx
nginx에는 nginx.conf 파일이 있는데 주의할 점은 이 파일에 에러가 있어도 nginx를 재시작하는데는 문제가 없다는 것이다.
하지만 은은하게 동작 안 할 것이기 때문에 재시작 전에 꼭 파일 테스트를 돌려봐야 한다.
sudo nginx -t
homebrew로 깔았더니 이 설정 파일이 어딨는 지를 잘 모르겠다.
설정 파일은 gui 수정을 더 선호한다. 실수를 덜 함.
vscode에서 code를 설치하고 아래를 터미널에 실행하면 OK
code /opt/homebrew/etc/nginx
nginx.conf 실습하기
nginx를 설치하고 정말 아무것도 하지 않았을 때! nginx.conf.default 내용 그대로다.
이 상태로 그대로 실행하면 http://localhost:8080 으로 접속했을 때 Welcome nginx 기본 화면을 볼 수 있다.
근데 난 이 화면을 쭉 쓸게 아니지. 그리고 포트도 백엔드에서 이미 8080 쓰고 있단 말이지. 내 입맛대로 고쳐보자.
proxy 설정
nginx의 장점은 클라이언트의 요청들을 nginx가 대신 받아서 내부 서버로 전달해주는 리버스 프록시 역할을 한다는 것이다.
나는 / 경로에 프론트 프로젝트(3000)를, /api 경로에 백엔드 프로젝트(8080)를 연결했다. 또한 기존 기본 8080에서 82로 변경했다.
server {
listen 82;
server_name localhost;
location / {
proxy_pass http://localhost:3000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
location /api {
proxy_pass http://localhost:8080;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}이제 http:localhost:82 로 접속해도 내 프론트 프로젝트 화면이 적용된다.
이 때
npm run dev가 아니라npm run build후npm run start명령어를 통해서 운영(Production) 버전으로 실행했습니다.
왜냐햐면 이렇게 안 하면 코드를 저장해도www.jinvicky.shop같은 외부 도메인으로 접속했을 때 코드 반영이 안되거든요.
로그인 코드 짠다고 onChange 코드랑 submit 다 짜고 저장하고 외부 도메인에서 접속해봤는데 로컬 환경 아니면 반영이 안되어서 운영으로 빌드 후 실행했더니 반영이 되었던 경험이 있습니다.
근데? 난 로컬환경만으로 만족하지 못해! 사용자들(신청자분들께)께 이것을 보여주고 싶다!
그러면 뭐 도메인 사서 연결해야지
🚨 여기서부터는 DDNS, 포트포워딩, 도메인 구매 다 했다는 가정에 진행됩니다.
conf상으로는server_name만 변경하면 끝이지만 저는 처음이라 이 3가지를 하겠다고 며칠을 날렸습니다;;
📃 도메인 구매 https://velog.io/@jinvicky/purchase-apply-domain
📃 포트포워딩 https://velog.io/@jinvicky/port-forwarding-ddns-cors
server_name을 도메인명으로 변경
http:// 를 제외한 구매한 도메인명을 server_name에 입력한다. ssl 적용한 것도 해보면 좋겠지만 아직도 머리 깨면서 도전중이라;;
server_name은 백엔드 서버를 적어야 한다고 생각했는데 요청을 받을 url을 의미하는 것이었다.
✅ 즉 나는 www.jinvicky.shop에 접속했을 때
DNS 레코드에 저장한.iptime.org에 타고 들어와서 포트포워딩 설정을 타서80접속이 오면 내 nginx의82를 타고 리버스 프록시를 태워서 내부 서버로 들어가는 것이다.
server {
listen 82;
server_name www.jinvicky.shop; # 클라이언트 요청을 받을 도메인이름
그럼 이렇게 도메인을 적용할 수 있다.
Outro
하다 안되면
- 백그라운드 실행 여부 설정 가서 체크
- 홈서버 재시작
default.conf로 처음부터 시작- 인내심을 가진다....
jinvicky
Front-End, Back-End Developer
✉️ Email: jinvicky@naver.com
💻 Github: https://github.com/jinvicky
