Vue와 Nest.js를 사용하여 redis, nginx, docker로 crud 만들기 - 2

전편 https://nibble2.tistory.com/75

Vue와 Nest.js를 사용하여 redis, nginx, docker로 crud 만들기 - 1

 

일단 나는 데브원영 cicd 강의를 수강했지만 살짝 다른 점이 있었다.
거기서는 전체 폴더 밑에 프론트 백엔드가 각각 있고 전체 폴더 하위에 docker-compose와 nginx파일을 만들었다면,
dev/front, dev/back, dev/nginx, dev/docker-compose, doccker/nginx 이런식으로

나는 각각 다른 폴더를 만들어 구현하였다.
front/, backend/, nginx/ 이것을 왜 언급하냐면 도커를 처음 사용해보는 개발자들은 경로가 다르면 설정파일에서 헷갈릴 수 있기 때문이다. 강의처럼 전체 폴더를 하나 만들고 그 안에 프론트와 백엔드를 구성하면 docker-compose 이미지를 만들 때나, nginx 관련 설정이 강의를 따라가면 더 쉬울테니..

구현 다이어그램
1. Front, Backend, Nginx 코드를 다 작성한 후 각각 이미지를 빌드한다.
2. 세개의 이미지 모두 docker-compose up하여 서비스를 시작한다.
  - 모두 local에서 서버를 띄운다.
3. 사용자가 localhost:80으로 접속하면 nginx는 lcaohost:8080로 가게한다.
4. api 호출을 한다면 localhost:3000으로 가게한다.

 

개인적으로 어려웠던 부분은 Nginx였다.
코드는 각각 작성하여 띄우면 됐지만 Nginx에서 코드를 어떻게 작성해야할지 몰랐다.
그리고 Nginx의 역할이 두개였다.
1. 프론트에서 정적 파일을 생성하는 부분
2. Reverse Proxy의 역할

react, vue, nest 모두 package.json 코드를 보면 build 부분이 있다.
서버에 코드를 올릴 때 build과정을 거치는데 build를 하게 되면 dist 라는 폴더가 만들어 지게 되고
그 폴더를 배포하게 된다. 그래서 Nginx에서 build 된 파일을 서버에 올리는 거라 웹서버의 역할이 있었고

Reverse Proxy의 역할도 있었다.