[node js] 5주차 -1

Local Repository에 Remote Repository로 올리기

• • Remote Repository 주소 복사

  • 

  • 반드시 SSH가 아닌 HTTPS를 선택한 뒤 주소를 복사해주세요!
  • SSH를 이용하려면 보안 연결을 위해 별도의 설정이 필요합니다. 그러나 우리는 목적을 최대한 빠르게 도달할 수 있도록 최대한 간단한 과정으로 진행중이예요!
  • Remote Repository를 Local Repository에 추가: git remote add
  • 위에서 복사한 주소를 아래 양식에 맞춰 VS Code의 터미널에 넣어 실행해주세요!
  • 반드시 HTTPS가 선택된 상태에서 복사하는것 잊지 마세요!

  • 

    엔터를 쳐서 아무것도 안나오면 에러가 발생하지 않은것이므로 정상입니다!

git remote add origin <github 페이지에 나오는 주소>

• 명령어 예시

git remote add origin <https://github.com/selenehyun/nodejs_spa_mall.git>

• • Local Repository의 Commits을 연결된 Remote Repository에 올리기:
  • git push 
  • 이미 스파르타 쇼핑몰 프로젝트에서 커밋을 했던것 기억나시나요?
  • 그때 했던 커밋을 Remote Repository인 GitHub의 레파지토리에 올리는 명령어가 git push예요!

  • git push -u origin master
    

  • 

  • GitHub에서 확인해보기

  • 

  • 위와 같이 나온다면 성공!
  • 여러분은 지금 Local Repository에 Remote Repository를 연결하고, Local Repository에 있던 Commit History를 Remote Repository에 업로드한거예요!
  • 여기까지 마쳤다면 Remote Repository에 있는 내용은 언제 어디서든 여러분 컴퓨터에 받아서(clone) 작업이 가능합니다!

최신 변경사항 올려보기

아마 여러분이 저 몰래 Git Commit을 따로 하지 않았다면 첫 커밋 이후 새로운 변경사항들이 생겼을거예요! 새로운 변경사항을 커밋으로 만들어서 다시 Remote Repository인 GitHub에 올리도록 해봅니다.

 

• 변경사항이 있는지 확인: git status

git status

• modified: 수정된 파일이 2개 존재한다고 합니다.
• Untracked files: static 폴더 하위의 파일이 모두 Untracked 상태라고 알 수 있습니다.

💡 Git에서 Untracked 상태는 뭘까요? 아직 Git을 통해 관리하지 않고 있는 상태에 있는 파일을 말합니다!

변경사항을 Staging Area 에 올리고 Commit

이전에 했던것과 동일합니다! git add 명령어를 이용해 변경사항을 Staging Area에 올리고 git commit 명령어를 이용해 커밋을 해줍니다.

git add .
git commit -m "프론트엔드 코드 추가"

Commit을 푸시!

이번에는 처음과 달리 짧게 해도 됩니다!

git push

왜 명령어가 조금 다를까요?

 

처음엔 Remote Repository에 master 라는 이름의 브랜치가 없었기 때문에 새로운 브랜치를 생성하기 위해 -u 옵션을 붙였고, Remote Repository 이름으로 등록해둔 origin 을 적어 어떤 Remote Repository에 Commit을 push할건지 적었습니다. Remote Repository에도 존재하는 브랜치에서 작업하는 경우 단순히 git push 명령어로도 Local Repository에 있는 Commit을 올릴 수 있습니다.

 EC2 Instance 생성

• 1. 서버를 대여하기 전, 웹 서버 개념 복습
  이것 저것 한번에 많은것을 배우다 보니 잘 기억이 안날수 있어요 😉 만약 이 개념을 잘 모르면 여러분이 왜 이러한 과정을 거쳐야 하는지 모르는 채 지나갈 수 있기 때문에 복습!
  • 웹 클라이언트(브라우저)와 웹 서버의 관계
  • 웹 클라이언트(브라우저)는 웹 서버에 요청을 해서 웹 서버로부터 원하는 데이터를 받아가는 일방적인 관계라고 볼 수 있습니다.

💡 어? 그럼 웹 서버는 절대로 웹 클라이언트에 먼저 요청할 수 없는건가요? 네! 맞습니다!

1. 서버는 어떤 클라이언트가 어떤 주소로 존재하는지 모르는게 일반적이기 때문에 서버에서 먼저 클라이언트와 연결하거나 요청 할 수 없습니다!
2. 만약 서버가 클라이언트에게 먼저 요청하게 된다면 서버가 클라이언트가 되고 클라이언트가 서버가 되는, 역할이 반전된 상황으로 봐야 합니다 😂

 

 

• 서버 컴퓨터와 웹 서버(프로그램)의 관계
  • 우리가 만든 스파르타 쇼핑몰과 같은 프로그램을 API 서버, 웹 서버, 앱 서버 등의 이름으로 부를 수 있으며 이것은 모두 프로그램입니다.
  • 서버 컴퓨터는 여러분의 컴퓨터와 똑같은 역할을 해요! 지금까지 여러분의 컴퓨터가 어떤 역할을 했는지 다시 짚어볼까요?
    • Node.js로 app.js 파일을 실행해 서버 프로그램을 켤 수 있습니다.
    • MongoDB와 같은 DBMS를 설치하여 데이터베이스를 사용할 수 있습니다.
    • 여러분의 컴퓨터가 이러한 역할을 할 수 있기 때문에 최종적으로 우리가 만든 웹 서비스에 접속할 수 있는것이었죠 :) 만약 상용 서비스를 운영중이었는데 이 컴퓨터가 꺼진다면? 😱 상상하기도 싫어지네요...
• 우리가 지금 대여하려고 하는 EC2라는건 무엇일까요? 검색해보고 고민한 뒤 열어보세요!
• 우리는 지금 AWS에서 제공하는 서버 컴퓨터 대여 서비스인 EC2를 사용합니다!
• 즉, 서버 컴퓨터를 대여하려고 하는것이예요.

EC2 Instance에 접속하기

방화벽이란?

여러분의 컴퓨터에 아무나 연결할 수 없도록 해주는 역할을 합니다.

AWS에서는 “Security Group” 또는 “보안 그룹”이라는 이름으로 방화벽을 제공합니다.

💡 방화벽이 없으면 어떻게 될까요? 스팸 전화나 스팸 메일을 받는것보다 더 심각한 상황이 여러분의 서버 컴퓨터에 발생할 수 있습니다. 여러분의 컴퓨터에 방화벽이 없으면 아무나 여러분의 서버 컴퓨터에 설치된 MongoDB에 접속을 시도 할 수도 있고, 우리가 모르는 사이 무언가 해킹당할 수 있는 상태가 됩니다!

EC2 Instance에 접속하기 위한 도구, SSH 개념 정리

• SSH(Secure Shell)는 일반적으로 다른 컴퓨터에 연결할 때 사용되는 프로그램 입니다. 다른 접속 방법보다 보안이 뛰어나 서버 연결을 위해 일반적으로 사용됩니다.
• 접속 할 Instance의 방화벽에서 22번 포트가 열려있어야 접속 가능합니다. AWS EC2의 경우, 기본적으로 생성하는 Instance는 이미 22번 포트가 열려있습니다. 확인해볼까요?

AWS EC2에 접속하기

Windows: ssh가 없으므로, git bash라는 프로그램을 이용!

gitbash를 실행하고, 아래를 입력!

ssh -i 받은키페어를끌어다놓기 ubuntu@AWS에적힌내아이피

예) 아래와 비슷한 생김새!

ssh -i /path/my-key-pair.pem ubuntu@13.125.250.20

• git bash를 종료할 때는 exit 명령어를 입력하여 ssh 접속을 먼저 끊어주세요.

• 1. 간단한 리눅스 명령어 연습하기
  • 일반적으로 리눅스 서버에서는 마우스(GUI) 대신 쉘 명령어(CUI)를 통해 운영체제의 기능을 이용합니다.

 💡 왜 마우스를 사용하지 않을까? 서버에서 자주 필요하지 않은 화면을 그려내기 위해 CPU, Memory(RAM)를 사용하는것보다 서버 프로그램을 운영하는데 사용하는게 훨씬 비용 효율적이기 때문에 이와 같이 사용하는것이 기본이자 관습이 되었습니다. 화면을 사용하지 않으니 당연히 마우스도 사용하지 않게 되었습니다.

• • [가장 많이 쓰는 몇 가지 명령어]

ls: 내 위치의 모든 파일을 보여준다.

pwd: 내 위치(폴더의 경로)를 알려준다.

mkdir: 내 위치 아래에 폴더를 하나 만든다.

cd [갈 곳]: 나를 [갈 곳] 폴더로 이동시킨다.

cd .. : 나를 상위 폴더로 이동시킨다.

cp -r [복사할 것] [붙여넣기 할 것]: 복사 붙여넣기

rm -rf [지울 것]: 지우기

sudo [실행 할 명령어]: 명령어를 관리자 권한으로 실행한다.
sudo su: 관리자 권한이 있는 계정으로 접속한다. (exit 입력하면 관리자 계정에서 로그아웃)

Node.js 및 MongoDB 설치

• 1. EC2 Instance에 Node.js 설치하기
  • 어떻게 하면 될까요?
    • 우리는 Node.js 웹 사이트에 들어가 다운받아 설치 프로그램으로 설치를 했지만 지금은 어떻게 할지 감이 안오시죠?
    • 우리가 사용중인 EC2 Instance에서는 모든 것을 명령어로 조작합니다. 그래서 Node.js 설치 또한 명령어로 간단히 설치할 수 있습니다.
    • 아래에 있는 설치 명령어는 Node.js v16을 설치해주는 명령어입니다!
  • [코드스니펫] Node.js 설치 명령어

• curl -sL <https://deb.nodesource.com/setup_16.x> | sudo -E bash -
  
  sudo apt-get install -y nodejs
  ​

  • 설치 및 설치 확인
    • 설치: EC2 Instance에 접속이 된 상태라면 위에서 복사한 명령어를 붙여넣고 엔터를 누르고 기다리면 됩니다.
    • 설치 확인:

이전에 아래와 같은 명령어로 확인했던것처럼 확인할 수 있습니다!

node -v
npm -v

EC2 Instance에 MongoDB 설치하기

어떻게 하면 될까요?

• Node.js를 설치했던것과 거의 동일합니다!
• 단, 명령어를 한 줄 한 줄이 무슨 뜻인지 이해하려면 shell script, linux 등 알아야 할 지식이 너무 많아요! 단순하게 MongoDB를 사용하기만 하는것은 해당 코드를 몰라도 문제가 생기지 않습니다!

코드스니펫] MongoDB 설치 명령어

👉 mongoDB 공식자료를 참고해서 정리했습니다. (링크)

wget -qO - <https://www.mongodb.org/static/pgp/server-4.2.asc> | sudo apt-key add -

echo "deb [ arch=amd64,arm64 ] <https://repo.mongodb.org/apt/ubuntu> bionic/mongodb-org/4.2 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-4.2.list

sudo apt-get update

sudo apt-get install -y mongodb-org

[코드스니펫] MongoDB 실행 명령어

• 아래 명령어를 실행하고 아무 반응이 없다면 잘 된것입니다!

sudo service mongod start

 서버 프로그램 실행 및 웹사이트 접속

• 1. EC2 Instance에서 서버 실행
  • GitHub에 있는 Repository Clone

Remote Repository로 부터 코드를 가져오는것이 Clone이라고 이해할 수 있습니다. 

1. 이전 수업에서 만든 GitHub 레파지토리 페이지로 들어가 초록색 “Code” 버튼을 눌러 네모가 두개 겹친 모양의 아이콘을 가진 복사 버튼을 눌러주세요.

1. EC2 Instance 터미널에 접속해 복사한 내용을 붙여 넣어주세요.

아래와 같은 형식으로 나타나야 합니다.

아래는 예시이므로 복사해서 사용하시면 안됩니다!

<https://github.com/selenehyun/nodejs_spa_mall.git>

• • 프로젝트 실행
    1. cd nodejs_spa_mall
    2. npm install
    3. node app.js
  • 웹 사이트 접속

EC2 Instance IP 복사

 

브라우저에 주소 입력

<http://복사한IP:3000>

위와 같은 형식으로 입력하면 아래처럼 접속이 안되는것을 확인할 수 있습니다!지금은 안되는게 정상입니다! 계속 따라와주세요!

• • 왜 접속이 안될까요?
  • 아직 서버 방화벽에서 우리가 접속하는것을 허용하지 않았기 때문인데요! 이 “방화벽”에 대해서 조금 더 자세히 이해하기 위해서는 IP와 Port에 대해 조금 알아야 합니다
    • • •  

IP Address(IP 주소)와 Port(포트)

• IP 주소

컴퓨터가 통신할 수 있도록 컴퓨터마다 가지는 고유한 주소입니다. 정확히는 통신이 가능한 모든 기기가 통신할 수 있도록 가지고 있는 특수한 주소입니다.

각 기기가 어디에 있는지 알려주는 좌표(Coordinate)와 비슷하다고 생각하면 쉽습니다.

이 주소는 공인 IP 주소와 사설 IP 주소가 나뉘어져 있는데, 일반적으로 인터넷을 사용하기 위해서는 반드시 하나 이상의 공인 주소가 있어야만 합니다.

• 포트

통신이 가능한(IP를 가진) 모든 기기는 Port라고 불리우는 데이터가 드나들 수 있는 통로가 있습니다.

기기에서 실행되는 프로그램들 중 통신이 필요한 프로그램들은 운영체제에게 ‘내가 이 통로를 사용할게! 데이터 섞이면 헷갈리니까 다른 프로그램은 사용할 수 없게 해줘!’ 라고 알린 뒤 해당 포트를 사용하는것이 원칙입니다.

즉, 하나의 포트는 여러 프로그램이 같이 사용할 수 없다는 의미가 됩니다.

• EC2 Instance 포트 설정: AWS Security Group

기반 지식이 생겼으니 접속이 안되는 이유를 다시 설명을 드리자면, 우리의 EC2 Instance가 가진 방화벽에서 3000번 포트를 막고 있기 때문에 Node.js로 서버를 아무리 켜도 접속을 할 수 없는것 입니다.

• Add rule을 눌러 아래의 정보를 추가로 입력합니다.
• 유형: HTTP
• 소스: Anywhere-IPv4

EC2 Instance 포트 설정: iptables

iptables란?

AWS가 아닌 리눅스 운영체제 내부에서의 방화벽 역할을 하는 프로그램입니다.

리눅스로 들어오는 모든 요청은 iptables에 의해 정의된 규칙을 따라 처리되며, 우리는 이것을 이용해 외부에서 80 포트로 들어오는 요청을 리눅스 내부에서 사용되는 3000 포트로 전달하도록 규칙을 설정할거예요!

• 왜 80 포트인가요?

우리가 브라우저로 접속하는 경우 기본적으로 80 포트를 사용하도록 되어 있습니다.

ex) http://www.google.com 으로 접속하는 경우

http://www.google.com:80 으로 접속하는것과 동일합니다.

 

1. ex) http://www.naver.com 로 접속하는 경우
2. http://www.naver.com:80 으로 접속하는것과 동일합니다.

이것은 http 프로토콜을 사용하는 경우 기본 포트를 80으로 사용하는것이 약속으로 정해져 있기 때문입니다.

💡 참고로 https 의 기본 포트는 443이예요!

iptables 규칙 변경 명령어 (80 → 3000 전달 규칙)

sudo iptables -t nat -A PREROUTING -i eth0 -p tcp --dport 80 -j REDIRECT --to-port 3000

영원히 꺼지지 않는 서버 실행 프로그램, PM2

• 현재 상황 검토
  • 여러분은 지금 EC2 Instance에 ssh로 접속한 상태일텐데요, 이 접속이 끊기는 순간 웹 사이트의 접속은 불가능해집니다.
  • 서버 컴퓨터에서는 항상 서버 프로그램이 켜져 있어야 들어온 요청을 처리해 응답을 보낼 수 있기 때문인데요, 지금은 ssh 접속이 끊기거나 실행중인 Node.js 프로그램을 끄면 웹 사이트에 접속할 수 없는 상황입니다.
• 어떻게 해야 할까요?

• 이 상황을 해결하기 위해 우리는 Node.js를 실행하고 관리하도록 만들어진 PM2를 이용할 예정입니다.

pm2 설치

pm2는 관리자 권한이 필요하기 때문에 관리자 계정으로 전환합니다.

sudo -s

npm으로 설치

-g 옵션은 Global의 약자로, 특정 폴더나 프로젝트에 설치하는게 아닌 전역 프로그램으로 설치하겠다는 의미입니다.

npm install -g pm2

pm2로 app.js 실행

pm2 start app.js

위 명령어를 실행한 뒤 아래처럼 보인다면 성공적으로 실행된것입니다!

서버와 도메인 연결하기

DNS란?

• 우리가 접속하는 컴퓨터는 숫자로 되어있는 주소(IP 주소)가 붙어있습니다.
• 우리가 흔히 사용하는 주소(URL)는 우리가 알아보기 쉽게 하는 등의 이유로 IP 주소에 별명을 붙이는데, 이것이 도메인입니다. 도메인을 실제 서버를 찾을수 있도록 변환해주는 시스템을 DNS 라고 합니다.