Backend CI/CD 파이프라인

• 이전 작업까지해서 Backend CI/CD 파이프라인 구축 작업 테스트는 완료하였다. 하지만 개발자님이 Backend부분에 대해서 추가 개발 및 Git을 나누어 놨기 때문에 해당 Git을 다시 fork해서 나의 workDIR과 remote 연결(SSH주소로 clone) 시켰다.

• 해당 Backend 코드를 다시 빌드하기전에 빌드할때 발생하였던 WARN을 해결하고자 아래와 같이 코드를 추가하였다.

vi /src/main/resources/aplication.yml

open-in-view: false # 코드 추가 

• 이후 이전작업에서 작성했던 Jenkinsfile과 Dockerfile을 fork해서 가져온 Git에 다시 Push하였다.
• Jenkinsfile에서 Git URL을 새로운 Git 주소로 변경하였다.
• Jenkins 파이프라인 설정에서도 Git URL을 새로운 Git 주소로 변경하였다.
• 다시 파이프라인을 빌드해보니 정상적으로 빌드되어 최종적으로 ArgoCD에 새로운 이미지로 배포되는 것을 확인하였다.

Frontend CI/CD 파이프라인

• Frontend인 경우는 User페이지와 Admin페이지가 구분되어있다. 개발자분도 페이지를 나누어서 개발중이다.
• 따라서 파이프라인을 구축해 빌드하는 것도 나누어서 빌드할 것이다.
• 따라서 Admin Frontend 와 User Frontend에 대해 각각 Deployment와 service를 추가할것이다. 이때 User Deployment에는 User 웹페이지를 나타내는 이미지, Admin Deployment에는 Admin 웹페이지를 나타내는 이미지를 구분하여 적용시킬 것이다.
• 이후 각각의 service를 동일한 ingress에 연결시킬것이고, 다만 ingress의 다중경로 설정을 통해 https://도메인/admin을 입력하면 Admin 페이지를 띄우는 파드에 연결되어있는 서비스로 연결할 것이고, 사용자가 https://도메인 만을 입력하면 User 페이지를 띄우는 파드에 연결되어있는 서비스로 연결되게 할 것이다.
  -> ingress를 이용하여 페이지를 구분하는것은 내가 구상한 아키텍처이고, 실제로 될지 안될지는 잘 모르겠다. 추후에 구현해보고 안된다면 페이지 구분 아키텍처에 대해서는 변경할 예정이다.
  -> 또한 위의 방식으로 구현한다면, 도메인을 통해서 User와 Admin을 구분하는 것은 사용자가 쉽게 Admin페이지에 접속할 수 있기 때문에 User가 Admin페이지에 접속할 수 없게 만드는 보안장치도 구현해야 할 것이다.

---

Frontend 도커라이징

• 지금까지 개발자분이 개발한 Frontend 코드에 대해서 도커라이징을 해볼것이다.

1 . 인스턴스 생성

• 인스턴스 환경에서 도커라이징을 테스트할 것이다.
• SSH접속 및 Hostname 변경

2 . git clone

• 개발자분의 Frontend - Admin 코드를 가져온다.

3 . 툴 설치

Dockerfile 빌드를 위한 Docker 설치

sudo apt install -y nginx # nginx 설치 

📒 npm, nodejs 설치 참고

4 . Dockerfile 작성

FROM node:lts-alpine AS builder
WORKDIR /app # app 디렉터리에서 작업
COPY package*.json ./ # package.json파일을 app디렉터리로 복사 
RUN npm install # module 생성 
COPY . . 
RUN npm run build # Frontend 빌드의 결과물인 dist 생성 

FROM nginx:stable-alpine # nginx에 웹페이지 올리기 위해 
COPY --from=builder /app/dist /usr/share/nginx/html 
# nginx가 보여줄 정적웹페이지는 빌드의 결과물인 dist
EXPOSE 80
CMD ["nginx",  "-g", "daemon off;"]

• 원래는 Dockerfile을 작성하기 이전에 nodejs를 설치하면서 자동으로 설치된 npm을 이용하여 install 및 build를 통해 dist가 정상적으로 생성되는지 확인해야한다. 하지만 막상 수동으로 빌드해보니 계속해서 에러가 발생하였다.
• 따라서 Dockerfile에서 위의 수동 빌드과정을 작성하여서 빌드하였더니 에러가 발생하지 않고 정상적으로 이미지가 생성되었다.
  -> Dockerfile에서는 정상적으로 빌드되고, 수동으로 빌드할때는 안되는지는 계속 알아봐야 할 것 같다.

docker run -it -p 8080:80 --name myweb frontend:testv1

• 위에서 생성한 이미지로 컨테이너를 생성한 후 브라우저에
  인스턴스 퍼블릭IP:8080을 입력하니 로그인 페이지가 나타나는 것을 확인

5 . ArgoCD로 배포

• 정상적으로 페이지가 나타나는 것을 확인하였으니, Docker Hub에 Push한다
• ArgoCD가 배포중인 Frontend-Deployment의 image를 위에서 Push한 image로 교체한다.

• 브라우저에 https://도메인 을 입력했을 때 정상적으로 로그인 페이지가 나타난다.
• 의문인점은 위에서 컨테이너를 실행시켜서 브라우저에 인스턴스의 퍼블릭IP:8080를 입력했을 때는 정상적으로 로그인페이지가 뜨지만, 8080포트가 아닌 80으로 접속했을 때는 그냥 nginx페이지가 뜬다. 하지만 ArgoCD에 배포하기 위해 해당 image로 교체하고 Container Port로 80포트를 뚫어놓은 상태에서 브라우저에 도메인을 입력하면 로그인페이지가 뜬다. 즉 8080으로 Frontend파드에 접근하지 않았음에도 로그인페이지가 뜬 것이다.
  -> 심지어 nginx의 기본 Port 80이 아닌 , Container Port에 8080을 뚫어놔도 정상적으로 로그인페이지가 뜬다. 이것에 대해서는 좀 더 학습하고 알아봐야할 것 같다.

다음 계획

• Frontend의 도커라이징이 완료가 되어 이미지화 시켜서 배포하긴 했지만 아직 어설픈 부분이 있어서 계속해서 작업할 예정이다. 또한 Frontend와 Backend 연결 부분에 있어서도 계속 자료조사와 테스트 작업을 할 예정이다.