(11) 블로그 만들기 - AWS S3(1)

이미지를 s3를 이용해 저장하기 전에 에디터를 좀 수정해보겠다.

 

에디터를 사용할 때 몇가지 고칠게 있다.

1. 자동줄바꿈 문제

2. 수정하기를 할때 에디터 미적용

 

1. 자동줄바꿈 문제부터 해결해보겠다.

 

출력할 데이터가 들어가는 div (Content) 에 word-wrap: break-word 속성을 주어 줄바꿈 문제를 해결했다.

 

 

2. 수정할때 에디터 미적용

수정 페이지에도 커스텀한 quill 모듈을 사용해 데이터를 넣어주면 될거같다.

 

근데 기존에 작성한 quill 파일에서는 글쓰는걸 목적으로 만들었기 때문에 여러 설정값이 만드는거로 설정되어있었다.

그래서 url을 이용한 조건문으로 제어를 해보려고한다.

 

글쓸 때는 /create 수정할 때는 /update 로 시작된다.

 

이런식으로 써서 했다. 제대로 된 방식인지는 모르겠지만 잘 작동된다.

 

이제 AWS S3 를 공부해보자

 

그전에 먼저 배포먼저 해보자 (나의 마음은 갈대와 같지)

 

근데 서버가 죽어있었다. ec2를 재시작하니 public ip 가 다른걸로 설정 돼 있어서 xshell 에서 세션을 새로 만들어서 연결했다. 

 

 

ec2 때문에 스트레스가 쌓인다...

 

일단 정상 배포 되었으니

 

이제 s3 를 사용해 보자

 

AWS S3 란 AWS 에서 제공하는 인터넷 스토리지 서비스 이다.

 

근데 s3 를 왜 사용하는걸까

 

용량때문이겠지?

 

일단 필요한 모듈을 설치하자

 

aws-sdk 란 aws 를 프로그래밍적으로 제어하기 위해서 aws 측에서 미리 만들어 놓은 도구들의 집합체이다.

설치가 완료되면 s3 버킷에 접근하기 위해 config 폴더에 파일을 만들어 IAM 키를 입력해야한다.

 

IAM 이란 Identity and Access Management 의 약자로 AWS 리소으에 대한 액세를 안전하게 제어할 수 있는 웹 서비스이다.

 

config폴더에 s3.json 파일을 만들어 accesskey 와 secretaccesskey, 리젼을 입력해줬다.

 

그다음 app.js 파일에서 aws sdk를 로딩해준다.

 

s3 에 이제 aws의 s3 객체가 들어가졌다.

 

이젠 asw s3에 업로드를 도와주는 multer-s3 모듈을 설치해주자.

*multer-s3 을 사용하기 위핸 multer 모듈을 설치 해야합니다. 전이미 설치해놨었습니다.

 

그다음 사용자가 보낸 이미지를 s3에 업로드하기 위해 코딩해놓은 multer 함수를 바꾸겠습니다.

 

그전에 s3 를 만들어야합니다.

 

만들었습니다.

 

어떤 분의 코드를 참고해서 작성했습니다.

 

이제 파일을 올리면 s3에 올라가야하는데...한번 확인해보겠습니다.

 

안됩니다.

 

다음 글에서 다시 해보겠습니다.