[AWS] S3, Cloudfront, EC2를 이용한 웹사이트 만들기

이번 시간에 해볼 실습도 웹사이트 만들기이다!

웹사이트를 구축하는 방법에는 여러가지가 있는데, 웹사이트의 용도에 따라 다양한 방법으로 웹사이트를 효율적으로 구축할 수 있을 것 같다.

 

1. (Web) - (WAS) - (DB) 로 나누는 3계층 웹

 

2. (CloudFront) - (S3) 로 정적데이터 처리만을 위한 웹

 

3. (CloudFront) - (S3) - (EC2)로 정적데이터는 S3에서, 동적데이터는 EC2에서 처리하는 웹. << (이번 글에서 해볼 것)

 

 

이번에는 3번의 방법으로 웹사이트를 만들어 보겠다.  아키텍처는 아래의 그림처럼 그려보았다.

 

웹서버 아키텍처

 

 

웹사이트 트래픽 흘러가는 순서

 

1. Client가 Route 53 도메인으로 웹사이트 접속

2. 도메인은 CloudFront의 DNS 주소

3. CloudFront를 통해서 CSS,JPG같은 정적데이터는 S3, PHP같은 동적데이터는 EC2를 대상으로 하는 ELB 

4. ELB의 대상인 Web에서 웹페이지 표시

 

5. EBL의 액세스 로그 S3 버킷에 저장 

6. Web은 Auto Scalilng Group에 속하고 CloudWatch를 통해 모니터링하며 이벤트 발생 시, SNS를 통해 이메일 보내기

 

 

 

 

실습 순서 

EC2 인스턴스 생성 및 S3 버킷 생성하는 방법같은 세세한 내용들은 이번 글에서는 빼도록 하겠다.

 

1. 웹사이트 확인을 위해 부트스트랩 템플릿 다운

 

2. S3에 정적인 파일 업로드

 

3. Web 서버 구성

 

4. CloudFront 생성 및 구성

 

5. Route 53 설정

---

1. 부트스트랩 템플릿 다운

 

아래 사이트에서 원하는 템플릿으로 다운받아서 이번 실습에서 확인용 웹페이지로 사용해주자

startbootstrap.com/

Free Bootstrap Themes, Templates, Snippets, and Guides

 

 

 

템플릿에는 아래처럼 CSS파일이나 JS파일들을 포함하고 있다. 이러한 파일들은 정적이며 웹페이지에서 새로고침 하더라도 변하지 않는다. 때문에 S3에 저장해놓고 사용하도록 하자.

---

2. S3에 정적인 파일 업로드

 

S3 버킷을 새로 생성하고 JPG,CSS,js같이 정적인 파일들을 미리 업로드 해두었다.

이러한 버킷은 Public 으로 되어있어야 웹에서 공개적으로 사용자가 접근할 수 있다.

---

3. Web 서버 구성

EC2 인스턴스는 S3에서 처리하지 못하는 동적인 데이터를 처리하기 위해 사용한다. PHP,JSP 같은 파일을 처리한다.

 

 

 

먼저 웹을 실행하기 위해서 아파치를 EC2에 설치해준다.

아파치 실행

 

 

 

처음에 받아두었던 부트스트랩 템플릿을 FTP를 이용해 EC2 인스턴스에 넣어주었다. 여기서 PHP 파일을 통해 동적인 데이터를 처리할 수 있다.

 

 

CSS,jpg,js 파일들의 주소는 S3 버킷에 업로드했던 주소를 가리키도록 한다.

 

 

 

이 EC2 인스턴스로 AMI 이미지를 만들고 Auto Scalilng Group을 생성해주자.

 

Auto Scalilng Group에 속한 인스턴스는 CPU 사용량이 높아지면 자동으로 확장,축소할 수 있고,

이러한 CPU 사용량은 CloudWatch에서 모니터링하며, 이벤트 발생 시 AWS SNS를 통해 이메일로 알람을 보낸다. 

 

---

4. CloudFront 배포

 

CloudFront는 S3용과 ELB용으로 두개 만들어준다.

 

 

4-1. S3용 CloudFront 배포

 

Restrict Bucket Access : YES < 버킷에서만 접근하도록 한다

Origin Access Identify : Create a New Identify <  오리진 접근 자격 생성

Grant Read Permissions on Bucket : Yes  < 오리진 정책이 자동으로 업데이트 된다

 

나머지는 디폴트로 해주자

 

 

4-2. ELB용 CloudFront 배포

 

Redirect HTTP to HTTPS를 체크해서 HTTPS로 통신하게끔 해주자

 

 

도메인 주소에 CNAME을 정해주자. CNAME을 지정하려면 ACM 버지니아 리전에서 SSL 인증서를 발급 받아야 한다.

---

5. Route 53 설정

Route53에서 CloudFront를 A타입 레코드로 생성해주자.

---

확인

위에 작업들을 제대로 했다면 웹사이트는 다음과 같이 나타나야 한다.

 

 

1. 도메인으로 접속

 

 

 

2. 이미지 주소 복사를 했을 때, 이미지의 주소는 다음과 같이 CloudFront를 바라보고 있어야한다.

s3.potato-yong.tk는 내가 설정한 CloudFront의 CNAME이다.

이렇게 이미지가 CloudFront에 있으면 캐시를 통해 좀 더 빠른 속도를 제공할 수 있게 된다.

또한, 이미지들은 S3 버킷에 저장되어 있기 때문에 웹서버에서의 부담을 줄일 수도 있다.

 

 

 

3. 웹사이트는 다음과 같이 HTTPS 통신을 하며 보안을 강화해야 한다.

 

 

 

 

 

4. 이미지가 제대로 캐시되어 있는지 크롬에 개발자 도구를 통해서 확인해주자

 

 

 

5. 간단하게 로그인 기능을 php로 추가해보았다.

 

다음과 같이 ID,PW가 RDS에 저장되어 있는 데이터면 로그인 되도록 만들어보았다.

 

 

---