[AWS] EC2 SetUp

설정·2020년 12월 23일

EC2 배포 과정으로 폴더와 노드 js 파일부터 생성하여 진행 할 예정이다.

1. 프로젝트 폴더 생성

mkdir practice-server-deploy // 프로젝트 폴더 생성
cd practice-server-deploy //해당 폴더 이동
code . // 해당 폴더 오픈

2. 빈 js파일에 Package.json 설치

npm init

3. 사용할 미들웨어 설치

express
cors
등

# express 설치
npm install express 

# cors 설치
npm install cors

4. 현재까지 만든 폴더와 js 파일 테스트

const express = require('express');
const cors = require('cors');
const app = express();

app.use('/', (req, res) => {
        res.send("HELLO SERVER");
}); // 5000번 포트로 접속하여 서버 연결 될 시

app.listen(5000, () => { console.log("server 5000"); });

여기까지는 기존 폴더와 파일 생성 후 서버 연결까지 테스트 해보는 과정이었다.
하지만, 우리는 해당 포트넘버에서만 받는 것이 아닌(현재 포트넘버: 5000) 누구나 접속을 할 수 있게 배포된 url에서 받고 싶기에 해당 포트넘버를 배포하는 과정이 필요하다.

5번부터는 EC2를 배포하는 과정이다.

5. github 원격저장소를 이용하여 EC2에 서버 업로드

git 저장소가 있다면

$ git clone [해당 레파지토리 주소]
$ cd [해당 레파지토리 주소]
$ code .
 - [코드작성] - 
$ git add [변경된 파일 add]
$ git commit -m '커밋할 내용'
$ git push origin master

git 저장소가 없다면

# 현재 디렉토리 기준
$ git init // 현재 디렉토리 기준으로 Git 저장소가 생성
$ ls -d .git // 디렉토리 내부에 .git 디렉토리가 생성되어있음
$ echo .env > .gitignore // .gitignore 생성
$ git add . // 디렉토리 내 모든 파일을 Git으로 관리되도록 추가
$ git commit -m '커밋할 내용' // 커밋 생성과 함께 메세지 
$ git push origin master

6. AWS에서 EC2 SetUp 과정

인스턴스 -> 인스턴스 시작 -> 검토 및 시작 -> 시작하기
시작하기 클릭 시 임대한 컴퓨터에 접속하기 위해 key를 받는다
새 키 페어 생성 창이 뜨며 새 키 페어 생성 선택과 키 페어 이름을 작성한 후 키 페어 다운로드
- 해당 키 페어는 다운로드폴더에 있음.
  예) 키 페어 이름 : practice-server-deploy
인스턴스 시작을 누르면 인스턴스목록의 마지막 라인에 생성된 인스턴스가 추가된다.
- 만약, 생성되어 있는 인스턴스가 많다면 각 인스턴스에 이름을 지정한다.
사용 할 인스턴스를 선택 -> 연결 -> SSH 클라이언트
- 사용 할 인스턴스에 접속!!하는 부분으로 가장 중요하다
SSH 클라이언트에 작성되어 있는 글들은 인스턴스 접속을 하는 방법으로 가장 중요하다.
✅ SSH 클라이언트를 이용한 인스턴스 접속하기
[❗현재 디렉토리는 .ssh 기준이다. ~/.ssh$ [명령어]]
1. .ssh폴더에 생성한(다운로드) key를 옮긴다/
  $ mv ~/다운로드/[키이름.pem] ./
  - .ssh폴더가 없을 경우
    root디렉토리에서 .ssh폴더를 생성한다.
    
    $ ~mkdir .ssh
2. SSH 클라이언트에 있는 chmod ~로 시작하는 명령어를 입력한다.
3. SSH 클라이언트에 있는 ssh -i "[키이름.pem]" ubuntu@~로 시작하는 명령어를 입력한다.
  - 해당 SSH 클라이언트에 있는 명령어들을 복사하여 터미널에 붙여넣기 해도 된다.
  - 키이름들은 내가 인스턴스에서 사용하기 위해 만들어놓은 키이름이다.
SSH 클라이언트에 작성되어 있는 명령어 입력이 완료되면 해당 인스턴스에 접속이 된다.
접속이 된 인스턴스는 새로운 서버를 임대한 것이므로 서버 APP이 작동될 수 있도록 환경세팅을 해준다.

[Environment Settings]
$ sudo apt update
$ sudo apt install nodejs
$ sudo apt install npm

7. github에 올린 Repositories를 Clone 후 Modules 다운

$ git clone [해당 레파지토리]
$ cd [해당 레파지토리]
$ ls // 해당 레파지토리로 들어가면 노드모듈이 설치되어 있지 않음(모듈은 git에 올리지 않는다-gitignore)
$ npm install // package.json의 dependencies를 설치

[node_modules]
node_modules은 용량이 너무 크기 때문에 git push를 할 때 .gitignore에 담아둔다.
그렇기 때문에 레파지토리를 clone할 때 node_module은 없다.

$ ls할 시 포함되어 있는 폴더

index.js // 4번의 js파일

package.json

node_modules를 설치하기 위해서 npm install을 해준다.

install 후 $ ls

index.js

package.json

node_modules

[⬆ 위의 내용은 client와 server가 같은 레파지토리에 있는 것이 아닌, server레파지토리 일 시에만]

client와 server가 같은 폴더에 있을 때 package.json 설치
$ git clone [레파지토리]
$ cd [레파지토리]
$ cd [해당 레파지토리의 서버 폴더] // 해당 서버 폴더 안에 package.json폴더 있는지 확인
$ npm install

8. EC2 보안설정

인스턴스 -> 인스턴스 선택 -> 보안 탭 -> 보안그룹 선택
인바운드 -> 인바운드 규칙편집
유형, 포트범위, 소스 편집
- 유형 : 사용자지정 TCP
- 포트범위
  - 기존 포트 : 80
  - 사용자 지정시 : 사용자가 원하는 포트번호
    (4번에 작성한 포트는 5000번이므로 5000을 쓰면 됨)
- 소스
  - 사용자 지정 : 사용자가 지정한 포트로 접속이 가능
  - 위치 무관 : 어느곳에서나 접속 가능
  - 내 IP : 나의 IP로만 접속 가능

9. 서버 테스트

clone했던 레파지토리를 실행
- npm start
실행 시킨 후 해당 포트번호로 이동
- 해당 포트번호는 인스턴스 -> 해당 인스턴스에 퍼블릭 IPv4 주소이다.
- 브라우저에서 퍼블릭 IPv4 주소:5000으로 이동 시 4번에 작성한 HELLO SERVER출력된다.

10. Client 요청과 Server 응답 테스트

const express = require('express');
const cors = require('cors');
const app = express();

app.cors({
  origin: 'http://~', // 클라이언트에서 요청한 주소
  method: ['GET', 'POST', 'OPTIONS']
});

app.use('/', (req, res) => {
        res.send("HELLO SERVER");
}); // 5000번 포트로 접속하여 서버 연결 될 시

app.listen(5000, () => { console.log("server 5000"); });

Client에서 요청한 주소만 허용할 수 있도록 cors의 origin을 특정 주소로 지정한다.
cors를 통해 허용 할 method도 지정한다.
client와 server테스트
server 실행 시킨 후 client의 url로 접속하여 확인한다.
client에서는 click버튼을 클릭 시 alert로 success를 이벤트를 발생 시켰다.
server에서 요청을 받은 후, click이벤트가 실행된다.

설정

이전 포스트

[Git] Git Flow

다음 포스트