thumbnail
16_2. S3에 이미지 올리기
node_study2
2023.02.23.

16_2. S3에 이미지 올리기

16_2_1. 사용자가 이미지를 올리면 아래 과정을 거침

// routes/post.js
// ...

// POST /post/img
router.post('/img', isLoggedIn, upload.single('img'), afterUploadImage);

// ...
// controllers/post.js
// ...

exports.afterUploadImage = (req, res) => {
    console.log(req.file);
    // req.file.location <- s3에 올라가진 경로
    res.json({ url: req.file.location });
};

// ...
<!-- views/main.html -->
<!-- // ... -->
<div class="twit-img"><img src="{{twit.img}}" alt="섬네일"></div>
<!-- // ... -->
  • S3에 업로드된 이미지 경로가 위 twit.img로 들어옴
    • 이전 시간에 multer에서 multer-s3로 바꿈
    • 이 수정 내역을 깃에 커밋 및 푸시하고
    • AWS LightSail 서버에서 git pull받으면 됨
      • 지난번에 .env 파일을 직접 수정해서 git pull 에러가 뜰 것이다.
      • 그런 경우엔 git reset --hard로 아예 돌리고 다시 git pull
      • 그리고 다시 .env 파일 셋팅
        • 사실 귀찮으니 .env도 깃에 올려서 관리할까도 싶지만…
        • 그래도 .env는 올려놓으면 안됨! LightSail 서버에서 직접 만드는게 보안에 더 좋음!

16_2_2. 수정사항을 깃에 올리면 AWS LightSail 서버에서 pull 을 받고..

git pull

20230223 102310 20230223 102326

16_2_3. npm i 로 패키지 재설치

> sudo npm i

20230223 102519

16_2_4. 서버가 실행중이라면 재실행 (sudo npx pm2 reload all) 그게 아니면 실행 (sudo npm start && sudo npx pm2 monit)

# 서버 재실행 명령어
> sudo npx pm2 reload all

# 서버 실행 및 모니터링 명령어
> sudo npm start && sudo npx pm2 monit

20230223 102943 20230223 102953

16_2_4_1. MySQL DB 접속 오류가 난다면

# mysql 실행 
#   - mysql 또는 mongoDB 사용할 때, 다 똑같음. 이것들이 실행되고 있어야 DB 접속 가능. 
#   - 보통 mysql 은 PC 실행시 mysql을 실행함. mongoDB는 안그래서 따로 자동실행 설정해주거나 실행해주고 접속하거나 해야됨
sudo service mysql start

16_2_5. 회원가입

20230223 113855

  • 이미지 업로드 안되는 문제 다시 확인해봐야됨

16_2_5_1. 이미지 업로드 안되는 문제 - S3 버킷명 에러 수정

16_2_5_2. Redis 접근거부 문제

server > Warning: connect.session() MemoryStore is not                                                             
server > designed for a production environment, as it will leak                                                     
server > memory, and will not scale past a single process.   
  • 위와 같은 경고문구 발생

16_2_5_3. 수정

20230223 135342 20230223 135344

  • 수정완료

16_2_6. 게시글 업로드 테스트 (이미지도 같이)

20230223 135444 20230223 135450 20230223 135456

  • 게시글 등록하려고 ‘짹짹’ 버튼 누르고 게시글 등록(post) 처리 한참 기다림.. (왜이렇게 느리지?)

20230223 135524 20230223 135554 20230223 135559 20230223 135610

  • 그리고 이미지 저장하고 페이지 리다이렉트(메인페이지로 /)해서 모든 게시글 다 불러오는 post 요청 처리 너무 오래걸림

20230223 135739

  • 일단 작동은 함

16_2_7. 이미지 경로 확인

20230223 154552

  • 위에 보면 이미지 경로가 S3 경로로 되어있다.

20230223 154700

  • 위 경로를 주소창에 입력하면 따로 이미지가 다운로드된다.
    이렇게되면 S3에 이미지가 성공적으로 업로드된 것이다.

16_2_8. 실제로 S3에 들어가서 확인해보기

20230223 154943 20230223 155008 20230223 155013 20230223 155020

  • 위와 같이 이미지가 업로드된 것을 볼 수 있다.

16_2_7. 카카오톡 로그인 이슈

20230223 113527

  • 로컬에선 됐지만, AWS 서버에 배포하고나서 안돼는 이유
    • 카카오 로그인 설정할 때, localhost:포트로 도메인 설정했었던거 같은데.. 그거 때문에 이슈 발생하는듯?

20230223 155151 20230223 155212

즉, 위 IP를 등록해야되는데, 이 IP로도 등록이 되는지는 확인해봐야된다.

20230223 155336 20230223 155351 20230223 155426 20230223 155733 20230223 155742 20230223 155747 20230223 155821 20230223 155824


20230223 160539

  • IP로 등록하는 것도 된다.
Thank You for Visiting My Blog, Have a Good Day 😆
© 2022 Developer hyungju-lee, Powered By Gatsby.