운영중인 프로젝트에서 이미지 파일을 사용하는 경우가 많다. 웹 서버의 부하를 줄이고 이미지 로드 속도를 높이기 위해 회사 내부에서 CDN을 통해 정적파일을 관리하고 있다.
다만 개발경험 관점에서 크게 2가지 문제가 있었다.
위에서 얘기한것처럼 정적 이미지들은 CDN으로 관리하고 있다. 그렇기 때문에 정적 이미지를 피그마나 디자이너를 통해 받으면 개발자가 직접 S3에 업로드를 해야한다.
그럼 aws credentials를 받은 후 AWS에 로그인을 하고, S3에 접속해 적절한 디렉토리를 찾아 파일을 수동으로 업로드 해야하는 매우 비효율적인 과정이 있다.
사람이 직접 업로드 하다보니 아무리 컨벤션이 있다 한들 일관성이 없을수 밖에 없다.
비일관성 문제 안에서도 크게 2가지로 문제를 정리하면, 첫번째는 업로드하는 stage(e.g dev, qa, production)가 사람마다 다르다.
로컬 환경에서 개발을 시작할 때 어떤 사람은 바로 production에 업로드, 어떤 사람은 dev에 올리는 것처럼 업로드하는 state 환경이 일관적이지 않다.
두번째는 다른 버킷, 다른 path에 올리는 경우이다.
사내에서 여러개의 CDN을 운영중인데, 작업자마다 다른 버킷(도메인) 또는 path에 업로드를 하는 경우가 자주 발생한다.
컨벤션이 있긴 하지만 매번 컨벤션을 확인하는것도 힘들고, 수많은 버킷, path안에서 해당 프로젝트의 버킷을 기억하는것은 매우 비효율적이다.
이처럼 여러 방식이 혼재되어있고 신경쓰지 않아도 되는 문제에서 지속적으로 불편함이 발생하고 있는 상황이다.
S3에 직접 업로드를 하니 이미지의 버전관리가 되고있지 않다. 이로 인해 변경 이력을 추적하기 어려워 협업 과정에서 문제가 발생할 수 있다.
개선 목표는 개발자가 정적 이미지 업로드에 대해 전혀 신경을 쓰지 않고 로컬 개발이나 업로드를 쉽게 하는것이 목표이다.
기존에는 local에서 개발할때도 이미지를 S3에 업로드 해야만했다. 이 과정을 없애기 위해 local에서 Next.js에서 정적 파일을 제공하는 public 디렉토리를 통해 이미지에 접근하도록 수정했다.
이로 인해 불필요한 업로드 과정이 사라지고 이미지가 버전관리에 포함되는 2가지 장점을 얻을 수 있다.
S3에 올라가는 과정은 CI/CD에서 처리하도록 변경했다. public 디렉토리에 있는 모든 이미지들을 특정 S3 버킷과 path에 업로드한다.
이 과정에서 변경된 이미지만 S3에 업로드 할 수 있도록 s3 sync 명령어롤 사용했다.
IMAGE_ASSET_PREFIX: cdn.image.co.kr
- name: Upload assets to S3
run: aws s3 sync public s3://${{ env.IMAGE_ASSET_PREFIX }}/images/${{ env.PUBLIC_BUCKET_NAME }} --acl public-read
stage에 해당하는 path를 설정하기 위한 환경변수를 설정한다.
if (env === 'DEV') {
STATIC_ADDRESS = 'https://dev.cdn.image.com';
} else if (env === 'QA') {
STATIC_ADDRESS = 'https://qa.cdn.image.com';
} else if (env === 'PROD'){
STATIC_ADDRESS = 'https://cdn.image.com';
} else {
STATIC_ADDRESS = '';
}
import {STATIC_ADDRESS} from "@/env"
<img src={`${STATIC_ADDRESS}/images/test-img.jpg`} alt="" />
이전부터 정적 파일 관리 방식에 대한 개선이 필요하다고 생각했고, 개선 작업의 주요 목표는 정적 이미지를 따로 업로드 하지 않는 비효율을 없애는 것이였다.
기존 방식은 운영 기준이 명확하지 않아 개발할 때마다 달라지고, 개인의 기억과 습관에 의존해야 했기 때문에 실수가 발생할 가능성이 높았지만 이번 개선으로 인해 상대적으로 비효율이 줄었다.