Sprint AWS 리뷰 (Https)

일단 시작하기에 앞서 , git clone으로 파일을 받아 온 뒤 디렉토리가 생성되었는지 확인한다.

터미널에서 sprint-aws가 만들어졌는지 확인

vs코드로 디렉토리 안을 확인해보면, client와 Server 디렉토리에 각 각 .env.example 파일이 들어있는것을 확인 할 수 있다.(환경변수) 각각의 mv .env.example .env 를 입력해서 .env 로 변경해야한다. 

 

---

AWS 

인스턴스 생성

인스턴스를 만들거다. 짧게 말하면, 아마존에서 컴퓨터를 빌린다고 생각하면 될 거 같다. 

오른쪽 위에 인스턴스 시작을 누른다.

AMI 운영체제를 선택할 수 있는 옵션이 나오는데 나는 우분투 20.04로 진행할거다

 

인스턴스의 하드웨어 옵션을 선택하는건데 일단 프리티어는t2 마이크로로 사용 가능하다. 그런데 정신건강에 안좋다.. 

t3 Small로 했다. 정신건강에 해롭지 않기를 바라는 마음으로..

별다른 설정을 할건없고 시작하기를 누르면 된다.

키 페어를 생성할건지, 기존 키페어를 쓸건지 선택하는 화면이 나온다. 나는 기존 키 페어를 사용해서 진행하려고한다.

좀만 기다리면 저렇게 생성이 된다.

인스턴스 ID를 클릭하면 나오는 화면이다. 터미널을 통해 접속할수 있다. 오른쪽 위에 연결을 누르면 된다.

연결을 누르고 SSH 클라이언트항목에서 제일 밑 ssh로 시작하는거 복사한다.

터미널에 내가 가지고 있는, pem키의 경로를 앞에 넣어서 붙여넣어주면 된다.

성공적으로 연결했음

---

각종 필요한 구성요소들을 다운받자. npm node nvm git

일단 Git은 기본 설치가 되어있는거 같다.

Node와 npm 설치

https://calvinjmkim.tistory.com/22

[우분투] nvm을 이용하여 node js + npm 설치하기

준비

대부분 우분투 환경에 미리 세팅이 되어 있겠지만, 소스코드 빌드가 필요하므로 빌드 환경부터 설치를 해야 한다.

sudo apt-get install build-essential libssl-dev

 

NVM 설치

NVM은 다음 스크립트로 설치할 수 있다.

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash

 

NVM의 Path는 이미 유저 계정의 bash 설정 파일에 들어있다. 하지만 적용이 되어야 하므로 다음 과정을 통해 적용한다.

source ~/.bashrc

이제 NVM 명령을 사용할 수 있다.

Node.js 설치

NVM을 통해 현재 시점에서 가장 최근 LTS 버전인 10.16.3을 설치해 보겠다.

nvm install 10.16.3

 

기본버전을 사용하고 있을지 모르니 다음 명령으로 사용 버전을 선택한다.

nvm use 10.16.3

난 nvm install 16.14.0 로 할거다

npm 설치 node 설치

1. CURL 설치

$ sudo apt install curl

 

 

2. PPA를 추가

$ curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -

 

3. NodeJs 설치

$ sudo apt install -y nodejs

 

https://choseongho93.tistory.com/294

출처: https://choseongho93.tistory.com/294 [TROLL]

git clone 그리고 http 주소로 받아온다.

클론에서 잘 생성된걸 확인

client 와 server 디렉토리 각각에서 npm install 실행

---

VS code로 연결

퍼블릭 IPv4 DNS 주소를 복사한다.

VS code내에서 remote -SSH 확장자를 설치한다.

설치완료하면 왼쪽 밑에 파란 바람개비가 나온다

바람개비를 누르고 connect current window to Host를 누르면 이런 화면이 뜬다.

host Name 에 아까 인스턴스에서 복사했던 PUBLIC ip4 dns 를 붙여넣고, 

user ubuntu

그리고 Pem 파일이 있는 경로를 넣어주고 저장한다. 

그리고 바람개비를 한번 더 누르고 connect to host를 눌러서 host 에 설정된 이름과 같은것이 있을건데 클릭하면 연결완료

이렇게 새로운 vs code 창이 뜸

---

S3

인스턴스 내 환경설정

로컬에서 받았던 것 처럼, git clone해서 받은 디렉토리에 server와 client 각각에 .env.example 파일이 있는데 .env로 파일명 변경

---

S3

 

정적파일을 넣을 버켓을 생성해야한다. 

다른건 딱히 건드릴 거 없고 액세스 차단하면 안됨 ㄴㄴ

버킷이 하나 더 생성된것을 확인할 수 있다.

속성에 들어간 뒤 쭉 내리면 정적 웹 사이트 호스팅이있다. 편집 누르는거 ㅇㅇ

정적 웹사이트 활성화 누르고 인덱스 문서에 index.html 넣어준다.

완료하면 이렇게 버킷 웹 사이트 엔드포인트 링크가 나온다. 그리고 복사한다.

client .env 파일에 넣고 저장한다.

client 디렉토리 안에서 npm run build 

ls 명령어로 build 파일이 생긴것을 확인함 

 

---

파일질라로 build 파일 로컬로 옮겨서 s3에 업로드하기

New site 누르고

프로토콜 SFTP로 설정을 바꾼다

호스트에는, ec2 인스턴스의 퍼블릭 IP4 DNS 주소를 넣어준다. 

사용자는 ubuntu

키파일은 해당인스턴스에 해당하는 pem 키를 선택하면 된다.

그 후 동기화가 완료가 되면, 인스턴스 안에 있는 client 디렉토리에 있는 build 파일을 로컬에 찾기 쉬운 적당한 디렉토리에 넣는다.

---

build 파일 S3 버켓에 추가

파일추가든 폴더 추가든 편한걸로 추가하면 됨

업로드 하면 됨.

이제 권한에 가서 s3 버킷 정책을 수정할거다. 

편집을 누른다.

arn을 미리 복사해주고 정책 생성기를 누른다.

 

type of policys는 s3 bucket policy

principal은 *(와일드카드)

action은 객체만 볼거니까 GETobject선택 그리고 generate

복사해서 버킷정책에 붙여넣기한다.

리소스에 /* 와일드카드 넣어줌 그리고 편집완료

거기 *안주면 그 루트까지는 가는데 뒤에 리소스들 못읽어서

* 대신에 /index.html 써주면 index.html만 읽을수있음

---

한번 서버 돌려보기 

server 디렉토리에서 sudo node app.js 커멘드를 넣고 서버를 실행한다.

페이지 안뜸...

\

보안정책에 들어가서 인바운드 규칙을 확인해보니 22번밖에 안됨..

그래서 HTTP, HTTPS, SSH Mysql 을 각각 항목마다 IP4, IP6 다 허용함 그리고 서버 정지하고 다시실행

인스턴스의 퍼블릭 IP를 넣고 보니  HelloWorld 정상출력이 됨!

이거 잘 들어갔는지 확인하고 테스트 돌려볼거임

서버 연결까지 완료

그리고 s3에서 버킷 웹사이트 엔드포인트로 들어가면

이렇게 뜬다 아직 데이터 베이스는 연결을 안해서 그런거다. 정상이다. 

---

RDS

데이터베이스

RDS는 AWS 데이터 베이스다. 오른쪽 데이터베이스 생성을 통해 생성해보자.

다른건 건들필요가 없다..

돈 먹는 놈들 많으니까 조심해서 선택해야한다.

생성을 마치면 이렇게 뜬다. 그리고 server의 .env 파일을 살펴보자

음.. 뭘 적어야할지 감이 안올지도 모른다.

RDS 데이터 베이스의 엔드포인트 주소를 복사하여서 HOST에 넣어준다.

그리고 USER에는 설정했던 이름인 admin

PASSWORD에는 내가 설정했던 비밀번호

포트는 3306 (Mysql)

이렇게 해도 데이터베이스가 연결 안됐다고 뜬다...

그래서 Mysql로 test 데이터 베이스를 넣어주려고한다. 

show databases; 커맨드로 일단 내용물 확인

없는 경우에는 

create database (데이터베이스 이름); 으로 생성 가능하다.

그리고 show databases; 커맨드로 test가 만들어진것을 확인

use test; 로 test 데이터 베이스 사용

Database changed 뜨면 성공

 

잘 됨 ㅇㅇ

---

로드밸런서

로드밸런서 생성을 누르면 나오는 화면인데 나는 http https 어플리케이션 단위에서의 로드밸런서가필요하니 application Load balancder를 선택하고 생성한다.

이름은 좋아하는 이름으로 만들고

매핑은 다 선택한다. 가용성이 더좋다. 어느 하나가 먹통이되면 작동하는 곳에서만 연결되게 알아서 하니까.

세큐리티 그룹은 디폴트와, http, https, ssh, mysql 80 포트, 443포트 다 되는걸로 설정했다.

 

리스터스와 라우팅을 설정하기 위해서는 일단 타겟그룹을 설정해야한다. 

오른쪽 디폴트 액션 밑에

크리에이트 타겟 그룹을 선택해준다.

인스턴스

원하는 이름 설정하고 프로토콜 80으로 설정한다. 

똑같이 HTTP로 설정해준다.

어드밴스드 옵션에서 석세스 코드를 201로 설정해준다.

그 후 레지스터 타겟 화면, 인스턴트에 연결시켜준다. 나는 이번에 새로 만든놈을 연결해줄거다.

그 후 iNCLUDING AS PENDING BELOW를 선택하면 된다.

그리고 밑에 크리에이트 타겟 그룹 누르면 됨!

생성된걸 확인할 수 있다.

그리고 다시 로드밸런스 설정에 오면 아까 만든 타켓그룹을 설정할수 있다.

https 443포트도 같이 설정해준다, 

443으로 접속하는사람들도 받아야하니까.

그리고 내려보면 ACM 인증서가 필요한데, 이건 아마존에서 인증해서 https 를 인증해주는거다.

없다면 밑에 request new ACM certificate를 클릭해서 이동

---

ACM certificate

나는 이미 하나 만들었는데, 없다면 요청을 통해 생성함 

어차피 퍼블릭밖에 안됨

오리진 도메인과 더불어서

*(와일드 카드)를 써서, 어떤 접근으로도 가능하게 설정함.

---

다시 로드 밸런서로 돌아와서, 인증서를 첨부.

프로비저닝중인데, 좀 오래걸림. ㅜ

 

---

백엔드 서버는 로드 밸런서가 만들어주고 있는와중에, 프론트는  cloudfront!

배포 생성을 만들어주면 된다. 

s3에 내가 만든 버켓과, 프론트엔드로 보여줄 정적 파일들이 담기므로 Amazon S3의 것을 선택

 

기본 캐시 동작에서 Redirect HTTP and HTTPS 선택

HTTP 에서 들어오는 요청도 HTTPS 로 리다이렉트 해주고, HTTPS 도 물론 허용하는 뷰어 프로토콜 정책이다.

그리고 index.html 을 반환할 객체파일에 넣음

배포 생성을 누르면 배포생성 중... 

---

루트 53

호스팅영역

호스팅영역생성을 클릭

그럼 처음에는 두개밖에 없는상태다. CNAME을 생성해줘야함

Certified managerd에 들어가서, 생성된 인증서를 보며느, Route 53에서 레코드 생성이 있다.

누르면, Route 53에서 CNAME항목으로 레코드가 생성이된다.

그리고 루트53의 호스팅영역에 들어가서확인해보면 CNAME이 생성이된걸 확인할 수 있다. 

그리고 레코드 생성을해서 프론트 도메인인 www.를 넣고, Cloudfront와 연결해줌

백앤드 서버 도메인 api or server를 넣어주고, application/ load balancer를 연결.

그럼 이렇게 다섯개의 레코드가 구성된것을 확인할 수 있다.

서버의 .env 환경설정

클라이언트 .env 설정.

그리고 환경변수가 바꼈으니 다시 빌드하고 파일질라로 가져와서 s3에 정적파일들 넣어줌

다시 서버를 중지했다가, sudo node app.js를 돌려주면 됨.

npm run test2 하니까 1은 통과가 안됌 명치때리고싶음

---

캐시 무효화

프론트에서는 그 전에 가지고 있는 캐시를 불러와서 상태가 바뀌는게 늦으니까 그걸 강제로 무효하고 빠르게 적용하는걸 추가하는거

무효화 생성 누른 뒤

와일드카드로 지정해줌

 

---

다 하면, https 주소로 www.fanak.click  접속 되는것을 확인할 수 있다.