[Nginx] site-available 설정

 

기존에는 ejs를 사용하였기에 express서버 하나만을 배포하여 전부 해결할 수 있었지만, react를 공부하면서 디자인 패턴도 같이 조금씩 공부하다보니 react와 api 서버를 분리하여 배포를 해보고 싶었다.

 

react와 api 서버(nestjs)를 배포하기 위해 nginx를 사용하였다.

 

/etc/nginx/site-available의 default 파일에 해당 코드들을 추가해주면 된다.

 

react, vue와 같은 fe파일들 설정

• listen 포트 설정
• 도메인 설정
• location의 root 설정(index.html 파일이 들어있는 위치)

이렇게 설정해놓고 도메인에 접속하면 배포가 완료된 것을 확인할 수 있다.

 

※  react나 vue의 경우, router를 설정할 시 배포 환경마다 추가로 설정해야되는 것들이 있기에, 배포가 제대로 안된다면 찾아보면 좋다.

server {
	listen 80;
	listen [::]:80;

	server_name example.com;

	location / {
		root /var/www/example/frontend;
		index index.html;
		try_files $uri $uri/ /index.html;
	}
}

api서버 설정

• listen 포트 설정
• api 도메인 설정
• 설정해놓은 포트로 연결

이후 서버 파일들을 실행하면 정상적으로 작동한다.

nestjs를 사용하기에 pm2를 활용하여 파일을 배포하였다.

server {
	listen 80;
	listen [::]:80;

	server_name api.example.com;

	location / {
		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;
		proxy_pass http://[ip주소]:[포트];
	}

}