EC2 배포 과정으로 폴더와 노드 js 파일부터 생성하여 진행 할 예정이다.
mkdir practice-server-deploy // 프로젝트 폴더 생성
cd practice-server-deploy //해당 폴더 이동
code . // 해당 폴더 오픈
npm init
# express 설치
npm install express
# cors 설치
npm install cors
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
를 배포하는 과정이다.
$ git clone [해당 레파지토리 주소]
$ cd [해당 레파지토리 주소]
$ code .
- [코드작성] -
$ git add [변경된 파일 add]
$ git commit -m '커밋할 내용'
$ git push origin master
# 현재 디렉토리 기준
$ git init // 현재 디렉토리 기준으로 Git 저장소가 생성
$ ls -d .git // 디렉토리 내부에 .git 디렉토리가 생성되어있음
$ echo .env > .gitignore // .gitignore 생성
$ git add . // 디렉토리 내 모든 파일을 Git으로 관리되도록 추가
$ git commit -m '커밋할 내용' // 커밋 생성과 함께 메세지
$ git push origin master
인스턴스
-> 인스턴스 시작
-> 검토 및 시작
-> 시작하기
시작하기
클릭 시 임대한 컴퓨터에 접속하기 위해 key
를 받는다새 키 페어 생성
선택과 키 페어 이름
을 작성한 후 키 페어 다운로드
키 페어
는 다운로드
폴더에 있음.키 페어 이름
: practice-server-deploy인스턴스 시작
을 누르면 인스턴스
목록의 마지막 라인에 생성된 인스턴스
가 추가된다.인스턴스
가 많다면 각 인스턴스에 이름
을 지정한다.인스턴스
를 선택 -> 연결
-> SSH 클라이언트
SSH 클라이언트
에 작성되어 있는 글들은 인스턴스 접속
을 하는 방법으로 가장 중요하다.✅ SSH 클라이언트를 이용한 인스턴스 접속하기
[❗현재 디렉토리는.ssh
기준이다.~/.ssh$ [명령어]
]
.ssh
폴더에 생성한(다운로드) key를 옮긴다/
$ mv ~/다운로드/[키이름.pem] ./
.ssh
폴더가 없을 경우
root
디렉토리에서.ssh
폴더를 생성한다.
$ ~mkdir .ssh
SSH 클라이언트
에 있는chmod ~
로 시작하는 명령어를 입력한다.SSH 클라이언트
에 있는ssh -i "[키이름.pem]" ubuntu@~
로 시작하는 명령어를 입력한다.
- 해당
SSH 클라이언트
에 있는 명령어들을 복사하여 터미널에 붙여넣기 해도 된다.키이름
들은 내가 인스턴스에서 사용하기 위해 만들어놓은키이름
이다.
SSH 클라이언트
에 작성되어 있는 명령어 입력이 완료되면 해당 인스턴스
에 접속이 된다.인스턴스
는 새로운 서버
를 임대한 것이므로 서버 APP
이 작동될 수 있도록 환경세팅
을 해준다.[Environment Settings]
$ sudo apt update
$ sudo apt install nodejs
$ sudo apt install npm
$ 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
인스턴스
-> 인스턴스
선택 -> 보안
탭 -> 보안그룹
선택인바운드
-> 인바운드 규칙편집
유형
, 포트범위
, 소스
편집사용자지정 TCP
80
5000
번이므로 5000
을 쓰면 됨)포트
로 접속이 가능어느곳
에서나 접속 가능나의 IP
로만 접속 가능clone
했던 레파지토리
를 실행npm start
실행
시킨 후 해당 포트번호
로 이동포트번호
는 인스턴스
-> 해당 인스턴스
에 퍼블릭 IPv4 주소
이다.브라우저
에서 퍼블릭 IPv4 주소:5000
으로 이동 시 4번에 작성한 HELLO 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
이벤트가 실행된다.