DAY45 : TIL [서버리스 프론트엔드]

안휘원·2021년 11월 1일
2

spartacodingclub

목록 보기
27/39

📚 서버리스 프론트엔드 페이지 관리

  • 서버리스(serverless): 관리해야 할 서버가 없고, 원하는 기능, 설정 값들만 맞춰주면 알아서 정적 웹 사이트 기능을 관리해주는 것

1. 가상서버(EC2) 생성

  • 서버리스로 페이지를 관리할 서버를 만든다.

1) EC2(가상서버) 생성

① 인스턴스 시작
② AMI 선택 Ubuntu Server 18.04 LTS
③ 인스턴스 유형 선택 t2.micro
④ 키페어 선택 or 생성
⑤ 인스턴스 IP 복사 퍼블릭 IPv4 주소


2) 웹 서버 설치 (feat. *NGINX )

  • **웹 서버 : 기본적으로 웹 사용자가 어떻게 호스트 파일들에 접근하는지를 관리

    ① 인스턴스 접속 ssh -i {키파일위치} ubuntu@{인스턴스 IP}
    ② 패키지 매니저 업데이트 sudo apt-get update
    ③ 웹서버 설치 sudo apt-get install nginx
    ④ nginx 상태 체크 sudo service nginx status
    ⑤ 실행 포트 확인 netstat - tnlp
    ⑥ 접속 확인 curl 127.0.0.1

3) 보안그룹 설정

① 인스턴스 보안그룹 링크 클릭

② 인바운드 규칙 편집 -> 포트 추가

***주요 프로토콜 및 포트번호

프로토콜유형포트범위
File TransferFTP20, 21
Secure ShellSSH22
Domain Name ServiceDNS53
HyperText transferHTTP80, 84, 8000

③ 브라우저 확인

4) 페이지 파일 교체

  • Filezilla 사용 시: (호스트에는 IP 입력)
  • Console 사용 시: (교체할 파일 위치로 이동 pwd)
    ① index.html 조회 ls html
    ② 파일 전송 위해 sftp 접속 sftp -i {키파일위치} ubuntu@{인스턴스 IP}
    ③ 파일 업로드 put index.html
    ④ 설정 파일 확인
# /etc/nginx/nginx.conf

http {
       ....

       include /etc/nginx/conf.d/*.conf;
       include /etc/nginx/sites-enabled/*;
}

.
.
.

# /etc/nginx/sites-enabled/default

server {
        ....
        
        listen 80 default_server;
        listen [::]:80 default_server;

        root /var/www/html;
        index index.html index.htm index.nginx-debian.html;
				
				....
}

⑤ 파일 복사

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



<추가 업데이트 예정>

인증서 설정 = 보안 접속 https
= 보안에 안전한 HTTPS 사이트로 접속하기 위함
1. 도메인 연결(BY. 가비아)
2. 인증서 생성 위한 사이트 추가 : 07~09
3. 인증서 생성
4. NGINX 설정 WHY? + 보안그룹 포트 추가 WHY?

S3 활용 = 파일 저장 및 서버리스 웹사이트 생성
1. S3 생성 및 파일 업로드
2. 정적웹호스팅 활성화 + 도메인 연결

CloudFront 활용 ≈ CDN = 컨텐츠 전송 (global) https
1. Distribution 생성
2. 도메인 연결 및 추가

Certificate Manager 활용 = 인증서 관리 https
1. 인증서 요청
2. CloudFront에 설정

AWS WAF 활용 = 보안 강화
1. WAF 생성
2. IP 룰 추가 (차단 룰)
3. SQL injection 룰 추가

DNS: Domain Name Server -> Route53(확장 가능한 DNS 및 도메인 이름 등록) 이전
1. Route53(호스팅 영역) 생성
2. 네임서버(DNS) 설정 (가비아)
3. Route53(레코드) 생성



👉 REFERENCE 👈

* NGINX | 큰돌의 터전 : nginx의 이해와 활용
** 웹 서버 | MDN Web Docs : 웹 서버란 무엇일까?
*** 주요 프로토콜 및 포트 번호 | 지훈 개발일지 : Protocol 개념 정리

profile
우당탕탕 개발자 성장일지

1개의 댓글

comment-user-thumbnail
2021년 11월 4일

와우 정리 잘해주셨네요.. ㅠㅠ
추가 업데이트 되면 다시한번 방문하겠습니다~

답글 달기