Nagui.me
KimNagui
KimNagui
KimNagui
KimGwangHyeon

#FrontendDeveloper

[AWS] EB (Nodejs)를 Codepipeline으로 배포하기 (1) Codepipeline 생성과 설정

AWS Codepipeline 생성부터 AWS CodeBuild를 이용해서 빌드하고 AWS ElasticBeanstalk로 배포까지 과정을 설명해보겠다.

[AWS] S3 호스팅에 Cloudfront 연결

AWS로 운영하면서 cloudfront 연동을 별로 해본적이 없었다. 때문에 다시 개발할겸 가장 기본적인 s3 hosting에 cloudfront를 연동하기를 해볼겸 개인블로그에 cloudfront를 연동했다. 어찌어찌 연결만 해둔 상태이기때문에 이 포스트를 보시는 분들은 참고만 해주시길 바랍니다.

[Ckeditor5] NextJS + Ckeditor5 + S3 이미지 업로드하기

지난 포스트(nextjs + ckeditor5 custom build)에 이어 이번엔 ckeditor5 에서 이미지 업로드 구현을 포스팅한다. 기본적으로 아무 설정 안해도 ckeditor5 에서는 이미지가 base64 포맷으로 업로드된다. 하지만 이러면 데이터베이스상으로도 사용자 입장에서도 문제가 많기 때문에 별도의 파일스토리지로 이미지를 업로드하는게 일반적이다. ckeditor는 ckfinder나 easyimage 같은 유료서비스를 제공하고 이를 사용하면 아주 쉽게 이미지 업로드를 구현할 수 있지만 역시 그만큼 돈이 지불된다. 마침 AWS 를 쓰고 있으니 S3 에 이미지를 업로드하는 걸 테스트해보고자 한다. 1. AWS S3 + IAM 먼저 이미지가 저장될 AWS S3 버킷을 만들고, 아무나 접근은 가능하지만 업로드는 권한을 부여받은 IAM 유저만 가능하도록 설정해야한다. (1) AWS S3 버킷 생성 및 정책 설정 간단하게 이름지정하고 퍼블릭 엑세스 차단만 비활성화 시켜준다. 버킷 정책은 모든 사람들이 객체를 볼 수 있도록 한다. 여기서 중요한 것은 "Resource": "YOUR-BUCKET-ARN/*" 에서 뒷부분의 /* 을 잊지 말아야 한다. (2) AWS IAM 유저 생성 및 권한부여 아무나 이미지를 읽기는 가능하지만 아무나 업로드, 수정, 삭제 등 쓰기작업이 가능하게 해선 안된다. 때문에 별도의 IAM 유저를 만들어서 해당 유저에만 쓰기권한을 부여할 것이다. 엑세스 유형은 프로그래밍 방식 엑세스만 선택하고 다음으로 계속 넘기다가 "액세스 키 ID"와 "비밀 엑세스키"가 나올때 잘 복사하거나 csv를 다운로드 해둔다. 이제 IAM 유저는 생성이 되었으므로 이 유저에 연결할 정책을 만들어야 한다. JSON 형식으로 정책을 입력하고 정책의 이름을 입력해서 정책 생성을 완료한다. 그리고 이 정책을 사용자에 연결하면 AWS에서의 설정은 완료! 2. NextJS Express Server 이미지를 업로드할때 이미지 파일이 거쳐가게될 경로는 프론트 -> 서버 -> S3 가 될 것이다. 단순하게 본다면 프론트는 이미지 파일을 선택하고, 서버는 받은 이미지 파일을 S3의 어떤 버킷안의 어떤 디렉토리안에 어떤 파일명으로 업로드할 것인가 정하고 업로드 성공시 프론트로 S3의 이미지 URL을 응답하게 된다. 때문에 지난 시간에는 하지 않았던 서버구성이 필요하다. NextJS의 express 서버구성 예제(링크)를 보고 구성하면 된다. (1) express 서버 구성을 위한 패키지 설치 (2) 서버 구동을 위한 스크립트 설정 (3) express 서버 소스 3. NodeJS Image Upload (1) 이미지 업로드 기능을 만들기 위해 필요한 패키지 설치 (2) AWS S3로 이미지 업로드 기능 구현 4. Ckeditor5 컴포넌트 수정 (1) 이미지 업로드 플러그인 import & 업로드 URL 설정 Base64UploadAdapter 대신 SimpleUploadAdapter를 사용하고, 에디터 config에 simpleUpload를 추가한다. 5. 마무리 (1) 구동 이제 yarn dev 명령어로 실행시켜서 업로드해보면 AWS S3 Bucket에 정확히 업로드된 것을 확인할 수 있다. (2) 이미지 파일 관리 많은 WYSIWYG 에디터들이 이런 업로드 방식을 취하고 있고 Base64 방식에 비해 데이터베이스 관리 등이 수월하지만, 문제는 사용자가 에디터에 이미지를 업로드했다가 지웠다가 다시 업로드했다가 지웠다가 하는 등의 행동으로인해 실제로는 사용되지 않는 쓰레기 이미지들이 생성된다. 때문에 추가적인 파일관리 방안이 필요하다. 에디터의 내용을 등록할때 비동기로 이미지 주소 목록만 뽑아내서 목록 외의 파일은 삭제한다던가.. 에디터 내용을 수정(onChange)할때 이미지를 삭제하는 작업만 구분해서 삭제할 이미지 목록을 만들고 등록할때 삭제처리를 해준다던가.. 방안은 마련하기 나름인듯 하다.

[Ckeditor5] NextJS에서 Ckeditor5 커스텀빌드 사용하기

과거 react 프로젝트를 할때 ckeditor5 붙이는 작업을 했었는데 webpack 지원이 미완성일때라 에디터를 커스텀하려면 따로 저장소를 만들어서 빌드한 결과물을 사용해야 했었다. plugin 등을 수정할때마다 재빌드해서 업로드해야하는 수고스러움이 좀 컸었다. 그런데 최근 ckeditor5 를 다시 보니 webpack 지원이 잘되어서 조금만 설정하면 소스에서 실시간으로 수정작업을 할 수 있다고 해서 nextjs9 에 붙여봣다. 1. create-next-app 프로젝트 생성 create-next-app 을 이용해서 nextjs 프로젝트를 생성한다. 2. Ckeditor5 컴포넌트 만들기 일단 기본적인 classic editor 로 생성해보자. (1) 패키지 설치 (2) 컴포넌트 생성 (3) index에 붙이기 3. 기본 에디터 에러 처리하기 (1) css 이제 프로젝트를 실행해보면 아래와 같은 에러가 난다. css 파일을 못읽으니 webpack 설정을 해주자. @zeit/next-css 만 설치하면 next-images 가 없다고 에러남 (2) window is not defined css 에러를 해결하고나면 서버콘솔에서 window 객체 를 찾을 수 없다고 나오는데, nextjs는 기본적으로 ssr을 지원하는데 ckeditor5가 window 객체를 무조건 필요로 하기때문에 에러가 난다. 때문에 ckeditor는 client에서만 렌더링되도록 수정하자. 이제 실행하면 정상적으로 나온다. 4. 커스터마이징 하기 대부분의 사용자는 위의 에디터 기능으로는 부족함을 느낄 것이므로 다른 기능들을 추가해보자. (1) 패키지 설치 기본 classic 에디터에 있는 기능이라도 커스텀해야하기 때문에 모든 기능을 다 설치해주어야 한다. 공식 홈페이지에 각 기능에 대한 설명이 데모와 함께 잘 나와있다. (2) 에디터 수정 5. 커스텀 에디터 에러 처리하기 위에서 수정한데로 프로젝트를 실행하면 실행도 안되고, 빌드하면 아래와 같이 에러가 뜰 것이다. 이것도 결국 webpack 처리를 해줘야한다. 공식홈페이지 Advanced setup 방법 webpack 설정 공식홈페이지의 예제에서 보면 webpack 설정이 크게 3가지 처리를 해준다. 언어 svg css 그런데 nextjs 는 자체 webpack 처리를 해주고 있으므로 겹치지 않게 해주는게 중요했다. (1) 필요한 패키지를 설치 (2) 언어 변경 처리 (3) svg & css 처리 이부분이 위에서 말했던 nextjs 의 기본 webpack 설정과 충돌나면 안되는 부분이라 먼저 nextjs의 webpack 설정은 어떻게 되있나 보자. 프로젝트를 실행해보면 서버콘솔에 아래와 같이 나온다. 보면 역시 이미 svg와 css를 처리하는 부분이 들어가 있다. 이 부분을 피해서 필요한 설정을 넣자. 6. 완성 이제 실행해보면 아래와 같이 잘 나온다. 7. ckeditor5 아쉬운 점 오픈소스 중에 사용자도 많고 기능도 많고 5버전으로 업데이트되면서 UI도 깔끔하고 여러 프레임워크에 붙이기 쉬워졌지만, 4버전에 비해 좀 아쉬워진 점이 있다. “소스 보기 및 수정” 기능 없음. “색상코드” 지정할 수 없음. “이미지에 링크”를 걸 수 없음. 아직 미흡한 “한국어”.

[AWS] Elastic Beanstalk Error : None of the Instances are sending data

AWS EB 에 어플리케이션을 생성하고 test , staging , prod 환경을 구성한 후 local 에서 eb deploy 중 “None of the Instances are sending data” 라는 에러가 발생했다. eb deploy 를 실행했던 터미널에서는 Timeout Error 발생