[next.js] 네이버 CDN 서버를 활용한 Markdown 이미지 첨부(2)

CDN 서버

지난 포스트 내용을 간단히 복습해보자면 안전한 HTTP 통신을 위해 이미지 파일을 base64 형태로 인코딩, 서버단에서 CDN 서버에 업로드 하는것이 이상적입니다.

CDN 서버는 다음과 같은 특성을 가지고 있습니다.

• 분산서버 : 전 세계 각지에 서버를 분산시켜 사용자의 요청으로부터 가장 가까운 지역(region)으로부터 데이터를 선제적으로 요청하여 빠른 응답속도를 보입니다. 트래픽이 분산되기 때문에 로드 밸런싱 수행에도 이점이 있습니다.

• 캐싱 : 이미지, 영상과 같은 정적 데이터의 경우 해당 데이터를 캐싱하여 마찬가지로 빠른 응답속도를 보입니다.

• 보안 및 안정성 : 아무래도 WAS와는 별도로 두기도 하고 분산 시스템이기 때문에 하나의 서버가 다운되더라도 문제없이 기능을 수행할 수 있습니다.

이렇듯 CDN 서버를 활용하면 사용자에게 더 나은 경험을 제공할 수 있습니다. 그렇다면 이제 본격적으로 CDN 서버를 실전에서 활용해볼 시간입니다.

github issues

만약 여러분이 별도의 CDN 서버를 운영하기 싫고 보다 간편한 이용을 바란다면 CDN 서비스를 간접적으로 지원하는 타사의 서비스를 활용할 수 있습니다.

github, notion 등 markDown을 지원하는 서비스는 많으며 거의 대부분의 서비스에서 이미지 업로드를 위한 CDN 서버를 운영하고 있으므로 첨부할 이미지가 많지 않다면 타사의 서비스를 이용하는것도 방법입니다.

방법은 간단합니다. 본인의 아무 레포지나 들어가서 상단의 issues 탭에 진입, new issue 버튼을 클릭합니다.

그러면 issue 를 등록하는 페이지로 진입하게 되는데 업로드 하고자 하는 이미지를 작성란에 드래그 앤 드롭 하기만 하면 github의 CDN 서버에 이미지가 업로드 되어 md파일에서 사용할 수 있게끔 파싱되어 작성란에 나타납니다.

실제로 위의 이미지는 github의 issue에서 업로드한 이미지입니다. 결과값을 그대로 복사하여 붙여넣으면 이미지가 보이게 됩니다.

직접 CDN서버 부설

직접 CDN 서버를 부설하는 방법이 있습니다. 보통 ngnix + AWS EC2 조합을 많이 활용하곤 합니다.

생각보다 어렵지 않고 명확한 설계를 모르더라도 자료를 보고 따라하기만 하면 금방 만들 수 있습니다. 하지만 역시 통상적인 서비스업체보다 퍼포먼스가 떨어지는건 어쩔 수 없습니다.

때문에 저는 서비스업체를 이용할 것입니다. 혹여나 직접 만들어보고 싶으신 분은 >>해당 링크<< 를 참고해주세요.

CDN 서비스업체 이용

대부분 CDN 서버를 구축한다고 하면 CloudFlare + AWS S3의 조합을 사용하곤 합니다. 하지만 저는 naver cloud CDN+ 서비스를 이용합니다.

S3야 그렇다 치고 갑자기 왠 naver냐 싶겠지만 naver cloud CDN+ 서비스를 사용하는 이유는 다음과 같습니다.

• 메인 region : 국내기업인 만큼 메인 region을 서울(Seoul)로 두고 있습니다. 아니 그런데 CloudFlare도 서울 리전 사용 가능한데요...? 싶겠지만

• 가격 : CloudFlare보다 훨씬 싸게 서비스를 이용할 수 있습니다. CloudFlare는 기본 구독료 + @ 이지만 naver cloud CDN+는 기본 구독료 없이 요청 건당 가격을 책정합니다. 요청량이 적다면 naver cloud CDN+가 훨씬 쌉니다.(ㅠㅠ)

naver cloud CDN+(이하 naverCDN) 또한 AWS S3 버킷과의 연동을 권장하고 있기에 S3 버킷을 저장소로 사용하기로 합니다.

네이버 클라우드 플랫폼

우선 네이버 클라우드 플랫폼 계정이 있어야겠죠. 아마 대부분 소셜 로그인 등을 이유로 네이버 디벨로퍼 센터는 이용해보셨을텐데 네이버 클라우드 플랫폼은 별도의 서비스이기 때문에 회원가입을 진행하셔야 될겁니다.

네이버 계정이 있다면 손쉽게 가입할 수 있고 그렇지 않더라도 회원가입 절차는 간단한 편이니 넘어가도록 하겠습니다.

네이버 클라우드 플랫폼 또한 디벨로퍼 센터와 마찬가지로 API 인증키가 필요합니다.

[마이페이지] > [계정 관리] > [인증키 관리] 탭에서 API 인증키를 생성해줍시다.

API 인증키 생성이 끝났다면 우측 상단의 콘솔 버튼을 클릭해 네이버 클라우드 콘솔창으로 이동해줍니다. 여기서 좌측의 Services를 클릭, Object Storage를 검색해 해당 상품을 신청합니다.

Object Storage란 네이버 클라우드 플랫폼에서 제공하는 저장소입니다. S3 버킷을 생각하시면 편하겠네요. 네이버의 CDN+ 서버가 Object Storage를 참조해 파일을 업로드 하면 즉시 CDN 엔드포인트를 생성하는 구조입니다.

Object Storage가 그 자체로 저장소 기능을 수행하기 때문에 앞에서 소개드린 AWS S3 버킷은 굳이 사용하지 않으셔도 됩니다. 네이버 클라우드 콘솔의 웹환경에서 이미지 업로드, 삭제 등이 가능하기 때문입니다.

하지만 만약 본인이 JS-SDK를 이용해 홈페이지에서. 또는 콘솔을 통해 원격으로 이미지를 업로드 하고 싶다면 AWS S3 버킷 또한 사용하셔야 합니다. 방법은 추후에 설명드리도록 하겠습니다.

Object Storage에서 파일과 폴더를 저장하는 상위 단위인 버킷을 생성합니다. 저는 이미 choco-image라는 버킷이 존재하네요.

이때 반드시 버킷의 권한을 공개로 설정하셔야 합니다.

다음은 CDN+ 상품을 신청할 차례입니다.

Object Storage와 마찬가지로 Services 탭에서 CDN을 검색, CDN 신청 버튼을 클릭합니다.

CDN 서버의 이름을 입력하고 서비스 프로토콜을 HTTPS로 설정합니다. 본인의 사이트가 HTTPS가 아니더라도 Object Storage와 연동하기 위해 HTTPS로 설정합니다.

원본위치는 Object Storage를 선택, 이전 단계에서 생성한 버킷을 선택합니다.

캐싱 설정 단계입니다. 캐싱률을 높이기 위해 캐싱 설정에서 Ignore Query String(쿼리스트링 무시), Remove Vary Header 설정을 적용하는 것이 좋습니다.

서비스 신청이 끝난 후 CDN 상태가 운영 중으로 바뀐다면 정상적으로 서비스가 작동중인 겁니다. 서비스 도메인에 해당하는 url을 엔드포인트로 파일구조 형식으로 url을 사용하면 됩니다.

          

            

          

            
1
            
`https://${서비스 도메인}/thumbnail/JS_dataStructure.webp`
          
        
          
        

AWS S3와 Object Storage 연동

앞서 말씀드렸듯 Object Storage는 AWS S3와 연동이 가능하고 S3의 Javascript SDK를 이용해 api 요청으로 Object Storage를 제어할 수 있습니다.

저희는 S3 브라우저를 이용해 쉽고 빠르게 연동해보도록 하겠습니다.

우선 아래 링크에서 S3 브라우저를 다운로드 합니다.

https://s3browser.com/

설치가 끝나셨다면 브라우저를 실행하시고 Add New Account > Account Type > S3 Compatitable Stoage 를 선택합니다.

선택하셨다면 아래 사진과 같은 창이 나타납니다. 여기서 Rest Endpoint, Access Key ID, Secret Access Key 총 3가지의 정보를 입력해야 합니다.

여기서 3가지 정보는 다음과 같습니다.

• REST Endpoint: kr.object.ncloudstorage.com

• Access Key ID & Secret Access Key : 네이버 클라우드 플랫폼의 마이페이지 > 계정관리 > 인증키 관리 메뉴에서 확인.

위 3가지 정보를 입력하고 다음 단계로 넘어가면 S3 브라우저와 Object Storage가 연동된 것을 확인할 수 있습니다.

S3 브라우저에서 이미지를 추가/삭제 하셔도 관계없지만 기왕 S3와 연동까지 했으니 S3 Javascript SDK를 이용해 블로그 화면에서 직접 이미지를 첨부하는것을 목표로 삼아봅시다.

자세한 내용은 다음 포스트에서 알아보도록 하겠습니다.

참고자료 : https://blog.naver.com/n_cloudplatform/222077298481