구성 방식

flowchart LR
    A[web] --> B;
    B[Nginx 웹서버 \n 80, 443] --> C;
    C{Vuejs로 빌드한 dist폴더} --> E;
    C --> D[assets];
    E[html] --> |Rest API| G[server1];
		E --> |Rest API| I[server2]
		E --> |Rest API| F[...]

Nginx 구성 (OS : Centos8 Stream)

1. Docker 배포

   # centos8 에서 podman이 설치되어 있을 가능성이 있으니 제거해줍시다.
   sudo dnf remove podman
   
   # 공식 문서에 따른 설치 방법입니다.
   sudo yum install -y yum-utils
   sudo yum-config-manager --add-repo <https://download.docker.com/linux/centos/docker-ce.repo>
   sudo yum install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin
   sudo systemctl start docker
   
   # 테스트용 구문입니다.
   sudo docker run hello-world
   
   # $USER 계정에서 sudo 권한 없이 docker를 실행하기 위한 설정입니다.
   sudo groupadd docker
   sudo usermod -aG docker $USER
   sudo usermod -aG docker backend
   newgrp docker
   

2. Vue.js 빌드 및 폴더 구조 생성

   # git으로 클론한 레포지토리 내부로 이동해서
   cd ~/YOMANKUM_Front/YOMANKUM_frontend
   
   # npm install 후 프로젝트 빌드 해줍니다.
   npm run build
   
   # dist 폴더가 생성될 텐데, 
   # 이후 배포할 nginx 서버가 이 폴더 안에 있는 html을 바라보고 있어야 합니다.
   # 우선 nginx 를 위한 폴더 하나를 홈 경로에 생성해줍시다.
   
   mkdir -p ~/nginx/conf
   
   # dist 폴더에 대한 심볼릭 링크를 생성한 nginx 폴더 아래 만들어줍니다.
   ln -s ~/YOMANKUM_Front/YOMANKUM_frontend/dist ~/nginx/dist
   

3. Nginx 배포 ( by docker )

   # 다음과 같이 nginx 컨테이너를 배포합니다.
   # nginx 공식문서 (<https://docs.nginx.com/nginx/admin-guide/web-server/web-server/>)에 나온대로 볼륨 바인드를 해줬습니다. 
   # /conf 폴더는 nginx 설정을 위한 폴더이고, (뒤에서 /etc/nginx/conf.d로 연결하는 것으로 바꿉니다.)
   # /dist 폴더는 실제로 배포할 html 파일의 경로를 의미합니다.
   docker run \
   	--name nginx --mount \
   	type=bind,source=./dist,target=/usr/share/nginx/html,readonly --mount \
   	type=bind,source=./conf,target=/etc/nginx/conf,readonly \
     -p 80:80 -d nginx
   

4. 컨테이너 안 살피기

   # 컨테이너 내부 들어가기
   docker exec -it nginx /bin/bash
   
   #---- 접속 후 nginx 관련 파일들 살펴보기
   cd /etc/nginx/
   

배포가 정상적으로 완료되었다면,

공인 아이피로 접속 시 다음과 같이 프론트엔드 화면이 나타납니다.

DNS 연결

공인 아이피는 곧 바뀔 거니까…

도메인을 구매했으니 이제 마지막 작업 하나가 남았습니다.

HTTPS 프로토콜을 위한 인증서 생성입니다.

HTTPS 인증서 발급

인증서는 Certbot (eff.org) 을 활용할 것 입니다. 90일 마다 갱신해줘야하는 귀찮음은 있지만, 무료로 SSL 인증서를 발급해주니 좋습니다.