이번 글에서는 목표는 다음과 같다.1\. CodeDeploy 동작 정의하기2\. EC2에 pm2, nodejs 설치하기3\. Swap File을 이용해서 EC2 RAM늘려주기4\. 80번 포트로 EC2에 요청 들어오면 3000번 포트로 연견할도록 포트포워딩 해주기이제

이제는 github action을 작성할 차례이다.github action에서는 다음과 같은 동작을 작성할 것이다.Nextjs App 빌드하기Nextjs App 파일들을 압축해서 S3에 저장하기 - node_modules는 제외S3에 파일이 올라가면 CodeDeploy

이번 편은 다음 과정을 진행할 것이다.1\. CodeDeploy 설정2\. CodeDeploy를 EC2 인스턴스에 연결IAM - 역할 - 역할 만들기다음을 누르면 AWSCodeDeployRole이 추가되어 있는 것을 볼 수 있다.역할 이름을 정하고 역할 생성을 클릭하면

1편에서는 우리의 코드를 배포할 ec2 인스턴스를 만들고 세팅했다. 2편에서는 S3 버킷에 대해 세팅할 것이다.버킷 - 버킷 만들기를 눌러주자.버킷 이름을 정하고 AWS리전은 서울로 해주자. 나머지는 기본 세팅으로 넘겨도 무방하다.다시 IAM으로 넘어가서 사용자-사용자

최근 진행하고 있는 프로젝트의 CI/CD를 구축하려 한다. react의 경우는 cloudfront, s3를 통해 배포해 보았고, nextjs는 amplify(serverless)로 간단하게 구축해보았다. 이번에는 웹 인프라에 대한 이해도를 좀 더 올릴 겸 EC2에 배포

d

nextjs 웹앱을 build하던 도중 react-icons의 번들 사이즈가 500kb를 초과한다는 경고 메세지가 발생하여 번들 크기를 확인했다. 최대한 가볍게 만들어보려고 상태관리 라이브러리도 사용하지 않고 react-query만 사용하려고 하는데 번들 크기가 크다고

Swiper를 사용하여 Carousel을 구현하던 중, Carousel의 초기 렌더링 모습이 breakpoints가 적용 안된 모습으로 몇 초간 렌더링되는 모습이 발견됐다. 확인 결과 html tag들은 서버사이드에서 렌더링 된 후, Swiper css가 client

React로 몇 번의 프로젝트를 진행하고 나니 SSR에도 흥미가 생겼다. 그래서 최근에 Nextjs 공식문서를 읽으며 개념을 정리하고 있다. 읽다보니 막연히 알고있던 SSG와 SSR의 차이를 정확히 설명해주는 부분이 있어 기록해놓으려 한다.SSG와 SSR의 가장 큰 차

검색엔진의 결과에서 상위에 랭크되기 위한 전략을 수립하는 것을 SEO라 한다. 더 위에 랭크될수록, 더 많은 트래픽이 사이트에 발생하고, 이는 곳 비지니스의 성공으로 이끈다.SEO는 브랜드의 신뢰도나 Conversion(사람들이 디지털 마케팅의 영향을 받아 상품이나 서