리액트 썸네일형 리스트형 [CI/CD] AWS에 Repository 생성하기 Bitbucket에서 CICD 자동화를 하려면 일단 만들어질 이미지를 저장하는 레파지토리가 필요하다 그리고 서버에 반영이 될때 해당 레파지토리에서 이미지를 끌어다가 서버에 반영하는 형태이다. 1. 일단 AWS에서 ECS로 검색을 한다. 2. 화면에 좌측에 있는 Repository 메뉴를 클릭하면 아래와 같이 레파지토리들이 나온다.(처음으로 생성하는 경우에는 아무것도 없겠죠?!) 3. 우측에 레포지토리 생성을 누른다. 아래와 같은 화면이 등장하면 그냥 순리대로 작성하면 된다. 공개 할지 비공개 할지.... 리포지토리 이름은 저의 경우는 생성할 이미지 명과 동일하게 만들었습니다. 4. 생성이 완료되면 아래와 같이 만들어 진다. 다음들에서는 만들어진 레파지토리를 어떻게 사용하는지 다루겠습니다!! 더보기 [CI/CD] Bitbucket에서 pipeline을 사용설정하기 일단 저는 Bitbucket을 사용하고 있습니다. 일단 Bitbucket에서 pipeline을 사용하겠다고 설정을 해줘야합니다. 위와같은 화면에서 보면 사이브 메뉴에서 이버튼을 누르면 상단의 화면으로 진입합니다. 화면에서 Enable pipeline 버튼을 클릭하면 아래와 같이 해당 레파지토리에서 pipeline을 사용할 준비가 완료됩니다.! 더보기 [React] 리액트 Cache Busting 관련 문제 해결법 리액트 프로젝트를 서버에 올리면 항상 브라우저를 매우 강력하게 새로고침을 해야하는 불편함이 있다. 따로 개발자 모드 화면에서 캐시를 사용하지 안기로 한게 아니라면 일반 새로고침으로는 반영 하기가 어렵다. 해결방법은 서버에 반영되는 파일이 기존의 파일과 다르다고 인식하게 하면 됩니다. 그래서 웹팩에서 번들파일 생성시, 생성되는 이름을 매번 다르게 해주면 반영이 되면 파일명이 다른걸 인식하고 새로 내려받는 과정을 거치게 된다. 아래와 같이 webpack.config.js 파일을 아래와같이 변경해주면 된다. output: { path: path.join(__dirname, '/src/'), filename: '[name].[chunkhash:8].js', }, 이렇게 하면 파일이 변경될때마다 hash값이 변경.. 더보기 [React] Custom Component - 인풋박스(Input) HTML 삽입 미리보기할 수 없는 소스 이건 CSS HTML 삽입 미리보기할 수 없는 소스 이건 HTML 사용 하시면 아래와 같이 더보기 [React] Custom Component - 셀렉트박스(SelectBox) HTML 삽입 미리보기할 수 없는 소스 위의 소스는 CSS입니다 :) HTML 삽입 미리보기할 수 없는 소스 위의 소스는 JS입니다. HTML 삽입 미리보기할 수 없는 소스 사용하실때는 이렇게 사용하시면 됩니다. 더보기 [HTTPS] SSL을 이용한 HTTPS 통신 방법 1. Client Hello : 브라우저 창에 도메인을 입력함으로써 클라이언트가 서버에 통신을 시도 합니다. 이때 브라우저가 지원하는 암호화 방식과 랜덤데이터를 제공합니다. 2. Server Hello : 서버는 클라이언트가 제공한 암호화 방식을 하나 선택한으로서 클라이언트에 통신을 합니다. 그리고 서버자신의 인증서를 전달합니다. 이 인증서 안에는 서버의 공개키가 존재합니다. 그리고 서버 또한 클라이언드에 랜덤 데이터를 제공합니다. 3. Client Key Exchange : 서로의 랜덤 데이터를 이용하여 통신시 필요한 키를 생성하고 이를 서버로쿠터 받은 공개키로 암호화합니다. 4. Finished : 마지막으로 핸드세이크 과정이 마무리 되면 클라이언트와 서버 모두 Finished 메시지를 보냅이다. 그.. 더보기 [Docker] HTTPS 컨테이너 실행 docker run -it -d --name "이미지이름" -p 443:443 -p 80:80 "지정할 컨테이너 이름" 443포트와 80포트를 둘다 열어줘야 한다 이렇게 되 nginx.conf 파일에서 작성해 놓은 리다이테럭 처리를 탈것이다. 더보기 [Docker] HTTPS로 변경시 도커파일 추가 되는 부분 EXPOSE 443 마지막에 포트 열어 주는 부분에서 기존에 80포트 만 열어 주는 부분에 443 포트 추가 더보기 이전 1 2 다음
