16강 미니 프로젝트(사진 공유 웹사이트)_1 (AWS)

📌 개념 정리

사진 공유 웹사이트의 AWS 기반 인프라 구성에 대한 실습입니다. 주요 AWS 서비스인 EC2, S3, CloudFront, 로드 밸런서를 이용하여 사진 업로드와 조회를 빠르고 안정적으로 수행하는 환경을 구축합니다.

---

🚦 동작 원리 및 구조

1. 사용자가 EC2 인스턴스를 통해 사진을 업로드합니다.
2. 업로드된 사진은 S3에 저장됩니다.
3. 저장된 사진을 브라우저에서 볼 때는 CDN 서비스인 CloudFront를 통해 빠르게 전송됩니다.
4. 웹사이트 트래픽 분산을 위해 로드 밸런서(ALB)를 사용하여 부하를 골고루 나눕니다.
5. (선택적) 트래픽 변화에 따라 자동 확장할 수 있는 오토 스케일링을 추가할 수 있습니다.

---

💻 코드 예시 및 흐름 분석

✅ EC2 인스턴스 생성 및 SSH 접속

• AWS EC2 콘솔 → 인스턴스 시작 → 우분투 24.04 LTS → T2.micro 선택
• 키 페어 설정 및 보안 그룹 SSH 허용 (포트 22)
• SSH 접속:
• ssh -i [키페어 경로] ubuntu@[퍼블릭 IP]

✅ Node.js 및 Express 설치

sudo apt-get install -y curl
curl -fsSL https://deb.nodesource.com/setup_current.x | sudo -E bash -
sudo apt-get install -y nodejs

설치 확인:

node --version
npm --version

Express 설치 및 프로젝트 생성:

sudo mkdir /home/project
sudo chown ubuntu:ubuntu /home/project
cd /home/project
npm init -y
npm install express

✅ 웹 서버 테스트 (Hello World)

• index.js 파일 생성 (vim 사용):

const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => res.send('Hello World!'));
app.listen(port, () => console.log(`Example app listening on port ${port}`));

서버 실행:

node index.js

브라우저에서 확인:

http://[퍼블릭 IP]:3000

✅ 보안 그룹에서 포트(3000) 개방

• AWS EC2 인스턴스의 보안 탭 → 인바운드 규칙 편집 → TCP 포트 3000 개방

---

🧪 실전 사례

실제 사진 공유 서비스 구축 시, 업로드 속도 향상과 글로벌 빠른 로딩을 위해 EC2+S3+CloudFront 구조를 사용합니다. 트래픽 부하 대응은 로드 밸런서와 오토 스케일링을 활용해 확장성을 높입니다.

 

실습 코드 자료 링크

 

https://github.com/soaple/first-met-aws-image-gallery

프로젝트 참고 코드

https://github.com/nodesource/distributions?tab=readme-ov-file#debian-and-ubuntu-based-distributions

node 설치

https://expressjs.com/en/starter/installing.html

express 설치

https://expressjs.com/en/starter/hello-world.html
서버띄우는 예시

https://expressjs.com/en/starter/generator.html#express-application-generator
expree generator

https://github.com/soaple/first-met-aws-image-gallery/blob/master/app.js#L9
app.js 설정

https://getbootstrap.com/docs/5.3/getting-started/introduction/
boot strap

https://releases.jquery.com/
jQuery

https://github.com/blueimp/jQuery-File-Upload
blue imp

https://aws.amazon.com/ko/sdk-for-javascript/
AWS SDK for javaScript 링크

---

🧠 고급 팁 or 자주 하는 실수

• 보안 그룹에서 필요한 포트를 열어주는 것을 잊지 말기
• 프로젝트 폴더의 권한이 root인 경우 실행 시 에러 발생 → 항상 소유자를 현재 사용자(ubuntu)로 설정하기
• Node.js 설치 후 npm 버전도 반드시 확인
• 직접 인스턴스에서 개발보다는 로컬 개발 후 GitHub에서 배포하는 것이 일반적

---

✅ 마무리 요약 및 복습 포인트

✔ EC2 인스턴스 생성 및 SSH 접속 방법 ✔ Node.js, npm, Express 설치 및 기본 웹 서버 실행 ✔ 보안 그룹 포트 개방 방법 ✔ S3, CloudFront를 이용한 글로벌 서비스 구조 이해 ✔ 로드 밸런서 및 오토 스케일링의 필요성 파악