[실습] 3. S3를 활용해 Express 서버에 이미지 업로드 기능 구현하기

author

JSCODE 박재성

✅ 1. EC2 인스턴스에서 Express 서버 clone하기

JSCODE-EDU • Updated Nov 15, 2023


$ git clone https://github.com/JSCODE-EDU/s3-express-sample.git
$ cd s3-express-sample
$ npm i

✅ 2. `.env` 파일 수정하기

내가 발급받은 액세스 키와 버킷명에 맞게 .env 파일을 수정하면 된다.

.env


AWS_ACCESS_KEY=____
AWS_SECRET_ACCESS_KEY=____
AWS_S3_BUCKET=____

주의) 개인의 .env 파일은 반드시 .gitignore에 추가해서 Github에 올라가지 않게 해야 합니다. (위 Github Repository는 편의상 .env를 Github에 올린 것 뿐입니다.)

✅ 3. S3에 파일 업로드가 잘 되는 지 확인하기

✅ 4. S3에 저장된 URL로 이미지 잘 조회되는 지 확인

방법 1) HTML에서 확인하기

index.html


<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <h1>이미지 테스트</h1>
  <img src="______"/>
</body>
</html>

방법 2) 주소창에 주소 쳐보기

author

✅ 1. EC2 인스턴스에서 Express 서버 clone하기

s3-express-sample

JSCODE-EDU • Updated Nov 15, 2023


$ git clone https://github.com/JSCODE-EDU/s3-express-sample.git
$ cd s3-express-sample
$ npm i

✅ 2. `.env` 파일 수정하기

내가 발급받은 액세스 키와 버킷명에 맞게 .env 파일을 수정하면 된다.

.env


AWS_ACCESS_KEY=____
AWS_SECRET_ACCESS_KEY=____
AWS_S3_BUCKET=____

✅ 3. S3에 파일 업로드가 잘 되는 지 확인하기

✅ 4. S3에 저장된 URL로 이미지 잘 조회되는 지 확인

방법 1) HTML에서 확인하기

index.html


<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <h1>이미지 테스트</h1>
  <img src="______"/>
</body>
</html>

방법 2) 주소창에 주소 쳐보기

✅ 1. EC2 인스턴스에서 Express 서버 clone하기

✅ 2. .env 파일 수정하기

✅ 3. S3에 파일 업로드가 잘 되는 지 확인하기

✅ 4. S3에 저장된 URL로 이미지 잘 조회되는 지 확인

✅ 1. EC2 인스턴스에서 Express 서버 clone하기

✅ 2. .env 파일 수정하기

✅ 3. S3에 파일 업로드가 잘 되는 지 확인하기

✅ 4. S3에 저장된 URL로 이미지 잘 조회되는 지 확인

✅ 2. `.env` 파일 수정하기

✅ 2. `.env` 파일 수정하기