Docker + Jenkins + Github + Grafana + Next14 Panda CSS 다크모드 적용해보기 전체적인 웹사이트의 형태를 갖추고 난 뒤, panda css에 동적으로 스타일을 적용해보는 몇가지 시도를 진행해보았다. 가장 먼저, 동적으로 내가 원하는 색상을 보이도록 styled css를 작성해보았다. const circle...

Docker + Jenkins + Github + Grafana + Next14 지난 시간… 지난 시간동안 Jenkins에서 도커 이미지를 빌드할 수 있도록 설정하고, 간단한 Next14 프로젝트를 통해 해당 동작이 정상적으로 동작하는지 테스트를 수행해 보았다. 전체적인 자동 빌드 배포 프로세스가 설정되었으니, 이제 우리는 본격적으로 Next14...

Docker 이미지 재사용에 관하여 - 1 시작하기 최근 꽤 흥미로운 이슈 하나가 프론트엔드에 나타났다. 바로 빌드된 Docker 이미지의 재사용에 관한 이야기였다. 현재 프로젝트들은 여러 개발 단계를 거쳐 배포로 이어지는데, 이 단계마다 이미지를 빌드하고 사용하는 방식으로 활용되고 있었다. 생각해보면 참 이상한 일이다. Docker image를 ...

Docker + Jenkins + Github + Grafana + Next14 시작하기… 이번에는 Nginx를 도커로 말아 프록시 서버로 동작할 수 있게 할 계획이다. Nginx와 Next14를 1:1로 사용할 예정이기도 하고, 기존에 세팅되어 있는 Nginx는 더 이상 사용하지 않을 것이기 때문에 시스템 상에서 Nginx를 내리고 새로운 Do...

Docker + Jenkins + Github + Grafana + Next14 Jenkins에 Docker 설치 전에… Grafana 관련으로 약간의 수정사항이 발생했다. 아무래도 도커 컨테이너를 기반으로 운영을 할 예정이다 보니, Grafana 또한 Docker로 관리하는 것이 좋을 것 같다는 판단이 들었다. 때문에 기존의 Grafana를 제...

Next14 랜더링 방식 고민해볼 이슈… 최근 있었던 프로젝트의 랜더링 방식 관련으로 고민을 해볼 겸 한 번 정리를 해보려고 한다. 이슈 사항은 다음과 같다. 페이지가 검색엔진에 노출이 되고 빠르게 로드될 수 있도록 SSG로 운영하던 프로젝트가 있었는데, 몇가지 변경사항으로 인해 다이나믹 라우팅을 수행해야만 했다. 페이지 자체는 수가 많지 않을 것...

Docker + Jenkins + Github + Grafana + Next14 이어서… Dockerfile을 작성하고 로컬에서 정상적으로 동작하는 것을 확인했다. 해당 도커 이미지는 서버에 올릴 때도 동일한 컨테이너로 생성되어 동작하기 때문에 로컬과 서버에서 서로 다른 환경 문제로 오류가 발생하는지의 여부를 미리 파악할 수 있다. 이제 Doc...

Docker + Jenkins + Github + Grafana + Next14 시작하기… Next14로 간단한 프로젝트를 만들어 보는 것도 끝났고, 슬슬 기존에 만들었던 Three.js 웹사이트를 새로 리뉴얼할 때가 되었다고 생각이 들었다. 지난 시간에 Docker를 VPS에 설치하여 내부에 Jenkins를 설치하는 것 까지 시도를 했었다. 여...

Grafana와 Prometheus 시작하기… 전 회사에서 항상 골치였던 것들 중 하나는 바로 CPU가 뻗어버리는 일이 자주 발생했다는 것이었다. 클라우드 서비스를 이용하는 것이 아닌, 실제 물리 서버에 연결되는 구조였지만, 여러가지 이유로 인해 필요한 성능보다 낮은 부품들로 구성된 서버를 활용한 탓에 새벽마다 CPU 사용률 99%를 찍고 죽어버리...

AWS 용어를 알아보자 시작하기… AWS와 도커를 사용해서 어떻게 프론트엔드를 올리는지에 대해서는 이해했지만, 여전히 AWS에는 너무 많은 서비스들이 존재하고, 이러한 것들이 어떻게 서로 동작하는지, 왜 필요한지에 대해서는 제대로 이해가 가지 않았다. 하지만 DevOps와 원활히 소통하고 점점 규모가 커지고 복잡해지는 프로젝트를 다루기 위해서는 해...