Web 웹사이트 배포 (8) / EC2에 Node.js 프로젝트 옮기기

 

지난 강좌에서 임대한 AWS 서버컴퓨터(EC2)에서 원격으로 접속하는 방법을 배웠었다.

이제 웹사이트를 임대한 서버에서 실제로 작동시켜볼 것이다

 

이 포스팅은 강의를 듣고 공부했던 내용을 기록한 내용이다.🧐

 

* 강좌는 아래 링크에서 수강하고 있다.

 

클래스 101 [유료강좌]

개발자 사관학교 - [웹 개발자 단과반 3교시] 초간단 AWS 웹사이트 배포 및 구글 애널리틱스 코드 심기

https://class101.net/ko/products/619b3c6b776fd0000d72459b

[웹 개발자 단과반 3교시] 초간단 AWS 웹사이트 배포 및 구글 애널리틱스 코드 심기 | 개발자 사관

 

 

 

 

 

 

CHAPTER 3: AWS에서 컴퓨터를 임대해서 현업 개발자처럼 배포하기 (2)

[3. EC2를 Node.js 서버로 세팅하고 리뷰사이트 실행하기]

 

웹사이트를 Node.js를 통해 제작했었다.

때문에 EC2를 Node.js 서버 환경으로 우선 세팅해주어야 한다.

강좌에서는 영화 리뷰사이트를 배포 중이지만 나는 내 개인 웹사이트를 배포하고 있다.

때문에 포스팅 속 웹서비스의 내용물이 조금 다를 수 있다.

 

 

원격컴퓨터에 접속된 상태로 아래 명령어를 차례대로 입력해준다.

*Node.js 서버 환경을 세팅하는 명령어들이다. (자바나 python 환경은 다른 명령어를 입력해주어야 한다.)

 

 

1. curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -

2. sudo apt-get install -y nodejs

3. sudo apt-get install build-essential

 

세가지 명령어를 차례로 복사 붙여넣기 해준다. (맨앞 숫자는 순서때문에 붙여놓은 것이다.

1. 또는 2. 3. 다음에 내용만 복붙해준다.)

 

 

 

sudo apt-get install -y nodejs

 

sudo apt-get install build-essential

 

 

continue?를 묻는 질문에는 Y로 긍정해준다.

3개 설치하는데 2-3분 정도 소요된 것 같다.

 

 

다음으로 Node.js 서버를 실행시켜주는, pm2라는 서버 실행도구를 추가 설치해야 한다.

그러기 위해서는 관리자 권한으로 재접속해야한다.

아래 명령어를 입력하자.

 

sudo -s

그러면 초록색 우분투 유조가 아닌, root 유저로 접속된 것을 볼 수 있다.

아래 명령어로 pm2를 설치해준다.

 

npm install -g pm2

 

명령어의 내용을 잠깐 살펴보면,

npm은 node package manager로 node.js에 필요한 다양한 패키지들을 제공한다.

여기서 pm2를 -g, 즉  전역적으로 설치해준다.

 

 

 

 

 

pm2가 5.3.0 버전으로 설치가 완료되었다.

 

 

 

설치가 끝난뒤,

pm2 라는 명령어를 입력하면 pm2에서 제공하는 여러 명령어들을 살펴볼 수 있다.

 

 

와우 멋진 그림은 덤이다.

쭉 내려보면 아래와 같은 명령어 소개를 볼 수 있다.

 

 

 

 

 

그렇다고 한다.

 

 

 

ls -al 명령어로 node.js 파일들이 잘 업로드 되어있는지 확인한다.

 

안녕하세요!

 

 

 

 

이제 정말로 서버를 실행시켜보자.

기존 로컬 서버에서는 vscode내에서 supervisor app.js를 통해 실행시켰었다.

여기서도 유사하다. 다만 pm2를 이용해준다

 

pm2 start app.js

 

라는 명령어를 입력해주면 된다.

app.js는 서버와 연결된 핵심 파일이였다.

명령어의 내용은 pm2를 이용해 start 서버 시작, 시작점은 app.js이다. 정도로 해석된다.

 

 

성공적으로 작동되는 서버컴퓨터를 볼 수 있다.

vscode의 콘솔에서 봤던 메시지들을 보기 위해서,

pm2 logs

라는 명령어를 추가적으로 입력해준다.

 

 

 

 

 

약간의 알 수 없는 소리들이 스쳐간 뒤에

vscode에서 봤던 익숙한 로그들이 보인다! 

 

 

 

 

마지막으로 정말 잘 작동되고 있는지 웹사이트를 열어보자.

주소는 AWS - Instance에 들어가 몇번 확인했던 그 IP 주소이다.

 

 

 

 

여기 이 00.000.00.00 라고 쓰인 IP 주소를 복사해서 브라우저에 띄워본다.

 

 

 

 

그러면 내가 만든 서버에게 거부당하는 경험을 할 수 있다.

 

 

 

이유가 뭘까?

app.js의 코드 내용을 살펴보면 그 이유를 살펴볼 수 있다.

 

 

 

 

Ctrl C로 잠깐 로그에서 나가준다. (맥도 cmd c아니고 ctrl c!)

vscode와 달리 ctrl c를 눌러도 서버에서 나가지는 것은 아니다.

서버는 pm2 kill 이라는 명령어로 나갈 수 있으며, ctrl c는 잠깐 로그에서 나가는 것일 뿐이다.

 

그리고 vim이라는 우분투(리눅스) 코드에디터로 app.js를 열어본다.

vscode라는 것이라고 생각하면 된다.

 

vim app.js

 

 

 

 

 

그러면 app.js에 작성했던 코드들이 나타난다.

내용을 살펴보면 app.listen, 서버와 연결하는 부분에 3000번 포트를 이용하겠다고 작성한 것을 볼 수 있다.

그런데 서버 컴퓨터를 임대할때 3000번 포트를 개방하겠다고 설정해준 적이 없다.

따라서 AWS 콘솔 페이지에 들어가 3000번 포트를 개방하도록 수정해야 한다.

 

 

 

 

 

AWS 콘솔룸에서 좌측에 Instance탭에 들어가 원하는 인스턴스를 눌러준다. (파란색 ID를 누르면 들어가진다.)

 

 

 

 

그리고 쭉 아래로 내려보면 Security - Security groups라는 설정이 보인다.

아래 파란색 부분을 눌러 들어가준다.

 

 

 

 

 

그러면 Inbound rules에 80번 포트, 22번 포트가 개방되어 있는 것을 볼 수 있다.

Edit inbound rules를 눌러 3000번 포트를 추가해보자!

 

 

 

 

 

Add rule을 눌러 Custom TCP로 3000번 포트를 Anywhere로 개방하도록 한다.

 

Anywhere IPv4로 해주었다.

그리고 Save rules를 눌러 저장해준다.

 

 

 

 

 

혹시 몰라 강좌와 똑같이 IPv6의 HTTP와 SSH도 만들어주었다.

 

 

 

 

이제 개방된 3000번 포트를 통해 사이트에 들어가보자.

IP주소:3000이라고 입력하면 접속이 된다.

 

 

 

 

하지만 안됐다.

약간 멘붕이 와서 포기하고 싶어졌던 순간이다.🥹

어떤 부분이 잘못되었는지 쉽게 찾을 수 없을 것 같았다.

하지만 강좌에서 올려주신 코드와 내 웹사이트를 비교해보니..

 

 

 

 

mainRouter.js

 

메인페이지를 상대경로로 정해주고 있었다.

/main을 주소에 추가하니 사이트가 정상적으로 나타났다.

 

 

 

 

 

그런데 이 상대 경로를 지워주고 싶어졌다.

vim내에서 코드를 수정해보자.

 

 

 

 

vim에디어터로 mainRouter를 열어준 후에, 

키보드로 원하는 부분으로 옮겨 i (Insert)를 눌러준다.

 

i: 현재 위치에서 insert mode로 전환.

o: 들여쓰기 된 상태로 insert mode로 전환.

a: 다음 문자열에서 insert mode로 전환.

 

수정이 완료되었다면 ESC를 눌러 insert mode를 종료한다.

그리고 수정사항을 저장하기 위해 :w을 누른다.

저장이 완료되면 :q를 눌러 나가준다.

 

아래 블로그에서 vim 에디터 활용 방법에 대해 잘 정리되어 있어 많은 도움이 됐다.

https://hun-dev.tistory.com/5

[Editor]Vim 에디터 사용 방법

 

 

 

 

 

서버를 종료시키고 다시 실행시킨다.

그리고 다시 ip를 입력하면 웹사이트가 잘 작동된다!!

 

 

 

 

 

휴대폰에서 접속하자 박스가 너무 커보여서

같은 방식으로 vim에디터에서 css파일을 수정해주었다.

서버를 다시 실행시킬 필요 없이, :w만 해주자 바로바로 휴대폰에서 확인이 가능했다!

 

 

 

 

 

휴대폰은 컴퓨터에 비해 조금 더 버벅대는 느낌이 있었다. 

데이터 업데이트가 바로바로 되지는 않고 될때도 있고 새로고침해야 뜰때도 있었다.

또 스크롤바가 휴대폰에서는 보이지 않기도 했다.

그래도 웹사이트 자체는 잘 작동하기 때문에 성공적이다!

 

 

 

 

 

 

 

 

 

출처: 클래스101 / [웹 개발자  단과반 3교시] 초간단 AWS 웹사이트 배포 및 구글 애널리틱스 코드 심기 - 개발자 사관학교