[총정리] AWS에 내 웹사이트 올리는 법 (1편)

멋진 웹사이트를 만들었다.

이걸 다른 사람들이 쓸 수 있게 하려면 어떻게 해야 하는지 알아보자!

 

일러둡니다

* 웹사이트를 배포하는 데는 여러가지 방법이 있는데, 클라우드 컴퓨팅 분야에서는 인프라부터 직접 설정하고 모든 걸 관리하는 IaaS 방식부터, 인프라는 알아서 처리해주는 PaaS 방식(AWS Elastic Beanstalk, Heroku 등), 그보다 더 간단하게 모든 과정을 자동화하는 SaaS 방식(Netlify, Firebase 등) 등이 있습니다. 뒤로 갈수록 내 통제력은 떨어지지만 더 빠르고 쉽게 배포 및 관리가 가능하죠.

이 글에서는 AWS의 EC2를 사용하는 IaaS 방식을 설명하고 있습니다. 그러나 솔직히 말하자면, 개인이 웹사이트 하나 배포하는데 굳이 EC2까지 쓸 필요는 없다고 생각합니다. 불필요하게 번거로운데다 배포도 너무 오래 걸리기 때문이죠. 그런데 왜 EC2를 썼냐고요? 저는 EC2밖에 몰랐거든요. 물론 상황에 따라 EC2가 더 적합한 경우도 있지만, 만약 가벼운 토이 프로젝트를 배포하실 계획이라면 좀 더 다양한 선택지들(특히 서버리스)을 알아보시고 결정하시길 권장 드립니다.

 

* 이 글은 AWS 우분투, Node.js, PostgreSQL를 기준으로 썼습니다. 또한 일반적으로 FE와 BE를 구분해서 작업하는데 여기서는 서버 측 템플릿 엔진을 써서 폴더가 하나인 예제를 사용했습니다. 하지만 저와 다른 상황이어도 전체 프로세스를 이해하시는 데는 도움이 되실 거라고 생각합니다.

 

* 이 글은 전문가가 쓴 것이 아니기 때문에 오류가 있을 수 있는 점 양해 부탁드립니다.

 

1. 호스팅이란?

내 웹사이트를 다른 사람들이 쓸 수 있게 한다는 것은

다른 사람들이 본인의 컴퓨터에서 언제든 내 웹사이트에 접속할 수 있게 만든다는 뜻이다.

즉, 24시간 작동하는 컴퓨터(서버)에 내 웹사이트를 올려서 실행시켜두면 된다.

하지만 일반 개인용 컴퓨터를 이런 용도로 쓰기는 어려우므로,

우리는 남의 컴퓨터를 빌려서 그 컴퓨터를 24시간 작동시켜두는 방법을 쓴다.

이를 호스팅(Hosting) 이라고 한다.

*호스팅
서버 컴퓨터의 전체 또는 일부를 이용할 수 있도록 임대해 주는 서비스

 

우리는 호스팅 업체로 수많은 글로벌 기업들이 이용하는 AWS(아마존 웹 서비스)를 사용하려고 한다.

AWS를 고른 이유는, 기간 단위로 이용료를 선불 받는 일반적인 호스팅 업체와 달리, AWS는 내가 실제 사용한 만큼만 과금하고, 가입 후 첫 1년간 프리티어 플랜(무료 구독)을 제공하므로 경제적이기 때문이다.

 

이제부터 AWS의 컴퓨터를 빌려서, 여기에 내 웹사이트를 올려보자!

 

2. AWS에 가입하기

AWS console에 가입한다. 가입 방법은 검색해보면 쉽게 찾을 수 있다.

참고로 카드 정보와 주소 등을 입력해야 한다.

 

3. AWS 컴퓨터 빌리기: EC2 인스턴스 생성

AWS에는 수많은 서비스가 있다. 그 중 호스팅은 EC2 라는 서비스를 이용하면 된다.

AWS console 검색창에 EC2를 검색해보자. "클라우드의 가상 서버"라고 적혀 있다.

우리처럼 24시간 작동할 컴퓨터를 빌리려면 'EC2 인스턴스'라는 것을 만들면 된다.

*EC2 인스턴스
글에서는 이해를 돕기 위해 컴퓨터를 빌린다고 표현하고 있지만, 호스팅이 꼭 물리적인 컴퓨터 기계(물리적 서버)를 빌리는 방법만 있는 건 아니다. 컴퓨터 내부에 가상의 작은 공간을 따로 만들어서 그 부분만 빌리는 방식으로도 임대할 수 있는데, 이런 공간을 가상 서버라고 한다. EC2도 물리적 컴퓨터가 아니라 이런 가상 서버이다. EC2 인스턴스를 만든다는 것은 아마존이 가진 컴퓨터에 나만 쓸 수 있는 가상의 작은 공간을 만들어서 빌리는 것이라고 이해하면 된다.

 

EC2 > 메뉴 중 '인스턴스' 클릭 > '인스턴스 시작' 버튼을 눌러 인스턴스를 생성한다.

아래를 참고해서 EC2를 세팅해주자.

 

• 이름 및 태그: 알아보기 쉽도록 빌린 컴퓨터에 별명을 지어주는 것이다. 원하는 이름을 적어준다. 예: my-cool-website
• 애플리케이션 및 OS 이미지: 윈도우, 맥과 같은 운영체제를 고르는 것이다. 아이콘을 눌렀을 때 아래 AMI에 '프리티어 사용 가능'이 적힌 게 뜨는 걸로 고르면 된다. 잘 모르겠는 분은 Ubuntu를 추천한다. 왜냐하면 사람들이 이걸 많이 쓰기 때문에 구글에 검색했을 때 우분투를 기준으로 쓴 글을 쉽게 찾을 수 있기 때문이다. 아무래도 문제를 해결할 때 자료를 쉽게 찾을 수 있는게 편리하다.
• 인스턴스 유형: 우리가 빌릴 컴퓨터의 스펙같은 것이다. 프리티어 사용 가능이라고 적힌 것을 고르면 된다. 오늘 기준으로는 t2.micro를 선택하면 된다. 
• 키 페어: 내가 빌린 컴퓨터에 아무나 접속하면 안 되니까 비밀 열쇠를 받을 건데 이게 키 페어다. 앞으로 EC2 인스턴스에 접속할 때 이 열쇠를 사용할 것이다. '새 키 페어 생성'을 눌러서 키를 만들어준다. 열쇠 이름을 적당히 지어주고 나머지 설정은 기본값을 써도 된다. 그럼 파일 하나가 다운로드될 것인데 이게 바로 열쇠이다. PC의 안전한 곳에 잘 저장해두자.
• 네트워크 설정: 방화벽을 설정할 건데, 이는 내가 빌린 컴퓨터에 오가는 트래픽을 제한하는 보안 장치이다. 일정한 규칙을 정해서 이 규칙에 해당하는 트래픽은 허용하고, 그 외는 모두 차단한다. 이런 규칙들의 모음을 AWS에서 '보안 그룹'이라고 하는데, 내가 원하는대로 규칙을 만들 수 있다. 기존에 만든 보안 그룹이 없다면 '보안 그룹 생성'을 눌러서 빈 그룹을 만들고, SSH, HTTPS, HTTP 트래픽을 모두 선택해주자.
  - SSH: 터미널(커맨드창 명령어)로 접속할 수 있게 하려면 필요하다. 우리는 뒤에서 계속 터미널을 써서 작업할 것이니 체크해주자. 단, 터미널은 나만 쓰면 되니까 "위치 무관 0.0.0.0/0" 대신 "내 IP"로 선택해준다. 그럼 누군가 터미널로 내 EC2 인스턴스에 접속을 시도해도 내 IP가 아니면 막힌다.
  - HTTPS: 사람들이 "https://..." 주소로 내 웹사이트에 접속할 수 있게 하는 규칙이다. 나중에 웹사이트에 SSL을 적용한 뒤에 접속이 되게 하려면 필요하다.
  - HTTP: 사람들이 "http://..." 주소로 내 웹사이트에 접속할 수 있게 하는 규칙이다. SSL을 적용하지 않은 현재 상태에서 접속이 되게 하려면 필요하다.

이제 '인스턴스 시작'을 누르면 인스턴스가 생성된다. 몇 분만에 아마존의 컴퓨터를 빌린 것이다!

 

4. EC2 접속하기

인스턴스 상태가 '실행 중'이 되면 사용할 준비가 되었다는 뜻이다.

이제 내가 빌린 컴퓨터에 접속해보자.

 

(1) 인스턴스를 체크하고 '연결' 버튼을 누른다.

(2) 여러 연결 방법 중 우린 SSH를 이용할 것이니 'SSH 클라이언트' 탭을 누른다.

(3) 하단에 'ssh -i .... com"이라고 적힌 것이 접속 명령어이다. 이를 복사한다.

(4) 이제 PC에서 터미널을 켠다. (윈도우는 명령 프롬프트, 맥은 터미널을 실행)

(5) 터미널에 명령어를 붙여넣는다. 이때, 아까 다운로드한 키 페어 파일이 있는 위치에서 명령어를 실행해야 한다.

키페어가 없는 곳에서 명령하면 이런 메시지가 뜬다.

Warning: Identity file FILENAME.pem not accessible: No such file or directory.

 

.pem (또는 .ppk) 파일, 즉 아까 만든 키 페어(비밀 열쇠)가 없어서 접속을 못한다는 뜻이다.

터미널은 현재 위치에서 키 페어 파일을 찾는데, 터미널을 그냥 켜면 홈 디렉토리에 위치한 상태로 시작하기 때문에, 홈 디렉토리에 키 페어가 없으면 파일을 못 찾는다.

 

해결 방법은 아래 중 하나를 쓰면 되는데 3번이 가장 제대로된 방법이라고 할 수 있겠다.

(1) 키 페어 파일을 홈 디렉토리로 이동시키거나

(2) 터미널을 켜고 키 페이 파일이 있는 위치로 이동을 한 다음에 명령어를 입력하거나 (cd 명령어 이용)

(3) 처음부터 키 페어 파일과 같은 위치에서 터미널을 켠다.

- 윈도우: 파일 탐색기 > 키 페어가 있는 폴더로 들어가기 > 마우스 우클릭 > '터미널에서 열기' 클릭

- 맥: Finder > 키 페어가 있는 폴더로 들어가기 > Finder 하단 경로막대 > ctrl + 현폴더이름 클릭 > '폴더에서 새로운 터미널 열기' 클릭

 

키 페어가 있는 위치에서 제대로 명령어를 입력하면, 내가 빌린 EC2 인스턴스에 접속이 될 것이다.

 

5. EC2 인스턴스에 파일 올리기

지금 우리가 빌린 EC2 인스턴스는 텅 빈 컴퓨터같은 상태이다.

여기에다 내 웹사이트 파일도 올리고, 이걸 실행하는데 필요한 다양한 소프트웨어들도 설치해줄 것이다.

5-1. 패키지 툴 최신화

소프트웨어들을 설치할 때 APT(Advanced Package Tool)라는 도구를 쓰는데,

먼저 이 녀석을 업데이트해줄 것이다.

EC2 인스턴스에 접속한 상태에서 아래 명령어를 입력한다.

sudo apt update

 

그럼 패키지 목록이 업데이트된다.

 

5-2. 깃(Git) 설치

내 웹사이트 코드를 EC2 인스턴스에 올리려면 SFTP를 이용하는 방법도 있고, Git을 이용하는 방법도 있다.

앞으로 코드가 바뀔 때마다 업데이트할 것을 생각하면 후자가 더 편리할테니 여기서는 Git을 사용해 보겠다.

아래 명령어로 Git을 설치해준다.

sudo apt install git

 

"git --version"을 쳤을 때 버전 정보가 나오면 잘 설치된 것이다.

 

5-3. Git SSH key 만들기

우리가 SSH로 EC2에 접속할 때 키 페어를 사용했듯이, Git도 SSH 접속을 할 때 키를 필요로 한다.

키를 만들어서 깃허브에 등록해줄 것이다.

 

먼저 키를 생성한다.

ssh-keygen

 

그럼 ".ssh"라는 폴더 안에 키가 만들어진다. 아래 명령어로 .ssh라는 폴더로 이동한다.

cd ~/.ssh

*홈 디렉토리(~)의 .ssh 폴더로 디렉토리를 바꿔라(cd) 라는 뜻

 

이제 .ssh 폴더 안으로 들어왔다. 이 폴더 안에 id_rsa.pub라는 파일이 생겨 있다. (ls라는 명령어를 치면 폴더 안에 있는 파일 목록 조회 가능)

이게 바로 열쇠 파일이다. 아래 명령어를 치면 이 파일의 내용이 출력될 것이다.

cat id_rsa.pub

 

몇 줄자리 알파벳 문자열같은게 나온다. 출력된 전체 내용을 드래그해서 복사한다.

 

이제 깃허브에 이걸 등록해줘야 한다.

깃허브 > 프로필의 Settings > SSH and GPG keys 메뉴 > New SSH key 버튼을 누른다.

키 이름을 정해주고, 복사했던 키 내용을 입력란에 붙여넣는다. 이때 엔터나 공백이 들어가지 않게 조심한다.

저장하면 키 등록이 완료된다.

 

5-4. 내 프로젝트 가져오기

본인 웹사이트 프로젝트가 깃허브에 올라가 있다는 전제 하에 (안 올렸다면 이 글을 참고해서 올려놓자)

이걸 EC2 인스턴스로 가져올 것이다.

 

(1) 일단 지금 .ssh 폴더 안에 들어와 있을 테니 다시 홈으로 돌아온다.

cd ~

 

(2) (선택사항) 홈 디렉토리에 바로 내 프로젝트를 가져와도 되는데, 홈 디렉토리에는 .ssh처럼 여러 숨김 파일이 있기 때문에 만약 이것들과 내 프로젝트가 섞이는게 싫다면 별도 디렉토리를 만든 뒤에 그 안에다 가져와도 된다.

mkdir 폴더명

* make directory라는 뜻. mkdir mywebsite 와 같이 이름을 지정해주면 됨

 

폴더 안으로 들어온다.

cd 폴더명

 

(3) 이제 EC2 인스턴스에 로컬 Git 저장소를 만든다.

git init

 

(4) 원격 Git 저장소(깃허브)와 연결한다.

깃허브에 올린 본인 프로젝트에 들어가서 "<>Code" 버튼 > SSH 탭을 누르면 나오는 주소를 복사해서 아래처럼 입력해준다.

git remote add origin git@github.com:....git

git remote -v 를 쳤을 때 주소가 나오면 잘 연결된 것이다.

 

(5) 이제 연결된 원격 저장소로부터 내 프로젝트 파일을 EC2로 끌어다 가져온다.

git pull origin main

 

그럼 내 웹사이트 코드 파일들이 생성될 것이다!

파일을 무사히 가져오는데 성공했다.

5-5. 필요한 소프트웨어 설치

이건 프로젝트마다 다른데, 본인 프로젝트에 필요한 것들을 설치해줘야 한다.

일단 내 경우 Node.js를 쓰기 위해 아래와 같이 설치해줬다.

// NodeSource 패키지 저장소 추가 (최신 버전을 설치하려면 필요. 20이라고 적힌 숫자는 바꿀 수 있음)
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -

// Node.js 설치
sudo apt-get install -y nodejs

// npm 설치
sudo apt install npm

// 내 프로젝트에 사용된 모듈 설치
npm i

 

6. 웹사이트 실행하고 접속하기

내가 빌린 AWS 컴퓨터에 내 웹사이트 파일이 올라갔고, 앱 실행에 필요한 모든 것을 설치했다.

이제 접속에 필요한 설정들을 해준 뒤 웹사이트에 접속해보자.

 

6-1. 포트 설정

현재 서버가 listen하고 있는 포트가 개발용 포트(예를 들어 Node.js 앱은 3000번)라면,

이제 상용 환경이므로 80번 포트를 듣도록 코드를 수정해줘야 한다.

 

아래는 Node.js에서의 코드이다.

const port = 80;
app.listen(port, () => {
     console.log(`Server running on port ${port}.`);
});

 

이 상태로 실행해보자.

Node.js의 경우 아래 명령어를 쓰는데 본인 앱에 맞는 명령어를 쓰면 된다.

node app.js

 

그럼 잘 실행.. 이 아니라 Error가 날 것이다.

Error: listen EACCES: permission denied 0.0.0.0:80

 

80번 포트 권한이 없다는 문구이다. 이게 뭘까?

 

리눅스에서 1024번 밑의 TCP/IP 포트 번호는 root 계정만 쓸 수 있다. 그런데 지금 우리의 계정은 ubuntu이다.

(터미널에 whoami 라고 치면 접속한 계정 이름을 볼 수 있다)

 

이를 해결하려면 아래 2가지 방법 중 하나를 쓰면 된다.

 

방법1. 관리자 권한으로 앱 실행

앞에 sudo를 붙여서 명령하면 정상 작동한다. 매번 sudo를 붙여야 하니 잊지 말자.

sudo node app.js

 

방법2. 관리자 계정 사용

우선 우리가 ubuntu인 상태로 git 파일들을 가져왔으므로, 웹사이트 파일들의 소유자도 ubuntu이다.

이를 root 소유로 바꿔준 뒤, root 계정으로 접속하여 앱을 실행하면 된다.

// 권한 변경
sudo chown -R root:root 폴더이름/

// root 계정으로 로그인
sudo su

 

6-2. CORS 설정

CORS 설정을 해줬다면 origin에 EC2 퍼블릭 IP를 추가하거나 바꿔준다.

AWS console에서 내가 만든 인스턴스를 선택하면 하단 영역에 정보가 죽 뜨는데, 이 중 "퍼블릭 IPv4 주소"라고 적힌 항목이 내가 빌린 컴퓨터의 주소이다. 이 주소를 사용한다.

아래는 역시 Node.js 기준이다.

app.use(cors({
  origin: ['http://localhost:개발포트', 'http://EC2의퍼블릭IP']
}));

 

6-3. 웹사이트 접속

모든 세팅이 끝났다. 이제 웹사이트에 접속해보자.

웹사이트에 접속하려면 주소가 필요한데, 위에서 사용했던 퍼블릭 IPv4 주소를 사용하면 된다. 이 IP주소를 복사해서 브라우저 주소창에 입력한다.

만약 내 EC2 인스턴스의 퍼블릭 IP주소가 1.2.3.4라면, 브라우저 주소창에 아래처럼 입력한다.

http://1.2.3.4

 

 

웹사이트 접속에 성공했다!!

 

[2편에서 계속 - 고정 IP, DB, 도메인, SSL 인증서]