46일차(서버리스 프론트엔드 총 정리라 말하고 1일차 총정리 하기,,)

포인트 ☝🏻. 내가 지금 이해 못한 부분들 다 해석해버리기

포인트 ✌🏻. 한동안 aws에 손을 떼도 다시 할 수 있을 정도로 쉽게 적기

포인트 🖐🏻. 아래 정리한 포인트들을 설명할 수 있게 이해하기!

 

 

1. 기존의 프론트엔드 페이지는 NGINX 웹서버를 인스턴스에 설치하여 관리

2. HTTPS를 사용하기 위해 인증서를 설치

3. S3 정적웹호스팅 기능을 사용하여 서버리스로 프론트엔드 페이지를 관리

4. CloudFront와 Certification Manager를 사용하여 HTTPS를 인스턴스 없이 생성

5. WAF를 이용하여 좀 더 보안을 강화하는 방법

6. Route53을 이용하여 DNS를 이전하는 방법

---

작성하게 된 이유

 

두 번째 강의는 처음 실습할 때부터 놓쳤다,, (실강,,,,,,,,😟😟)

첫 번째 강의때는 시간이 없어서 내가 걸린 포인트 부분만 적었더니 다시 보니깐 왜 이러한 코드를 작성하는지

그냥 복붙한 것 같아서 이번에는 다르게 작성해봤다...!! (1일차 키워드는 다른 곳에 작성했다)

 

내가 강의를 놓치면서 강의 노트를 보고 작성하려고 하는데

띄엄띄엄 있어서 내 방식 대로 다시 적어보려고 했다.

또, 명령어들에 궁금했던 점들을 적었다. 길이가 너무 길어서 접어서 적었다.

(복붙만 할 것 같은 코드들이나 실행 화면은 안적었다.)

 

그래서 하는 김에 어제와 오늘 이틀에 걸쳐서 진행한 강의를 정리 해봤다. (프론트 엔드 부분만)

(1일차는 총 정리, 2일차는 요약)

 

아래 사이트를 이용하여 정리했다.

작성하는 명령어가 어떤건지 알려주는 사이트 ▶️ [ 클릭 ]

 

 

---

1일차

 

EC2 만들기

aws에서 인스턴스를 시작한다.

 

 

웹 서버 설치하기

* 보안 그룹 설정에서 HTTP 80으로 설정 후

FileZilla를 먼저 실행하고 패키지 업데이트 및 서버 설치를 했더니 브라우저가 실행이 안되었다.

왜인지는 모르겠으나 패키지 업데이트 및 서버 설치 후 FileZilla를 실행 했더니 브라우저에서 켜졌다.

 

 

▷ 인스턴스 접속

ssh -i 키파일경로 ubuntu@퍼블릭 IPv4 주소

 

 

▷ 패키지 매니저 업데이트

sudo apt-get update

explainshell

 

 

▷ 웹서버 설치

sudo apt-get install nginx

* sudo : super do의 약자로 최고 관리자가 내리는 명령

https://m.blog.naver.com/tacma/20103243784

 

 

 * nginx란?

Nginx는 가벼움과 높은 성능을 목표로 하는 웹서버 소프트웨어

[참고] https://azderica.github.io/00-network-nginx/

 

 

*  nginx 상태 체크, 실행 포트 확인, 접속 확인  생략

 

---

 

 

보안그룹 설정 생략

 

 

 

index 파일 교체(Nginx 기본 제공 html → index.html)

 

▷ Filezilla 서버 접속 설정 

생략 

 

 

 

▷ 파일 확인하기

~$ cd ~
~$ ls

 

cd ~ 사용자 홈 디렉토리로 이동

* cd는 디렉토리를 이동할때 사용하는 명령어 모음 >>  https://shaeod.tistory.com/930

* 리눅스 명령어 >> https://velog.io/@psj0810/

 

 

 

🤔 ~$는 왜 붙는 걸까❓❓

~$ mkdir test
~$ cd test
~$ cd /etc/nginx

 

 위 명령어를 입력해보고 확인해보면

 

 

:/etc/nginx$로 바뀌어 있는 것을 알 수 있다.

여기서 알 수 있듯이 ~$ 라고 되어있을 때는 홈에 위치에 있어서 ~$라고 뜬거고
cd로 이동을 하면 홈 디렉토리가 아니기 때문에 ~ 대신 cd로 이동하게 된 디렉토리 이름이 뜨고

$ 표시가 뜬 것이다.

 

 

🤔🤔 하나 더!

cd test였을 때는 ~$가 안바뀌는데 그냥 폴더 명을 적으면 ~$으로 뜨고

etc/nginx 처럼 경로를 적어야 ~$가 아닌 폴더명$으로 바뀌는 걸까??

아니면 홈에서 폴더 내의 폴더 부터 "~" 대신 "폴더명$" 로 표기되는 걸까??

 

홈 디렉토리 및의 하위 디렉토리 및의 하위 디렉토리부터 "~"이 없어진다.

ex) 홈 디렉토리 밑의 test 폴더 밑의 하위 디렉토리 test1이 있으면 test1부터는 :/test/test1$ 으로 나오게 된다.

(하위의 하위 폴더부터 물결이 사라진다..!)

 

👉🏻 ~ 기호가 내 홈디렉토리로 치환되는 것으로 생각한다.

                   ~/test/test1
/home/ubuntu/test/test1 

 

서로 동일하다.

 

 

 

 

▷ 설정 파일 확인하기

#Nginx의 설정 파일 경로
cat /etc/nginx/nginx.conf

 

cat은 어떤 내용을 받아서 그냥 그대로 터미널 화면에 뿌려주는 역할이다.

* nginx.conf : 메인 설정 파일

* cat : 파일을 연결하고 표준 출력에 인쇄 (explainshell)

 

리눅스 기본명령어 - cat >> http://www.incodom.kr/Linux/

NGINX 설정 >> https://opentutorials.org/module/384/4526

 

👉🏻 /etc/nginx/nginx.conf 가 nginx 설정 파일 경로인데

이게 파일이 잘 들어갔는지 확인하기 위해 cat 명령어를 사용해서
cat + 해당파일 경로 입력해가지고 cat /etc/nginx/nginx.conf 라고 입력한 것이다.

 

 

 

 

▷ 파일 복사

sudo cp ~/index.html /var/www/html

cp : 파일 복사 명령어

→ /home/ubuntu/index.html 파일 복사

 

 

* 리눅스 서버의 기본 홈 디렉토리는 /var/www/html로 되어있다.

참고 블로그 링크 >> https://2pie.tistory.com/entry

 

 

 

 

nginx를 설치하고 파일 복사를 하지 않고 브라우저에 퍼블릭 IPv4 주소를 입력하면

아래와 같이 nginx 기본 제공 html이 출력된다.

 

 

Filezilla에서 서버 접속 설정할 때 서버에 파일을 옮긴 후에 파일 복사 명령어를 입력한다.

 

---

 

 

도메인 연결

 

▷ EC2 IP 넣기

 

가비아에서 도메인 설정할 때 www를 입력안하고 @로 입력해서 브라우저가 실행이 안되었다.

왜 안되는지 몰라서 다시 실행파일 설치의 반복,,

 

 

 

 

인증서 생성을 위한 사이트 추가

 

▷ 위치 이동

cd /etc/nginx/conf.d/

 

호스팅하는 각 웹사이트는 반드시 /etc/nginx/conf.d/ 디렉토리 안에 

example.com.conf 형태로 만들어진 각자 자신만의 configuration 파일을 갖고 있어야 한다.

[Nginx] 기본 설정 방법 >> https://architectophile.tistory.com/12 

 

 

🤔 .d ❓  “D”irectory의 “D”를 붙여 설정을 위한 ‘디렉터리’임을 나타낸다.

https://www.bangseongbeom.com/trailing-dot-d-in-directory-names.html

 

 

 

 

▷ 설정파일 추가

sudo vi www.conf

explainshell

server {
    listen         80;
    server_name    ////.shop www.////.shop;
    root           /home/ubuntu/;
    index          index.html;
    try_files $uri /index.html;
}

 

설정파일 추가에서 server_name은 자기 도메인 주소 입력해야한다.
그래야지 이러한 주소로 들어왔을 때 index.html 실행한다..!!

아무생각 없이 그대로 복사했다가 실행이 되지 않았다.

 

 

 

 

▷ nginx 재시작

sudo service nginx restart

 

 

 

파일 내용 수정 후 확인하기

 

▷ 폴더 이동

cd ~/
pwd

~ : 홈
/ : 루트

* pwd 명령어는 현재 위치를 알려준다..!!

(뭔가 비밀번호 입력하라는 명령어 같았다..)

 

 

 

 

▷ 파일 수정하기

vi index.html

 

수정할 때 아래와 같이 "/"(슬래시) 입력 후 찾을 키워드 입력하면 바로 찾을 수 있다. 

 

 

 

 

▷ 인증서 만들기

https://letsencrypt.org/ko/ # letsencrypt 사이트

 

 

 

 

▷ 설치 환경 만들기(3개_인증서 사이트 내에서 나오는 설치 방법)

sudo snap install core; sudo snap refresh core

sudo snap install core

sudo snap install --classic certbot

sudo ln -s /snap/bin/certbot /usr/bin/certbot

 

 

 

 

▷ 인증서 설치

sudo certbot --nginx

 

위 코드를 입력했더니 

 

snap "core" is already installed, see 'snap help refresh'
snap "core" has no updates available

 

라는 에러가 나왔다. 그래서 다시 설치 환경 만드는 명령어를 입력하여 다시 실행해도 같은 결과가 나왔다.

일부 fail이라는 결과와 함께,,,

여기서 해결한 방법은 그냥 에러 메세지 무시하고 다시 인증서 설치 명령어를 입력한 후

이메일을 입력하면 된다...!

 

 

* 참고) 에러떠서 이것저것 작성한 명령어들

ping www.도메인명.shop
# 실제 컴퓨터가 켜져있는지 확인하는 명령어

telnet www.도메인명.shop 443
#해당 포트가 접속 가능한지 확인(여기서는 https 포트번호인 443)

 

 

 

 

▷ nginx 설정

cat /etc/nginx/conf.d/www.conf

 

if 로 시작되는 부분이 안나타난다면 설치 환경 만들기 다시 진행한다.

 

 그리고 aws 보안그룹 포트 추가에서 https 추가한다.

 

---

 

 

S3 활용하기 & S3 정적 웹 호스팅

 

▷ 도메인 연결

 

가비아에서 타입을 CNAME로 바꾸고 url을 정적 웹 호스팅 url로 변경하고 

도메인 주소로 입력을 했는데 실행이 되지 않았다.

 

그냥 url로 입력하면 정상적으로 아무리 입력해도 안되길래

하루 지나도 안되는 건 이상해서 주소를 다시 한 번 확인해봤더니

브라우저에서 자동으로 https://로 바꿔서 실행이 안되는 것이었다.

http://로 바꿨더니 실행이 잘 되었다..!! (화면이 잘 떴다.)

 

 

Not Found로 나오는 이유 

BucketName이 S3 Bucket 이름과 다르기 때문이다.

S3 Bucket 이름과 도메인 이름을 같게 설정하는 방법과 Cloudfront를 사용하는 방법이 있다.

이 방법 중 하나를 사용한다면 Not Found로 나오지 않고 정상적으로 실행된다.

 

HTTPS가 필요하면 Cloudfront를 사용한다!
Cloudfront를 사용할 필요가 없을때는 버킷명을 도메인명과 똑같이 생성해서

DNS에 CNAME 하면 페이지가 뜬다.

 

 

참고)

 

ssh 인증서는 *pem 파일, ssl 인증서는 cerbot으로 적용한다.

*.pem : aws ec2 로그인용 인증서
certbot : https ssl 인증서

 

인스턴스 접속할 때 인증서는 ssh이고 https로 인증받을 때 썼던 인증서는 ssl이라는 말이다.

 

현재는 ec2 인스턴스에만 ssh와 ssl이 적용되어 있다.

s3나 정적 웹 호스팅에는 어느 인증서도 적용되지 않아

s3를 이용해 브라우저를 킬 때는 ssl이 없어서 http로 이용해야하고
ssh가 없어서 리눅스 명령어(window:git bash)를 사용하지 않는다.

 

s3에서 ssl은 cloudfront 적용하면 ssl 적용하는 부분이 있고 sssh는 적용이 안된다.

 

 

 

---

2일차

 

WAF 만들기

 

 

처음에 Create web ACL에서 아래와 같은 오류가 나면서 부터 강의를 놓쳤다.

그래서 강의노트 자료로 참고하려고 했는데 강의 노트에서 흐름이 끊긴 캡쳐를 보고서 

해당 탭을 찾느라 아예 놓치게 되었다... (내가 aws는 처음이라서 체감상 너무 빠르게 진행되는 것 같다😥)

그래서 슬랙으로 팀원들에게 나는 추후에 다시 들어야 겠다. 오류 때문에 놓쳤다고 했더니

팀원 모두가 놓쳤다고 한다...😂  (줌 강의에서 다들 손 떼고 있길래 나도 그냥 보기만 했다.)

 

내가 본 오류는 위와 같았는데 슬랙에 저는 이런 오류 떠서 멈췄습니다ㅜㅜ 했더니

내 IP주소/32로 작성해야 했는데 내 IP주소/30으로 작성해서 생긴 오류였다.

( 난 왜 30으로 들었는가...!! 여기서부터 놓치기 시작했다.. )

 

Create IP set 버튼 클릭 후 만들게 되면 rule을 추가해야하는데 그 rule이 어디있는지 몰랐다.

왼쪽 탭에 Web ACLs을 클릭 후에 방금 생성한 IP set name을 클릭하면 아래와 같은 화면이 뜬다.

 

1. IP set name

 

 

추후에 요약 예정,,, 😂 (1일차 강의 정리가 너무 오래 걸렸다..)

 

 

---

오늘의 중요 키워드 REST API와 CRUD

 

 

REST API 란?

REST 기반으로 서비스 API를 구현한 것

REST란 자원을 이름(자원의 표현)으로 구분하여 해당 자원의 상태(정보)를 주고 받는 모든 것을 의미

API란 데이터와 기능의 집합을 제공하여 컴퓨터 프로그램간 상호작용을 촉진하며,

서로 정보를 교환가능 하도록 하는 것

 

 

CRUD란?

CRUD는 대부분의 컴퓨터 소프트웨어가 가지는 기본적인 데이터 처리 기능인 

Create(생성), Read(읽기), Update(갱신), Delete(삭제)를 묶어서 일컫는 말이다. 

 

 

REST API

https://gmlwjd9405.github.io/2018/09/21/rest-and-restful.html

https://velog.io/@whoyoung90/RESTful-API%EB%9E%80

 

CRUD

https://livedata.tistory.com/3

https://velog.io/@pock11/REST-API-CRUD

 

---

🤔❓

* 궁금증 해결 !! 👉🏻 2021.10.30 - [spartacodingclub/TIL] - 47일차

 

궁금증 1.

파일 수정을 할 때 아래와 같이 입력해서 

vi index.html

 

가격을 3,000원에서 10,000원으로 고친 후에 실행을 시켰다.

그런데 s3에서 파일을 업로드 했을 때 동일 파일인 index.html을 업로드 했는데

가격이 3,000원으로 나왔다.

 

인스턴스 접속에서 수정한 것은 인스턴스 접속 내에서만 변경한 것이라 원래의 파일에서는 수정이 안되는 건가?? 

 

 

 

 

궁금증 2.

s3와 s3 정적 웹호스팅이 있는데 s3만 사용하면 될 것 같은데 s3 정적 웹 호스팅은 왜 사용하는 걸까?

라는 생각이 들었다. url 차이만 있고 큰 차이가 무엇인지 궁금하다..!!

http://~~~~.amazonaws.com/index.html # s3
http://~~~~.amazonaws.com # s3 정적 웹 호스팅

 

 

---

나는 진행되는 강의에 따라가지 못하는 걸까..😥

1일차 완전히 이해할 때까지 풀이 적고 오늘 진도 나간 부분을 공부하려고 보니

시험공부할 시간밖에 남지 않아서 내일 실강에 듣기 전까지 꼭 해야하는 부분만 후다닥 작성했다.

(정리는 하지 못했다,, 수업 내에서 작성한 메모들은 나중에 추합해서 정리해야할 듯 싶다.)

 

얘가 왜 이렇게 진행되는지 이런 흐름들은 추후에 녹화 된 강의보면서 공부해서 정리해야겠다.

오늘은 여기까지!! 😆😆