코딩뚠뚠

AWS S3를 이용한 정적 웹호스팅을 구성한 사용자들은, 페이지 업데이트를 위해 새로 업로드한 파일들이 페이지에 바로 적용되지 않는 경험을 했을 확률이 높다 대개 AWS의 CDN 서비스인 CloudFront 를 사용하고 있는 경우인데, 바로 적용하는 방법을 알아보도록 하자. 1. 새 프로젝트를 빌드 하고 S3 에 업로드 이후 사이트에 접속해보면 바로 변경내용이 적용되어 있지는 않은 것을 알 수 있다. 2. CloudFront - ID 클릭 3. Invalidations 클릭 4. Create invalidation 무효화 하고자하는 페이지를 적어준다. 내가 호스팅하고 있는 React 페이지의 경우 index.html 을 무효화 해야했다. 5. 결과 Create invalidation 시 Status가 I..

현재 진행하고 있는 프로젝트는 S3로 정적 웹호스팅을 하며, CloudFront 서비스를 이용하고 있다. 기능적으로는 결과페이지 '공유하기' 기능이 있으며 공유하면 랜덤한 고유 token을 넣어 개인별 페이지를 생성한다. 상황설명 및 예시 : 만약 개인별 페이지를 아래와 같이 공유한다면 개인결과라고 볼 수 있을까? www.advancer-katalk.click/결과페이지 위 페이지는 모두에게 호스팅되는 페이지로 나만의 페이지가 아니다. www.advancer-katalk.click/결과페이지/2039rkj032fuh0f2j34k23hj4 위와 같이 고유 token을 만들어 공유한다면 내 페이지를 공유할 수 있다. 하지만 S3를 이용해 배포하니 403 에러가 뜨고말았다. Failed to load reso..

오류내용 : DNS_PROVE_FINISHED_NXDOMAIN 위 에러는 많은 상황에서 발생할 수 있지만 내가 처한 상황은 아래와 같았다. AWS에서 도메인구입 S3 정적 호스팅 ACM 발급 CloudFront 사용해 https 적용 Route53에 CloudFront호스팅 --- 여기까지 정상동작 했었음 --- 정적웹호스팅 S3 파일 전체삭제 후 재업로드 Route53의 호스팅영역 삭제 후 재생성 정확히 어떤작업후에서 부턴지 모르겠지만 오류가 뜨며 사이트 접속이 되지 않았다. 우선 dig 명령어를 통해 서버에서 내 도메인이 어디까지 연결되어있는지 확인해보았다 윈도우 환경에 dig를 설치하기는 싫으니 dig web interface라는 사이트에 접속해 분석해보았다. 사이트에 접속후 Hostnames or..

AWS Lambda 를 이용한 Serverless 서비스 제작 중 현재 React를 이용한 FE쪽에 집중하고 있다. 이번엔 간단한 링크복사 버튼과 그에 대한 팝업을 만들어 보려 한다. 리액트 시작 포스팅은 아래에서부터 이어진다 [AWS] Lambda 프로젝트-4 / React 연동 파일 업로드 이전장까지 S3 저장소를 만들고 API Gateway를 통해 S3에 파일을 업로드해봤다. [AWS] Lambda 구축하기-3 / S3 trigger로 Lambda 호출 이전장 에서는 S3 저장소를 만들고 API Gateway를 통해 S3에 파일을 업로드해.. dbstndi6316.tistory.com 링크 복사 버튼 구현하기 - react-copy-to-clipboard 1. 라이브러리 설치 npm install ..

이전 4번 포스팅에서 React를 연동하여 S3에 파일을 업로드 해봤다. [AWS] Lambda 프로젝트-4 / React 연동 파일 업로드 이전장까지 S3 저장소를 만들고 API Gateway를 통해 S3에 파일을 업로드해봤다. [AWS] Lambda 구축하기-3 / S3 trigger로 Lambda 호출 이전장 에서는 S3 저장소를 만들고 API Gateway를 통해 S3에 파일을 업로드해.. dbstndi6316.tistory.com 하지만 사용자가 내 S3에 50GB 파일을 넣는다면? 그리고 그 파일이 계속 지워지지 않고 있다면? 요금 폭탄을 맞을 수 있다. 그래서 이번포스팅에서는 S3 관리 탭의 내용을 설정해보려한다. 1. S3 버킷 "관리" 탭에 접근해 "수명 주기 규칙 생성" 클릭 2. 규칙..

저번 포스팅에서는 React 라우터의 기본적인 사용방법을 익혀봤다. [AWS] Lambda 구축하기-7 / React 라우터 사용 이전장에서는 S3로 구성한 정적 웹호스팅에 AWS의 CDN 서비스인 CloudFront를 이용해 https 보안을 적용하였고, Route53을 통해 나만의 도메인을 적용시켜보았다. [AWS] Lambda 구축하기-6 / S3 정적웹호스팅 dbstndi6316.tistory.com 이번 포스팅에서는 요청에 대한 응답으로 클릭없이 페이지를 이동해보고자 한다. 우선 이를 사용하기 위해서는 react-router-dom이 설치되어있어야 한다. 이전 포스팅 참고 1. Functional Component - const navigate = useNavigate()를 function 내에..

이전장에서는 S3로 구성한 정적 웹호스팅에 AWS의 CDN 서비스인 CloudFront를 이용해 https 보안을 적용하였고, Route53을 통해 나만의 도메인을 적용시켜보았다. [AWS] Lambda 구축하기-6 / S3 정적웹호스팅에 https 적용 이전장에서는 AWS S3 bucket을 이용한 정적 웹호스팅까지 진행해보았다. [AWS] Lambda 구축하기-5 / S3 이용한 정적웹호스팅 이전장에서는 AWS S3에 파일을 업로드 하는 동작을 React로 연동해보았다. [AWS] L dbstndi6316.tistory.com 하지만, 앞장에서 까지의 서비스는 한 화면에서 동작하는 서비스였다. 이제는 페이지 이동을 위해 라우팅을, 그 중 먼저 React 에서의 라우터를 예제로 배워보도록 하자. 라우팅..

이전장에서는 AWS S3 bucket을 이용한 정적 웹호스팅까지 진행해보았다. [AWS] Lambda 구축하기-5 / S3 이용한 정적웹호스팅 이전장에서는 AWS S3에 파일을 업로드 하는 동작을 React로 연동해보았다. [AWS] Lambda 구축하기-4 / React 연동 파일 업로드 이전장까지 S3 저장소를 만들고 API Gateway를 통해 S3에 파일을 업로드해봤다. [ dbstndi6316.tistory.com 하지만 정적 웹호스팅을 위해서는 퍼블릭엑세스를 허용해줘야돼서 보안에 구멍이 생긴다. 따라서 보안향상을 위해 이번 포스팅에서는 https를 적용해보고자 한다. S3 버킷에 보안 설정이 필요한 이유 https 가 아닌 http 통신을 해야되기 때문 버킷이 퍼블릿 공개라는 점 AWS S3의..