# Frontend 개발 후 AWS에 서비스 배포하기

![](https://raw.githubusercontent.com/mayajuni/hexo-blog/master/source/images/tyle-blo-02.png)
Frontend(vue, react, angular 등등)를 개발을 하고 서비스를 하기 위한 AWS 환경 설정 및 배포에 대해서 글을 남깁니다.



## 아키텍처

단순하게 SSR이 아니기 때문에 따로 서버를 두고 관리하기 보다는 S3에 파일을 올리고 그에 맞게 CDN인 Coundfront와 연결 후 Route53을 이용해서 도메인까지 연결하는 구조로 생각을 했습니다. 그리고 배포 시스템으로는 Codepipeline을 이용해서 배포 하는 방법을 채택했습니다.

**개발자**

1. 개발 소스 GitHub 배포
2. CodePipeline에서 Webhook을 이용 Github 확인
3. CodeBuild를 이용하여 빌드(ex. npm run build와 같은 것 등등)
4. CodeDeploy를 이용해서 S3 배포
5. S3를 배포가 완료 되면 Lambda를 실행 시켜 CloudFront 캐시 초기화

**고객**
1. www.example.com 접속시 DNS 접속(Route53)

2. Route53에 연결된 CNS(CloudFront) 호출

3. 캐싱이 되어 있으면 캐싱된 부분으로 리턴 안되어 있으면 S3 접근 후 리턴



## 아키텍처에 따른 환경 설정

CloudFormation을 이용해서 배포 하는 방법이 있지만 아직 그 부분은 익숙하지 않아서 아래와 같이 직접 배포를 하게 되었습니다.

### 1. S3

#### 1) 저장소 생성

![](https://github.com/mayajuni/images/blob/master/blog/aws/%EB%B2%84%ED%82%B7%EC%83%9D%EC%84%B1.png?raw=true)

위의 이미지의 버킷 만들기를 클릭 후 배킷을 생성 합니다.

> 생성시 꼭 퍼블릭 액세스 차단은 비활성화를 하셔야됩니다.



#### 2) 정책 설정

![](https://github.com/mayajuni/images/blob/master/blog/aws/%EB%B2%84%ED%82%B7%EC%A0%95%EC%B1%85.png?raw=true)

만든 버킷에 접속 후에 해당 권한 탭 -> 버킷 정책을 클릭후 아래와 같은 정책을 입력 합니다. 그냥 해당 정책은 읽기 권한을 퍼블릭하게 오픈 한다는 의미 입니다.

```JSON
{
 "Version": "2008-10-17",
 "Statement": [
 {
 "Sid": "Stmt1484315864175",
 "Effect": "Allow",
 "Principal": "*",
 "Action": "s3:GetObject",
 "Resource": "arn:aws:s3:::버킷명/*"
 }
 ]
}
```



#### 3) 정책 설정

![](https://github.com/mayajuni/images/blob/master/blog/aws/%EC%86%8D%EC%84%B1%EC%84%A4%EC%A0%95.png?raw=true)

속성 탭에 있는 정적 웹사이트 호스팅을 위와 같이 설정합니다.



### 2. CloudFront 설정

#### 1) 생성

![](https://github.com/mayajuni/images/blob/master/blog/aws/CF-1.png?raw=true)

위의 Create Distribution을 클릭합니다.

![](https://github.com/mayajuni/images/blob/master/blog/aws/CF-2.png?raw=true)

Web 부분의 Get Started를 클립 합니다. (저희는 Web이니깐요)

![](https://github.com/mayajuni/images/blob/master/blog/aws/CF-3.png?raw=true)

1. **Origin Domain Name**
 여기에 위의 S3 속성 설정의 앤드포인트(URL주소)를 가지고 와서 붙여넣기 합니다. (url 주소를 넣는 거지 버킷 아이디를 넣으면 안 됩니다.)
 Ex) http://dev-front-itam.store-admin.s3-website.ap-northeast-2.amazonaws.com/
2. 다른 부분은 굳이 입력하지 않아도 됩니다.

> 여기에서 버킷을 안 넣고 주소를 넣는 웹서비스이기 때문입니다. 특히 권한 문제.

![](https://github.com/mayajuni/images/blob/master/blog/aws/CF-4.png?raw=true)

1. **Viewer Protocol Policy**
 **Redirect HTTP to HTTPS** 을 선택해주세요.
2. **Object Caching**
 caching에 대한 설정을 다르게 하고 싶으시면 이 부분을 Customize로 설정후 아래의 활성화된 값을 넣으면 됩니다. 굳이 안 하려면 위의 사진과 같이 확인하시면 되요.

![](https://github.com/mayajuni/images/blob/master/blog/aws/CF-5.png?raw=true)

1. **Price Class**
 기본값인 Use All Edge Locations를 선택합니다. 물론 나의 타깃은 확고하고 정해져 있다고 하면 다른 값으로 설정하셔도 됩니다.
2. **Alternate Domain Names (CNAMEs)**
 서비스할 도메인을 넣으면 됩니다. 복수도 가능합니다. 여러 개의 도메인을 사용 시 한 줄 씩 쓰면 됩니다.
 Ex) dev.example.com
3. 서비스할 도메인이 있을시 **SSL Certificate**의 Custom SSL Certificate (example.com) 을 선택 후 인증서를 넣으면 됩니다. (인증서는 바로 아래의 버튼을 클릭 후 설정이 가능합니다.)

![](https://github.com/mayajuni/images/blob/master/blog/aws/CF-6.png?raw=true)

여기까지 왔으면 다 온 거라고 보시면 돼요. 여기서는 간단하게 Comment만 적어 두고 끝내면 됩니다. (관리하기 편하게 해당 서비스명을 넣는걸 추천해 드립니다.)

#### 2) SPA 관련 세팅

 SPA는 말 그대로 싱글 페이지 애플리케이션이기 때문에 모든 부분을 index.html 가게 해야 됩니다. 지금 이 설정을 하지 많으면 404 에러가 뜨게 됩니다.

![](https://github.com/mayajuni/images/blob/master/blog/aws/CF-error.png?raw=true)

위의 Create Custom Error Response를 클릭 해주세요.

![](https://github.com/mayajuni/images/blob/master/blog/aws/CF-error-2.png?raw=true)

위의 사진과 같이 404 관련된 에러는 전부 /index·html로 가게 해주면 됩니다. 여기에서 주의 깊게 볼 부분은 꼭 TTL은 0으로 세팅해주셔야 됩니다. 안 그러면 기다림이 발생합니다.

### Route53

 여기에서는 DNS 설정이 대한 부분은 제외하고 설명하겠습니다. 되게 간단합니다.

![](https://github.com/mayajuni/images/blob/master/blog/aws/route53.png?raw=true)

1. 이름에 서브 도메인을 입력합니다(CloudFront에서 넣은 도메인명).
2. 별칭을 클릭하면 Cloudfront영역에 선택 할 수 있는 주소가 생성되어 있습니다. 해당 부분을 선택합니다.

위와 같이 하면 Route 53은 설정이 끝납니다.

## 마치며

처음 하는 입장이면 생각보다 어렵다고 느껴지실 수 있습니다.

직접 해보고 익숙해지면 쉽게 하실 수 있다는 생각이 듭니다. 위의 CloudFront 부분에서 도메인 인증서 하는 부분이 빠지긴 했지만, 그 부분은 그냥 버튼을 클릭 한 후에 하라는 대로 따라 하면 됩니다.