[ReTool] 환경 분리 후, S3 연동하여 이미지 여러개 업로드하기
어드민툴로 리툴이 확정되어, 어드민을 담당하며 환경 분리 및 s3 연결을 시도했던 것을 정리해봤습니다.
업로드된 uri를 저장하는 과정에서 환경별로 다른 버킷명을 설정하지 않아서 상용에 개발환경의 주소의 이미지가 올라가기도 하고,
이미지 여러개를 업로드하고, 테이블 형식으로 보여주고, 그것의 순서를 변경하고, 그에 따른 uri를 api 호출 시 전달하는 등 클라이언트에서 state 관리를 하는 것을 경험할 수 있었습니다. 러닝커브는 조금 있지만, 직접 구성한 로직을 클라이언트에 반영하는 것은 백엔드, 클라이언트 연동에 있어서는 확실한 장점이 있었습니다.
이번 글을 시작으로 공유할 것들이 생기면 간헐적으로 글을 작성해보도록 하겠습니다.
환경 분리 및 환경변수 설정
리툴 우측 상단의 사용자 아이콘을 누르면 Settings 옵션이 보인다. 여기서 Configuration 하위에 Environment에서 새로운 환경을 생성하면 된다. 환경변수는 Configuration variables 에서 생성을 한다. 사용방법은 Resource에서는 {{ environment.variables.NAME }}, 앱과 워크플로우에서는 {{ retoolContext.configVars.NAME }} 형식으로 사용한다.
S3 리소스 연결하기
리소스 쿼리를 새롭게 생성하고, 리소스 연결에서 S3를 선택한다. 필수인 항목들을 입력해주면 연결이 완료된다. 우측 상단에 테스트 커넥션을 눌러서 연결을 확인할 수 있다. 이때, 주의할 점은 환경을 분리했다면 환경별로 연결 세부사항을 세팅해줘야 한다는 것이다.
- 필수항목
- 서비스 이름
- 커넥터 버전
- 리전
- 엑세스키 아이디
- 시크릿키 아이디
fileInput으로 이미지 1개 업로드하기
쿼리를 새로 만들어서 리소스를 이전 단계에서 생성한 서비스 이름에 연결한다. Action type을 Upload data로 설정한다.
- Bucket name - S3를 연결할 때 버킷을 설정했다면 쿼리에서는 빈칸으로 두어도 무방하다.
- S3 Content-Type - 업로드한 이미지의 타입을 불러올 것이므로 Use custom value를 설정해준다.
- Upload file name - 특정 폴더에 저장하고 싶다면 경로를 설정해주면 좋다.
- Upload data - 업로드한 이미지의 base64Data를 지정해준다.
fileInput 컴포넌트로 1개의 파일만 업로드하는 것으로 제한을 설정한 경우, 파일이 1개로 고정되므로 Bracket Notation([0])으로 첫번째 요소을 명시한다.
fileInput으로 이미지 여러개 업로드하기
여러개를 접근하는 경우는 대괄호에 0대신 i를 적어주면 된다. 다만, 별도의 자바스크립트 쿼리를 작성하고 fileInput에 파일을 업로드했을 때 해당 쿼리가 트리거되도록 설정해줘야 한다.
S3 리소스와 연결되어 이미지를 업로드하는 쿼리를 uploadImageToS3로 작성했다고 가정한다. 해당 함수를 트리거하고, uploadImageToS3에서 변수로 설정한 i에 값을 전달하기 위해 {additionalScope: {i: i}}를 설정한다. 업로드한 이미지를 순서대로 저장해야 한다면 async/await와 for 반복문을 통해 저장할 수 있다.
async function uploadImage(){
const uploadedImageUriList = []
for(let i = 0; i< fileInput_multi.value.length;i++){
const result = await uploadlmageToS3.trigger({
additionalScope: {i: i}
})
uploadedImageUriList.push(`${var_s3_base_uri.value}${result.fileName}`)
}
var_image_uri.setValue(uploadedImageUriList)
}
uploadImage()