개발/Next.js21 도커 환경변수 외부 주입 (with Next14) 시작하기...일전에 프론트엔드 배포 환경을 도커 컨테이너 기반으로 변경하는 일이 있었다. 현재는 무사히 테스트 작업이 끝나 정식 배포가 진행되었지만 여전히 아쉬운 문제가 하나 남아있었다. 바로 '도커 이미지 재사용'에 대한 문제였다. 대부분의 회사에서는 테스트 서버와 production 서버를 분리하여 운영하는 일이 많다. 그리고 당연하게도 테스트 환경과 배포 환경의 차이점이라면 주입되는 환경변수가 다르다는 정도일 것이다. (환경변수 이외의 코드가 다를 경우에는 테스트의 의미가 없어져버리지 않을까....) 현재 우리는 코드를 병합하면 자동으로 이미지를 생성하고 EC2에 올라가 배포를 원하는 시점에 해당 이미지로 대체되어 운영된다. 하지만 여기서 이상한 점이 있다. 결과적으로 우리의 dev 이미지와 QA.. 2025. 1. 13. Next14 Prerendering 성능 개선의 딜레마종종 여러 인프라 개선을 위해 무언가를 적용해 보면, 꼭 기존에 사용하던 장점을 버려야 하는 경우가 발생한다. 프레임워크나 라이브러리의 한계라고도 볼 수 있을 것 같다. 블로그에도 추후 다루게 될 이슈이기도 하지만, 최근 이러한 개선과 관련된 업무를 진행하는 과정에서 Next14 프레임워크의 여러 세밀한 기능적 부분에 대해 충분한 이해가 없으면 해결하기 쉽지 않은 이슈에 봉착했다. 그 중 하나는 Next14의 Prerender였다. 물론 이외에도 생각보다 내가 제대로 이해하지 못한 부분이 여전히 많다. 업데이트 할 떄 마다 확확 바뀌니.... 살려줘이슈 내용은 다음과 같다. 현재 특정 태그를 API로 불러와 처리해야 하는 방식으로 변경할 경우, Prerendering을 사용하지 못한다는.. 2025. 1. 1. React-Three-Fiber + Next14 시작하기...일전에도 Next14에서 React three Fiber, 줄여서 R3F를 사용하는 방법에 대해 언급했었다. 이번에는 간단하게 웹사이트를 만들면서 참고한 예제들과 사용 방법에 대해 언급해보려 한다. https://github.com/pmndrs/react-three-next GitHub - pmndrs/react-three-next: React Three Fiber, Threejs, Nextjs starterReact Three Fiber, Threejs, Nextjs starter. Contribute to pmndrs/react-three-next development by creating an account on GitHub.github.com 위의 템플릿을 사용했다고 했을 때, 기본적.. 2024. 12. 8. 6. Docker + Jenkins + Github + Grafana + Next14 Panda CSS 다크모드 적용해보기전체적인 웹사이트의 형태를 갖추고 난 뒤, panda css에 동적으로 스타일을 적용해보는 몇가지 시도를 진행해보았다. 가장 먼저, 동적으로 내가 원하는 색상을 보이도록 styled css를 작성해보았다.const circleButton = (props) => css({ width: '3rem', height: '3rem', backgroundColor: props.color === 'white' ? 'white' : props.color === 'Orange' ? 'Orange' : 'Black', border: 'none', borderRadius: '50%', textAlign: 'center', lineHeight: '4... 2024. 12. 1. 5. Docker + Jenkins + Github + Grafana + Next14 지난 시간...지난 시간동안 Jenkins에서 도커 이미지를 빌드할 수 있도록 설정하고, 간단한 Next14 프로젝트를 통해 해당 동작이 정상적으로 동작하는지 테스트를 수행해 보았다. 전체적인 자동 빌드 배포 프로세스가 설정되었으니, 이제 우리는 본격적으로 Next14 애플리케이션을 개발하여 우리가 구현하고자 하는 멋진 웹을 개발해야 한다. Next14 포트폴리오 애플리케이션세팅 환경은 다음과 같다.Next14 + App routerpanda cssReact-Three-Fiber사실 이번 Next14에서 가장 핵심이 되는 부분은 React Three Fiber라고도 할 수 있다. 줄여서 R3F라고도 불리는 이 라이브러리는 기존 React에서 3D 모델을 쉽게 컨트롤하여 웹사이트에 띄워줄 수 있는 Thre.. 2024. 11. 23. 4. Docker + Jenkins + Github + Grafana + Next14 시작하기...이번에는 Nginx를 도커로 말아 프록시 서버로 동작할 수 있게 할 계획이다. Nginx와 Next14를 1:1로 사용할 예정이기도 하고, 기존에 세팅되어 있는 Nginx는 더 이상 사용하지 않을 것이기 때문에 시스템 상에서 Nginx를 내리고 새로운 Docker Nginx 프록시 서버를 올릴 필요가 있다. 만약 처음부터 할 예정이라면 불필요하겠지만, 필자처럼 이미 Linux 자체에 Nginx를 설치해둔 상태라면 도커 컨테이너로 전환하기 위해 내려두자. Nginx의 상태를 확인하고 내리는 명령어는 아래와 같다.sudo systemctl status nginx// 끄기sudo systemctl stop nginx 추가로 Jenkinsfile을 수정하기 전에 아래의 network 설정도 같이 진.. 2024. 10. 26. 이전 1 2 3 4 다음 728x90 반응형
