EC2 인스턴스 생성하기
터미널에서 EC2 인스턴스에 접속하기
웹 프로젝트 배포 하기
웹 프로젝트 배포 확인
리액트로 만든 웹페이지를 로컬 호스트 주소가 아닌 누구든 볼 수 있는 url로 변경하기 위해서는 배포라는 작업을 해야 합니다. aws로 배포하기 위해서는 크게 s3 방식과 EC2 방식이 있는데, 기존 회사들은 s3 방식보다 EC2 방식을 많이 사용하고 있어 알아두어야 했습니다. 정리한 글은 가장 기본적이고 무겁지 않은 React 코드로 테스트하였기 때문에 프로젝트별 설정해야 하는 값이 다를 수 있습니다.
✅ 인터페이스가 많이 변경되어 22.12.04 자로 내용을 업데이트 하였습니다.
EC2 인스턴스 생성하기
인스턴스 시작
aws에서 EC2를 검색한 후 EC2 대시보드에 위치한 인스턴스 시작을 누릅니다.
인스턴스 생성
1. 이름 및 태그
대표적으로 보일 이름을 입력해줍니다.
2. 애플리케이션 및 OS 이미지(Amazon Machine Image)
프리티어 사용이 가능한 AMI를 선택합니다. 저는 Ubuntu Server 22.04 LTS (HVM), SSD Volume Type을 선택하였습니다.
3. 인스턴스 유형
프리티어 사용이 가능한 t2.micro를 선택합니다.
4. 키 페어(로그인)
키 페어를 생성하게 되면 ~~.pem 형식으로 다운로드되며, 자동으로 선택됩니다.
5. 네트워크 설정
오른쪽에 있는 편집을 눌러 서브넷과 보안 그룹을 설정합니다.
서브넷
*인스턴스 유형별 가용 영역은 인스턴스 유형 탭의 네트워킹에서 확인할 수 있습니다.
보안 그룹 규칙
보안 그룹 규칙 설정은 추후 다른 사람들도 내 배포된 프로젝트에 접근할 수 있게 설정을 해주는 부분이므로 꼭 추가해주어야 하며 포트 범위를 8000,3000,80 등으로 기입하고 소스 유형을 위치 무관으로 선택하면 됩니다.
6. 스토리지 구성
기본값으로 설정하였습니다.
7. 인스턴스 시작
생성된 인스턴스
터미널에서 EC2 인스턴스에 접속하기
EC2 인스턴스를 생성했으면 터미널을 사용해 인스턴스에 접속을 해줍니다. (MAC 기준)
1. aws_pem 폴더를 하나 생성하여 인스턴스 생성 시에 다운로드한 pem 파일을 넣어줍니다.
2. 생성한 public IPv4 주소를 복사합니다.
3. 터미널을 실행하여 aws_pem 폴더로 진입 후 아래의 명령어를 실행합니다.
sudo chmod 400 library.pem
// 비밀번호 입력
ssh -i library.pem ubuntu@public IPv4 주소
// yes 입력💡 ssh -i ~ 명령어를 쳤을 때, timeout 되는 경우가 종종 있는데 큰 문제가 아니라면 인스턴스 상태가 running 되어있는 부분을 오른쪽 클릭하여 재부팅해주면 해결됩니다.
인스턴스에 접속된 모습
웹 프로젝트 배포 하기
1. node 설치
가상 서버에는 아무것도 설치되어있지 않기 때문에 배포를 할 수 있는 환경 또한 만들어 주어야 합니다.
curl -sL https://deb.nodesource.com/setup_14.x | sudo bash -
sudo apt install nodejs
sudo apt-get update
sudo apt-get install nodejs
2. 설치 버전 확인
node -v
npm -v
3. 프로젝트 clone 및 npm install
git clone 프로젝트_repo_주소
cd 클론받은_프로젝트_폴더
npm install
💡 private 프로젝트의 레포를 클론 받을 때에는 username과 password를 요구하는데 이때 자신의 git name과 ssh토큰을 입력해줍니다.
4. 프로젝트 빌드
현재 깃에 올라가져 있는 master의 최신 버전을 빌드하면, 프로젝트 폴더 내의 build 폴더가 생성이 되며 빌드된 데이터들이 담기게 됩니다.
npm run build
💡 Creating an optimized production build... 에서 빌드가 되지 않을 때 🤦🏻♀️
t2.micro 사양의 램이 1GB 밖에 되지 않아 메모리 부족으로 빌드가 안 되는 경우가 발생하는데, 아래의 글을 참고하여 임시방편으로 해결해 줄 수 있습니다.
https://progdev.tistory.com/26
5. express 설치
npm install express --save
6. server code 생성해주기 (server.js)
vi server.jsserver.js를 생성한 후 아래의 코드를 편집기에 붙여 넣어줍니다.
✅ vi file 단축키
편집: i (insert) / 저장하고 나가기: wq
const http = require("http");
const express = require("express");
const path = require("path");
const app = express();
const port = 8000; //인스턴스 생성시 만들었던 포트번호 기입
app.get("/ping", (req, res) => {
res.send("pong");
});
app.use(express.static(path.join(__dirname, "build")));
app.get("/*", (req, res) => {
res.set({
"Cache-Control": "no-cache, no-store, must-revalidate",
Pragma: "no-cache",
Date: Date.now()
});
res.sendFile(path.join(__dirname, "build", "index.html"));
});
http.createServer(app).listen(port, () => {
console.log(`app listening at ${port}`);
});
7. 서버 실행하기
node server.js
💡 서버 상시 켜 두기
node server.js &웹 프로젝트 배포 확인
생성한 인스턴스의퍼블릭 IP주소:포트번호를 입력해주면 bulid된 내 Front 프로젝트가 보이게 됩니다.
