AWS8 [AWS] Nextjs cloudfront S3 배포 시 html 확장자 제거 (feat. lambda 함수 이용) 이번 글은 Nextjs로 AWS에 베포를 진행하는 과정 중 발생하였다. 처음에는 모든 페이지들이 정상적으로 작동하는 듯 싶었으나, 역시 그럴일이 없었다. Nextjs는 동적 라우팅 즉, Dynamic Loute를 지원한다. ex) www.~~~.com/products/1 위의 링크처럼 동적 라우팅이 있는 폴더 구조가 있다고 생각해보자. 결국 folder struct는 products 폴더 안에 [id].tsx와 같은 파일이 존재할것이다. 여기까지는 아주 좋다. 이제 문제는 지금부터다. AWS의 CloudFront를 이용하여 배포를 진행하였을 때 해당 동적 페이지로 들어가면 아무 페이지가 뜨지 않는다. 해결 방법은 .html 확장자를 명시적으로 넣어주는것이다. 하지만 매 페이지 요청 시 www.~~~.co.. 2022. 4. 8. [AWS]VPC Endpoint란?(feat.bastion(바스티온) 접속) | VPC Endpoint를 알아보겠습니다. VPC 밖(인터넷을 통해)에서 들어오는 트래픽에는 과금이 되기 때문에 비용을 줄이기 위해 AWS 네트워크 안에서 통신할 수 있도록 하는 것이 좋습니다. VPC Endpoint는 EC2 인스턴스를 VPC 외부 서비스(AWS서비스 중 S3 등)와 private한 연결을 하기 위해 사용됩니다. 즉, AWS 서비스를 전용 연결할 수 있도록 해주죠. 따라서 어떤 트래픽도 AWS 네트워크에서 벗어나지 않기 때문에 비용을 절약할 수 있습니다. 이 경우 퍼블릭으로 해당 서비스를 노출하지 않더라도 연동할 수 있습니다. IGW, VPN, NAT, proxy 등 사용할 일이 전혀 없죠. 위 그림과 같이 private subnet이 존재할 때, 이 서브넷과 S3를 연결하고 싶다면,.. 2022. 2. 28. [AWS]AWS(아마존)비용 이슈 대처방법과 프리티어 계정 만료시 대처법 AWS프리티어 계정 비용 이슈 대처방법 AWS 처음 사용해보시는 분들이라면 비용이 생각보다 높게 나오고,,, AWS 해지를 까먹어서 비용이 청구되고 그런 경험이 있죠? 저도 그랬습니다.. 그래서 이번에는 AWS 어마무시한 비용청구를 사전에 방지법을 알아보도록 하겠습니다. 종류 1.프리티어 사용량 알림 설정 2.결제 알림 설정 3.트스트 전 비용 검토 4.테스트 후 리소스 정리 5.프리티어 계정이 만료된 경우 대처법 프리티어 사용량 알림 설정 AWS에서 제공하는 프리티어 사용량을 모두 소진한 경우 경고 이메일을 전송하는 방법입니다. 1.로그인 후 우측에서 계정 tab으로 이동하기. 2.다음과 같이 결제 기본 설정에서 이메일을 입력해주세요. AWS 결제 알림 설정 방법 - 결제할 App을 Cloud Watc.. 2022. 2. 18. [AWS]Devops(데브옵스)란? devops가 뭘까 ? 필요한 이유 ? - 소프트웨어 개발은 아래와 같은 라이프사이클, 생애주기를 갖고 있습니다. 데브옵스는 개발과 운영을 통합하여 제품 출시 및 조직의 효율성을 끄렁올리기 위한 문화입니다. 2009년에 시작된 기업의 소프트웨어 개발 방법을 개선하기 위한 움직임입니다. 데브옵스는 조직, 고객, 회사 모두에 이점을 가져다 줄 수 있습니다. 큰 규모의 조직에서는 아래와 같은 역할로 나누어집니다. 과연 데브옵스라는 건 어떻게 하는 것인가? 데브옵스는 개발과 운영의 벽을 허물어 더 빨리 자주 배포하자는 게 목적입니다. AWS가 제안한 데브옵스 실천방법 - 지속적 통합(Continuous Integration) : 개발자가 만든 변경 사항에 대해서 빌드 및 테스트를 진행해본 후 중앙 코드로 통합... 2022. 2. 18. [AWS]리액트 개인 프로젝트 배포하기(nextjs,nestjs)[6]-Front 배포 & 탄력적 IP고정 back server에서 npm install pm2를 설치한 것 처럼 기존 프로젝트 front 경로도 pm2를 설치 후 pull해주자 ! | 알고 가야하는 점 ! 첫 번째, 지금 프로젝트는 nextjs 로 진행했기 때문에 getServerSideProps와 같은 backend에서 먼저 data를 받아와야 하는 함수가 들어있다 따라서 backend 가 무조건 켜져있어야지만 front를 켤 때 오류를 방지할 수 있다 ! 두 번째, 현재 나는 saga 로 상태관리를 하고 있는데, saga 폴더의 index.js에서 나는 axios의 defaults 값으로 baseURL을 지금까지는 axios.defaults.baseURL = 'localhost:3001'; 이렇게 적어주고 사용해왔었다. 하지만 지금 우리가 .. 2021. 5. 28. [AWS]리액트 개인 프로젝트 배포하기(nextjs,nestjs)[4]-mysql 설정 거의 다 왔다 조금만 힘내자 !! 이제는 인터넷으로 접속을 할 차례이다 ! 잘 보면, 퍼블릭 IPv4 에서 back server 인 3.37.52.147 가 있다 ! 저 아이피에 내가 백단에서 쓰고 있는 포트번호(:3000)를 붙여보자 ! 나는 : 3.37.52.147:3000 이니깐 back 서버에 접속해볼까 ? (*여기서 3065는 본인의 프로젝트 back 서버에서 돌아가는 port 를 입력해줍니다.) 결과는 무한 로딩중 ... 어디가 문제지 하고 생각해봤는데 당연한 결과다 왜 ? 접속 가능한 포트는 ssh 포트랑 , 80 , 443 포트만 접속이 가능하게끔 초창기에 설정 했기 때문에 ! 그럼 이 이슈를 또 해결해보자 바로 우분투내의 vim 에디터로 port를 변경 ! 먼저 port를 명시해준 코드 .. 2021. 5. 27. 이전 1 2 다음
