글

Vite TypeScript React에서 SVG 사용하기

이미지
 해당 글에서 React(Vite : TypeScript)에서 svg를 사용하는 법에 대해서 확인하겠습니다. 1. vite을 이용해서 react 설치 install하기 - 해당폴더에 vite를 이용해서 React(TypeScript)를 설치합니다 $ npm create vite@latest [프로젝트명] copy 사진1) Vite를 이용해서 React 설치 2. svg 작성하기 사진2) 작성된 SVG 3. App.tsx에 추가하기 import { useState } from "react" ; import "./App.css" ; import CrownLogo from "./assets/crown.svg" ; // 추가된 코드 import reactLogo from "./assets/react.svg" ; import viteLogo from "/vite.svg" ; function App() { const [count, setCount] = useState( 0 ); return ( <> < div > < a href = "https://vite.dev" target = "_blank" > < img src = { viteLogo } className = "logo" alt = "Vite logo" /> </ a > < a href = "https://react.dev" target = "_blank" > < img src = { reactLogo } className = "logo react" alt = "...
댓글 쓰기
자세한 내용 보기

AWS EC2에 Load Balancer를 이용해서 HTTPS(SSL) 적용하기

이미지
1. EC2 생성 및 HTTP적용 참고링크1 : AWS EC2 셋팅1 참고링크2 : AWS EC2 셋팅2 EC2에 아파치 2를 설치 $ sudo apt update && sudo apt upgrade -y && sudo apt install apache2 -y 퍼블릭 IPv4주소로 연결을 시도했지만 접속이 되지 않는다. 보안그룹 80포트를 열어야 한다. 참고 보안그룹 설정 링크 : AWS EC2 셋팅3 EC2 인스턴스 보안그룹 설정 2. 인증서 요청 HTTPS을 적용하기 위해서는 인증서가 필요하다. Certificate Manager에서 인증서를 요청한다. 도메인 이름은 실제 사용할 URL을 작성한다. 예로 들어 "example.test.com"이 실제 입력해야할 URL이면 도메인 이름으로 입력한다. 해당 인증서에 대해서 "요청"한다. 해당 도메인이 "Route 53"에서 구매한 것이면 자동으로 "Route 53에서 레코드 생성"을 사용할수 있다. 3. 대상그룹 설정 4. 로드 밸런서(Load Balancer) 셋팅 이제 대상그룹을 로드 벨런서와 연결을 한다. 보안그룹 443포트(SSL포트)를 열어야 한다. 5. Route 53 셋팅 이제 "https://example.test.com"으로 접속이 가능해 집니다. 참고글 AWS S3에 CloudFront를 이용해서 HTTPS(SSL) 적용하기
댓글 쓰기
자세한 내용 보기

AWS S3에 CloudFront를 이용해서 HTTPS(SSL) 적용하기

이미지
 AWS의 S3와 CloudFront, Certificate Manager를 이용해서 SSL을 적용한 웹페이지를 작성 1. S3버킷을 생성 먼저 S3에 올릴 빌드파일을 만듭니다. 저는 이미 React로 Build파일을 만들었기 때문에 해당 폴더를 올리도록 하겠습니다. 참고링크1 : AWS S3 셋팅1 S3사용하기 버킷생성 참고링크2 : AWS S3 셋팅2 S3 bucket에 build 폴더 올리기 먼저 S3의 버킷을 만들도록 하겠습니다. 2. 인증서 요청 HTTPS을 적용하기 위해서는 인증서가 필요하다. Certificate Manager에서 인증서를 요청한다. 도메인 이름은 실제 사용할 URL을 작성한다. 예로 들어 "example.test.com"이 실제 입력해야할 URL이면 도메인 이름으로 입력한다. 해당 인증서에 대해서 "요청"한다. 해당 도메인이 "Route 53"에서 구매한 것이면 자동으로 "Route 53에서 레코드 생성"을 사용할수 있다. 3. CloudFront 배포 이제 CloudFront 작업을 하자. 현재 S3를 사용하고 있는데 S3의 엔드 포인트를 사용한다. Origin path은 처음 실행할 파일(예로 index.html)이 루트가 아닌 다른경로에 있을때 작성 HTTP로 접속 시도시 HTTPS로 리다이렉트 한다. 2번에서 만든 인증서 적용 배포 생성후 완전히 완료되기까지는 약 15분 이상 걸렸다.  CloudFront에 도메인을 연결해야한다. SSL인증서의 도메인을 추가 4. Route 53 레코드 추가 별칭을 이용해서 CloudFront배포를 진행한다. 생성 완료후 "https://example.test.com"으로 접속을 해서 테스트를 한다. 참고글 AWS EC2에 Load Balancer를 이용해서 HTTPS(SSL) 적용하기
댓글 쓰기
자세한 내용 보기