[NET/Nginx] - Nginx에서 DNS별로 LB하기

목표

• 각기 다른 DNS로 접속할 떄 개발과 배포가 다른 프론트 페이지로 보이게 한다.
  

사전 작업

• node install

brew install node 

main ±  node -v
v20.5.1

• npm install

sudo npm install

 main ±  npm -v
9.8.0

• proxy server에서 배포할 자료 nginx server로 파일 전송 (하위 파일까지)

# sudo scp -r ~/fe/dev/* 10duck-nginx-app:/var/www/dev/
# sudo scp -r ~/fe/prod/* 10duck-nginx-app:/var/www/prod

• 실행

npm start - 실행

 npm run clean - 돌아가는 run clean

 npm run build - 다시 build

배포 과정

• 배포할 .jsx 파일 구성
  ex)

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          개발(배포)서버 입니다.
        </p>
      </header>
    </div>
  );
}

1) nginx install

2) /etc/nginx/sites-available에 dev-page(개발 페이지) 생성

server {
	listen 80;
	server_name dev.playlist.10duck.kr;
	location / {
		root /var/www/dev;
		try_files $uri $uri/ /index.html;
		index index.html;
	}
}

3) /etc/nginx/sites-available애 prod-page (배포 페이지) 생성

server {
	listen 80;
	server_name playlist.10duck.kr;
	location / {
		root /var/www/prod;
		try_files $uri $uri/ /index.html;
		index index.html;
	}
}

4) /etc/nginx/sites-enabled에서 dns에 띄울 symlink기능 연결

• link 생성 방법 (링크 연결을 하지 않으면 )

  ln -s {원본파일} {링크 파일}

  ln -s /etc/nginx/sites-available/dev-page dev-page
  ln -s /etc/nginx/sites-available/prod-page prod-page

5) nginx restart!

에러 출력시엔 상태 확인 명령어로 Error 출력을 바로 잡는다!

/etc/nginx/sites-enabled# service nginx start
Job for nginx.service failed because the control process exited with error code.
See "systemctl status nginx.service" and "journalctl -xe" for details.

• 성공!
  

• 각 DNS별로 연결 완료 사진
  개발 프론트 page)

배포 프론트 page)