-
AWS 웹서비스 배포 (2) / AWS 가입하고 사용해보기Programming/Web Programming 2023. 5. 31. 05:46
지난 포스팅에서는 배포 전 꼭 알아야할 용어들을 공부했다.
이제 본격적으로 아마존 웹서비스에 가입해보자.
이 포스팅은 강의를 듣고 공부했던 내용을 기록한 내용이다.
* 강좌는 아래 링크에서 수강하고 있다.
클래스 101 [유료강좌]
개발자 사관학교 - [웹 개발자 단과반 3교시] 초간단 AWS 웹사이트 배포 및 구글 애널리틱스 코드 심기
https://class101.net/ko/products/619b3c6b776fd0000d72459b
[웹 개발자 단과반 3교시] 초간단 AWS 웹사이트 배포 및 구글 애널리틱스 코드 심기 | 개발자 사관
웹 페이지, 열심히 공부했는데 아직도 여러분 컴퓨터에서만 확인할 수 있나요? 이제 사이트 배포도 해봅시다! HTML, CSS 학습에서 멈추실 건가요? 웹 개발을 공부했다면, 배포까지 해보셔야 합니다
class101.net
CHAPTER 1: 배포를 위한 기초 지식 훈련!
[3. 아마존 웹사이트에 대해 알아보고 가입하기!]
구글에 아마존 웹사이트를 검색하여 홈페이지에 들어가 가입한다.
클라우드 서비스 | 클라우드 컴퓨팅 솔루션| Amazon Web Services
aws.amazon.com
간단하게 살펴보면 굉장히 다양한 제품들을 판매하고 있는 것을 볼 수 있다.
다양한 서버 컴퓨터 서비스를 제공하고 있다. 아마존 계정에 가입하는 과정에서 집주소, 카드번호, 등등
많은 개인정보들을 입력해야 하는데 가입을 위해 필요한 내용들이니 쭉 입력했다.✏️
Support 플랜은 기본 지원으로 선택해준다.
공부용 서버 뿐만 아니라 모든 소규모 웹페이지들은 보통 기본 지원으로 시작한다고 한다.
가입이 완료되고 나면 기본 콘솔홈으로 안내된다.
나의 경우, 계정은 이번에 가입하지 않고 전에 가입해둔 것이 있어 결제정보, 주소 등만 업데이트 해주었다.
또한 플랜을 확인해보고 싶은데 어째서인지 콘솔홈에는 나타나지 않아 검색해보니, 아래 주소에서 확인할 수 있다고 한다.
https://console.aws.amazon.com/support/plans/home
https://us-east-1.console.aws.amazon.com/support/plans/home
us-east-1.console.aws.amazon.com
기본 플랜으로 설정되어 있다. 가입이 완료되었다면 두가지 사항을 설정한다.
왼쪽 상단 바에서 지역을 서울로 설정해준다.
내가 지금 살고 있는 곳은 서울도 (+한국도..) 아니지만, 서비스를 원활한 제공을 위해 서울로 해주는 것이 좋다고 해서 따라해본다..
아마존 웹서비스 자체가 굉장히 여러 지역에 있는 서버컴퓨터를 대여해주고 있기 때문에,
서울로 설정하면 아마도 서울에 있는 서버컴퓨터를 제공받게 되는 것 같다.
두번째로 왼쪽 하단에 Language(현재 한국어로 설정되어있다면 '언어')를 눌러 English(US)로 바꿔준다.
이유는, 서버 배포를 하며 만나게 될 에러들이 영어로 뜨면 바로 검색해서 쉽게 원인을 찾을 수 있지만
한국어로 되어있으면 접근성이 떨어진다..
영어에 익숙해지는 것이 앞으로의 개발공부에 있어서도 좋으니 영어로 해둔다!
[4. 아마존 웹사이트에 대해 알아보고 가입하기!]
아마존 서버는 수많은 기업들에서 이용하고 있다.
서버를 전문적으로 관리하는 아마존에 서버에 관한 부분을 맡기고,
서비스에 집중하는 것이 매우 효율적이기 때문이다.
그렇다면 아마존에서 어떤 서비스들을 이용하면 될까?
성능과 종류가 매우 다양한 서버 컴퓨터들이 있지만,
아마존내에서 아래의 서버컴퓨터 임대서비스를 이용할 것이다.
(1) Amazon EC2 (Elastic Compute Cloud) / 서버
또한 앞으로 빌릴 컴퓨터를 인스턴스라고 부를 예정이다.
(2) Amazon RDS (Relational Database Services) / 데이터베이스
두번째로 데이터베이스가 설치된 서버로 아래 서버 서비스도 이용해볼 것이다.
MySQL, MariaDB, Oracle등 데이터베이스 타입을 골라 쉽게 사용이 가능하다.
(3) Amazon S3 (Simple Storage Service) / 폴더,파일 저장소
파일 서버로 버킷이라 부르는 폴더를 이 서비스 안에서 만들고,
웹 서비스에 필요한 파일들을 업로드하면 원격으로 접근할 수 있는 주소까지 받을 수 있다.
(4) Amazon SNS (Simple Notification Service) / 문자 서비스
흔히 웹사이트에서 로그인할때 휴대폰으로 인증 번호를 받는다던지,
하는 문자서비스를 이용한 경험이 있을 것이다.
이러한 문자서비스도 아마존 서버에서 편리하게 이용할 수 구축할 수 있다.
(5) Amazon VPC (Virtual Private Cloud) / 프라이빗 네트워크 망
대규모의 기업의 경우 VPC, 즉 사설망을 구축해 이용하는 경우가 많다.
다양한 부서가 존재하는 기업이 하나의 네트워크망을 이용하여 서버를 구축하면
보안이 뚫렸을 경우 기업 전체 데이터가 매우 큰 위험에 노출될 수 있다.
때문에 프라이빗 사설망을 개설해 분리하여 네트워크를 구축한다고 한다.
(6) 도메인 관리 Route53
앞서 말했듯 배포 이후 도메인을 구매할 것이다.
gabia라는 곳에서 도메인을 구매할 예정인데, 이후 구매한 도메인을 AWS 서버로 옮겨와야 한다.
이때 간편하게 옮길 수 있도록 도와주는 것이 아마존의 Route53 서비스이다.
[4. 웹 페이지를 이용하여 바로 AWS로 배포해보기, S3 사용법!]
이제 직접 AWS에 웹페이지를 배포해보자.
먼저 배포할 html파일을 하나 준비해준다.
AWS 메인 콘솔 홈에서 Services창에 S3을 검색해 들어간다.
현재 운영중인 버킷이 존재하지 않기 때문에, 새로운 버킷을 만들라는 창이 뜬다.
위와 같이 설정을 바꿔주었다.
Bucketname는 AWS에 존재하는 기존 버킷들과 이름이 겹치면 안된다.
때문에 나머지 설정을 완료한 후에 중복된 이름을 쓸 수 없다라라고 나오면 바꿔줘야 한다.😨
AWS Region은 한국으로 설정한다. 한국에 존재하는 서버컴퓨터를 이용하겠다는 의미이다.
Copy settings...의 내용은 기존에 만든 버킷이 이미 있을 경우 해당 세팅을 카피해오겠다는 의미이다.
처음 버킷을 만드는 것이므로 가볍게 스킵한다.
Object Ownership에서 ACLs enabled를 체크해준다.
오너쉽을 직접 소유하고 파일마다 공개권한을 내가 갖겠다는 의미이다.
(disabled로 하면 외부에 공개가 불가능하다고 한다..)
Object writer를 체크해 마찬가지로 공개권한을 갖겠다고 명시한다.
잠겨있는 Block all public access를 풀어준다.
올리는 웹사이트를 전체 공개하겠다는 의미이다.
정말로 공개해? 라는 빨간 메시지에도 응 알고 있어. 하고 체크한다.
나머지는 기본 설정 그대로 건드리지 않고 Create buckets를 눌러주었다.
Default encryption 내용이 강좌와 달라진 것 같다.
최근 들어 뭐가 더 생긴 모양이다..
우선은 아무것도 건들지 않고 이 부분도 넘어갔다.
새로운 버킷이 잘 만들어진 것을 볼 수 있다.
이름을 눌러 안으로 들어가준다.
htm파일 / ejs파일을 드래그앤 드랍해주면 잘 업로드된 것을 볼 수 있다.
Permissions를 눌러 설정을 변경해주자.
아까 권한을 가져오기로 체크했기 때문에 이처럼 Permissions도 설정할 수 있다.
Predefined ACLs를 Grant public-read access로 체크한다.
내 사이트를 전체 공개하겠다는 뜻이다.
아까와 마찬가지로 정말 할거야? 괜찮겠어? 라고 되묻는다. 괜찮다고 체크한다.
조금 기다리면 업로드가 성공적으로 완료된 것을 볼 수 있다.
main파일을 눌러 들어가면 설정들이 뜬다.
Object URL을 누르면 해당 웹사이트가 나와야하는데..
나는 다운로드가 되면서 열리지 않았다. 😇
아무래도 강좌와 다르게 html이 아닌, ejs파일로 해서 그런 것 같다..
다시 html로 바꿔 똑같이 업로드 해보았다!!
그리고 Object URL을 누르자 만든 html 파일이 나왔다.
CSS가 적용되지 않아 굉장히 밋밋하지만..
url을 통해 잘 열리는 것을 확인할 수 있다!!
그런데 주소가 꽤나 어지럽다. 주소를 깔끔하게 바꿔보자!
처음 Buckets창에 들어가보자.
방금 만든 따끈따끈한 버킷을 다시 눌러준다.
상단 탭바에서 Permissions를 눌러준 다음에 쭉- 스크롤을 내린다.
Access cotrol 창을 보면 Edit가 뜨면서 권한을 수정할 수 있다는 것을 확인할 수 있다.
확인을 마쳤으니 이제 정말 수정해보자.
아까와 같은 상단 탭에서 Properties를 눌러준다.
그리고 맨마지막까지 스크롤을 쭉 내려보면 Statc website hosting을 찾을 수 있다.
지금은 Disabled가 되어있으니, Edit를 눌러 들어간다.
Enabled로 바꿔주고 Host a static website는 체크된 채로 그대로 둔다.
Index document에서 Specify the home or default page of the website,
즉 가장 메인이 되는 웹사이트를 어떤 것으로 해줄지 결정할 수 있다.
앞서 업로드했던 main.html 파일 이름을 작성하고 쭉 내려 Save Change를 눌러준다.
저장이 완료된 후 뜨는 창에서 쭉 내려보면 Static website hosting이 잘 적용된 것을 볼 수 있다.
또한 Bucket website endpoint가 생겨난 것을 볼 수 있다.
이는 버킷에 대한 고유한 주소가 생겼음을 의미한다.
맨 하단에 URL을 들어가보자.
(변경된 후) (변경되기 전) main.html이라는 주소가 사라진 것을 볼 수 있다.
실제로 naver나 google, 그 외에도 어떤 웹사이트를 들어가도 main.html같이 파일 이름이 뜨는 경우는 드물다.
아까의 과정을 통해 메인페이지 endpoint를 설정해 깔끔한 메인 웹페이지 주소를 만들어주었다.
물론 그럼에도 불구하고 주소가 매우 길다!
이는 이후에 도메인을 구입해 더욱 깔끔하게 변경할 예정이다.
그렇다면 정말 배포가 잘 완료되었을까?!
해당 URL을 복사해 휴대폰으로 접속해보았다!!
휴대폰에서도 잘 열린다. ⭐️
첫 배포를 마쳤다.
얼른 CSS도 서버도 데이터베이스도 배포되면 좋겠다.
무탈하게 잘 진행되길...
출처: 클래스101 / [웹 개발자 단과반 3교시] 초간단 AWS 웹사이트 배포 및 구글 애널리틱스 코드 심기 - 개발자 사관학교
'Programming > Web Programming' 카테고리의 다른 글
AWS 웹서비스 배포 (4) / RDS 데이터베이스 서비스 이용하기 (0) 2023.05.31 AWS 웹서비스 배포 (3) / EC2 서버 컴퓨터 임대하기 (0) 2023.05.31 AWS 웹사이트 배포 (1) / IP, 도메인, 포트 등 배포+운영관리 중요 용어 (0) 2023.05.30 Web 백엔드 (11) / 영화 리뷰 사이트 제작 (2) - API 만들기 (2) 2023.05.18 Web 백엔드 (10) / 영화 리뷰 사이트 제작 (1) - 프론트엔드와 백엔드 바인딩하기 (1) 2023.05.17