분류 전체보기 (77) 썸네일형 리스트형 React 프로젝트에 Github Actions + AWS IAM로 CI/CD 구축하는 방법 CI/CD와 관련된 요소들의 개념과 작동 과정CI/CD내가 수동으로 commit하고 push하고 build하고 deploy했던걸 자동화하는 것이다.CI/CD 환경을 구축하는 이유코드의 수정이 일어날 때마다 S3의 파일들을 바꿔주고 클라우드 프론트에 가서 캐쉬 무효화 작업을 해주는 귀찮은 과정을 반복하지 않기 위해 CI/CD 환경을 구축하는 것CI/CD의 작동과정 Github Actions는 현업에서도 많이 쓰이고 무료로 사용할 수 있고, 빌드용 서버가 따로 필요없기 때문에 CI/CD 구축할 때 자주 쓰인다. Github ActionsJenkins는 빌드용 서버를 따로 구축해야하기 때문에 패쓰~ 자세한 차이점은 추후 알아보기 .. AWS 해커톤 (AWS JAM) 소개: AWS JAM에 참여하게 된 동기와 기대AWS JAM에 참여하게 된 계기는 AWS 서비스에 대한 실질적인 이해와 문제 해결 능력을 높이고 싶었기 때문입니다. 특히 클라우드 환경에서의 네트워크 및 보안 구성을 실습하며 실제 업무에 도움이 될 수 있는 인사이트를 얻고 싶었습니다. AWS JAM은 실전에서의 기술 활용을 중요시한다는 점에서 저에게 꼭 필요한 경험이 될 것 같았고, 이를 통해 AWS에 대한 자신감을 더욱 쌓고자 하는 기대감도 컸습니다.AWS JAM의 주제와 진행 방식제가 참여한 AWS JAM의 주제는 **‘네트워크 보안 및 계층화’**로, VPC와 네트워크 ACL, 보안 그룹을 비롯한 다양한 AWS 서비스들을 통한 네트워크 격리 및 보안 강화가 주요 내용이었습니다. JAM의 진행 방식은 .. CloudFront에서의 코드 업데이트 방법 1. DNS에 대한 개념과 작동 과정DNSDNS문자를 IP주소로 변환해주는 DNS 서버를 만들게 되었다컴퓨터가 처리하기 쉬운 값의 형태는 문자가 아니라 숫자이기에IP특정 컴퓨터의 주소를 가르킨다. ( naver.com → 61.41.153.2 )Port13.250.15.132:3000 에서 :3000 이 부분이 Port기본값으로 (크롬.익스플로어 등) 80번 포트로 통신을 보내게 설정되어 있기 때문이다.이렇게 규약을 통해 역할이 정해진 포트들을 말한다.80번(HTTP) : HTTP로 통신을 할 때 사용(꼭 지키지 않아도 된다)443번(HTTPS) : HTTPS로 통신을 할 때 사용ex) 22번 (SSH, Secure Shell Protocol) : 원격 접속을 위한 포트번호Well-Known-Port: .. 도메인 생성 후 AWS 연결 S3와 Cloud 서버 위치가 어디든간에 꼭 버지니아 북부로 선택하세요!! 아니면 인증서 발급이 안됩니다!! 별칭정보가 맞지 않는다라고 뜰땐 뒤에 .을 지우고 수정하기 버튼을 누르면 된다!항목추가 누르시고 연결할 도메인 주소 입력하시면 연결 끝입니다~! 웹 브라우저와 React 렌더링 방식 브라우저 렌더링 원리를 알아야 하는 이유웹 브라우저는 HTML로 웹 페이지의 구조를 만들고, CSS로 디자인을 더하며, JavaScript로 동작을 제어해 동적인 웹 페이지를 구성합니다. 따라서 코드가 의도한 대로 작동하려면, 브라우저가 우리가 작성한 코드를 어떤 순서로 읽고 처리하는지를 이해하는 것이 중요합니다. 브라우저의 렌더링 순서를 파악하면 효율적인 코드 작성과 성능 최적화가 가능해집니다. 지금부터 DNS Server와 Server를 이용해 어떻게 웹 브라우저가 렌더링되는지 알아보겠습니다!사용자가 www.naver.com 같은 주소를 입력하면, 브라우저는 DNS 서버로부터 해당 주소의 IP 주소를 받아와 서버에 접근합니다. DNS 서버에는 수많은 IP 주소가 저장되어 있어 검색 시간이 소요될 수 .. S3, CloudFront를 활용해서 React 프로젝트 배포하는 방법 웹사이트 엔드포인트 사용 선택 사용자가 http로 잘못 입력하더라도https로 자동으로 바꿔서 재통신을 하겠다란 옵션 클릭 비용문제 때문에 내가 사용할 아시아 지역에서만 사용 체크 후 기본값 루트 객체에 index.html 작성 후 배포생성 클릭배포까지 시간이 걸리기에 2-3분 후에 배포 도메인 이름을 복사해서 접속하면 정상적으로 잘 뜬다. CRA + VITE + Next.js 프로젝트 정적 웹 호스팅 방법! CRA 웹 호스팅 방법이전 제 최근글을 참고하시면 여기까지 오는법은 알거라 생각합니다.기존 연습했던 필요없는 버킷은 지워주고 새로 실습할 버킷을 이전과 동일하게 생성합니다~ 권한탭을 눌러서 버킷 정책 편집을 이전과 동일하게 진행합니다~"Principal": "*", 왼쪽처럼 값을 변경해주시고~변경사항 저장! 그리고 속성탭 젤 아래 정적 웹 사이트 호스팅 편집을 아래와 같이 설정해줍니다.인덱스 문서 index.html 다시 따라치세요~!그리고 visualcode에서 npx create-react-app myfirstaws-web을 생성 후(또는 본인이 올린 파일)npm run build를 통해 빌드파일을 만들고 그 폴더를 올리는것이 아닌 그 내부에 있는 파일들을 드래그해서 올리면 끝! VITE 프로.. AWS 정적 웹 호스팅 방법 상세정리( S3 ) • S3에 웹 프로젝트를 호스팅 하는 방법 정리 S3 검색후 상단 S3 클릭 익명의 사용자가 접근할 수 있도록 이 버킷의 퍼블릭 액세스 차단설정 해제! 이제 권한칸으로 가서 버킷정책을 작성해준다(권한을 정의하는 JSON) 버킷정책 옆 끝에 편집버튼을 누르고 새 문 추가 버튼을 누른다!오른쪽 검색창에 S3 검색 후 클릭getobject 검색 후 체크 후 리소스 추가버튼 누르기! arn:aws:s3:::{BucketName}/{ObjectName} 중괄호 포함 모두 대체!{BucketName} -> 자신의 프로젝트명 = myfirstaws991909{ObjectName} -> 모든 파일 = *sid는 그냥 이 정책에 대한 id 표시principal은 아래 effect와 action을 누가 s3에 저장되어.. 이전 1 2 3 4 5 ··· 10 다음
