Nginx를 써서 Node 백엔드와 통신하는 React Docker Image 만들기 (1)

(블로그 이사하면서 옮겨진 글입니다)

이 글에서는 기술에 대한 이야기는 전혀 다루지 않습니다. 본론으로 바로 넘어가실 분은 다음 글로 넘어가시면 됩니다.

개인용 웹페이지에 도메인을 연결하기로 결정했습니다. 집의 IP가 유동적으로 바뀌는 탓에 외부에서 접속하기가 너무 힘들었고, letsencrypt로 인증서를 발급받아서 사용하고 싶었기 때문이었습니다. 그래서 겸사겸사, Nginx로 배포하도록 변경해버리자고 생각했습니다.

저 혼자 사용하기 위해 만든 곳이기 때문에, 사실 Nginx를 사용할 이유는 거의 없습니다. 하지만, 시간과 노력이 든다는 점만 빼면 안할 이유도 딱히 없기 때문에 공부를 목적으로 진행했습니다.

그리고 또 겸사겸사, 기존에도 도커로 띄우고는 있었으나 도커로 띄우는 것의 장점을 잘 활용하고 있지 못하던 부분을 수정해야겠다고 생각했습니다. 그래서 지금의 프로젝트 구조를 조금 변경하기로 결정했습니다.

빌드를 거치지 않은 React를 그대로 실행하고 host 네트워크 상에서 돌아가던 예전 구조 빌드된 React를 Nginx를 통해서 제공하고 네트워크는 Bridge를 사용해서 백엔드 접근을 완전 차단한 지금 구조

시간은 많이 썼는데 이렇게 보니 달라진 게 없다...

목표를 설정했으니 이제 거기에 맞춰서 세팅을 하려고 했는데, 이 과정에서 많은 삽질을 했습니다. Nginx는 Nginx대로 무슨 옵션이 엄청 많고, 도커는 도커대로 많고, Docker-Compose는 그것대로 또 이런저런 옵션들이 있는데 이것들 중에 아는 건 거의 없다보니 그냥 블로그에서 가져오고 확인해보고...그것들의 반복에 가까웠습니다.

그리고 결국 돌아가게 만들고나서 여태까지 추가했다 지웠다 한 코드들과 결과물을 보고나니 쓸모없는 코드들도 너무 많이 추가했고, 각 기능을 이해하고 있으면 엄청 쉬운 문제였는데 돌아가게 만드는 것만 생각했더니 오히려 한참을 돌아서 왔습니다.

그래서 내가 사용하고있고, 동시에 자주 쓰일 것 같은 옵션들의 기능을 정리해두고자 글을 쓰게 되었습니다. 그리고 빠르게 공식문서 가이드를 확인할 수 있도록 최대한 링크를 추가하려고 했습니다.

그렇기 때문에 이 글의 중심은 Nginx와 Docker가 어떤 프로그램이고 왜 도입해야하는 지를 설명하는 것이 아니라, 거기에서 어떤 옵션이 있고 그게 어떤 기능을하는지를 중심으로 합니다. 그리고 그 옵션은 제가 사용해 본 옵션만을 다루며 아마도 혼자서 처음 도커와 Nginx를 다룰 때 가장 먼저 보게 될 옵션일거라고 생각합니다.