다음은 이 글의 동영상 강의 입니다.

https://youtu.be/g5LaZ1IPJXE

지난시간에 S3에 업로드가 완료된 파일을 이용해서 Backend API를 이용해 DB에 데이터를 저장하는 것을 진행합니다.

S3 파일명 유니크 하게 만들기

frontend 프로젝트에 moment 라는 패키지를 설치합니다.

yarn add moment

moment는 자바스크립트에서 날짜를 핸들링할때 유용한 패키지입니다.

vue에서 moment를 import 합니다.

/admin/index.vue

import moment from 'moment';

다음과 같이 현재 날짜와 시간을 문자열로 만들어주는 function을 methods: 아래에 추가합니다.

genDateTime() {
    return moment().format('YYYYMMDDHHmmss');
},

S3 파일 업로드 모듈을 다음과 같이 변경합니다.

await s3.upload({
    ACL: 'public-read',
    Body: this.genDateTime()+'_'+this.file1,
    Key: this.genDateTime()+'_'+this.file1.name
}

파일을 업로드 하면 다음과 같이 파일명이 생성됩니다.

Slider 테이블 생성

우선 MySQL Workbench를 이용해서 테이블을 생성합니다.

id: key값

image_url: S3의 url 정보

created_at: 생성일

updated_at: 수정일

Slider 저장용 Backend API 개발

slider-api 프로젝트에서 entity 파일을 다음과 같이 만듭니다.

/domain/slider.entity.ts

import {Column, Entity, PrimaryGeneratedColumn} from "typeorm";

@Entity('slider')
export class Slider {
    @PrimaryGeneratedColumn({type: 'int', name: 'id'})
    id: number;

    @Column('varchar', {name: 'image_url', length: 200})
    imageUrl: string;

    @Column('timestamp', {
        name: 'created_at',
        default: ()=> 'CURRENT_TIMESTAMP'
    })
    createAt: Date;

    @Column('timestamp', {
        name: 'updated_at',
        default: ()=> 'CURRENT_TIMESTAMP'
    })
    updatedAt: Date;
}

nest generator를 이용해서

slider module, controller, service를 추가합니다.

nest g module slider
nest g controller slider
nest g service slider

SliderModule에 entity를 추가합니다.

/slider/slider.module.ts

@Module({
  imports: [
    TypeOrmModule.forFeature([Slider])
  ],
  controllers: [SliderController],
  providers: [SliderService]
})

Controller에 slider api를 post로 추가합니다.

/slider/slider.controller.ts

import {BadRequestException, Body, Controller, Post, Response} from '@nestjs/common';
import {SliderService} from "./slider.service";

@Controller('slider')
export class SliderController {
    constructor(
        private sliderService: SliderService
    ) {}

    @Post('')
    async createSlider(
        @Body() createSliderDTO, @Response() res
    ): Promise<any>{
        const { imageUrl } = createSliderDTO.body;
        if(!imageUrl) throw new BadRequestException();
        await this.sliderService.createSlider({imageUrl});
        res.status(200).json({'message': 'OK'});
        return;
    }
}

Service에 createSlider method를 추가합니다.

/slider/slider.service.ts

import { Injectable } from '@nestjs/common';
import {InjectRepository} from "@nestjs/typeorm";
import {Slider} from "../domain/slider.entity";
import {Repository} from "typeorm";

@Injectable()
export class SliderService {
    constructor(
        @InjectRepository(Slider)
        private sliderRepository: Repository<Slider>
    ) {}
    async createSlider(param: { imageUrl: any }): Promise<any> {
        const {imageUrl} = param;
        await this.sliderRepository.save({imageUrl});
    }
}

Frontend 에서 slider API 호출하기

slider-front 프로젝트에서 s3 upload 후에 backend api를 호출하도록 소스를 변경합니다.

async saveImage(imageUrl){
    const headers = {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${this.accessToken}`
    }
    const body = {
        'imageUrl': imageUrl
    }
    await this.$axios.post(
        '/slider',
        {body},
        {headers}
    ).catch(error =>{
        console.log(error);
    })

},
async upload() {
    if(!this.file1){
        alert('File을 선택해주세요!')
    }else{
        console.log(this.file1);
        AWS.config.region = this.bucketRegion;
        AWS.config.credentials = new AWS.CognitoIdentityCredentials({
            IdentityPoolId: this.identityPoolId,
        });
        const s3 = new AWS.S3({
            apiVersion: '2006-03-01',
            params: {
                Bucket: this.bucketName+'/images'
            }
        });
        await s3.upload({
            ACL: 'public-read',
            Body: this.genDateTime()+'_'+this.file1,
            Key: this.genDateTime()+'_'+this.file1.name
        }, (error)=>{
            if(error){
                this.errorHandler(error);
            }
        }).promise().then((data)=>{
            console.log('File uploaded!!!')
            console.log(data);
            this.saveImage(data.Location);
        })
    }
}

파일 업로드 테스트를 합니다.

DB에 다음과 같이 데이터가 들어간것을 볼 수 있습니다.

이렇게 해서 S3 업로드 파일을 Backend API를 통해 DB에 저장하는 기능을 구현해 보았습니다.

Frontend에서 S3 버킷에 파일을 업로드 하는 것을 알아보겠습니다.

다음은 이 글의 동영상 강좌입니다.

https://youtu.be/7FsycVjRq8Q

slider-front 프로젝트를 열고 admin 페이지를 생성합니다.

내용은 index.vue를 복사하여 만듭니다.

/pages/admin/index.vue

<template>
  <div>
    <div>관리자 페이지</div>
  </div>
</template>
<script>
export default {
  name: 'IndexPage',
  computed: {
    accessToken() {
      return this.$store.state.accessToken
    }
  }
}
</script>

관리자 메뉴 링크 클릭시 위 페이지로 이동하도록 아래와 같이 변경합니다.

/layouts/default.vue

async admin() {
  await this.$router.replace('/admin/');
}

관리자 메뉴의 링크가 잘 작동하는지 테스트를 합니다.

dotenv와 aws-sdk 패키지를 추가합니다.

yarn add @nuxtjs/dotenv dotenv aws-sdk

aws 설정을 위해 plugins 폴더를 추가하고 env-var.js 파일을 아래와 같이 추가합니다.

export default ({
    app, context
}, inject) => {
    const env = {}
    env.S3_BUCKET = 'codegear-slider-bucket'; //버킷명 입력
    env.S3_REGION = 'ap-northeast-2'; //리전명 입력
    env.S3_IDENTITY_POOL_ID = '설정한 IDENTITY_POOL_ID값 입력';
    inject('env', env)
}

파일 업로드를 위해 Bootstrap-Vue의 Form File Component를 추가합니다.

https://bootstrap-vue.org/docs/components/form-file

Admin 페이지를 다음과 같이 수정합니다.

/admin/index.vue

<template>
    <div>
        <b-form-file
            ref="file-input"
            v-model="file1"
            :state="Boolean(file1)"
            placeholder="Choose a file or drop it here..."
            drop-placeholder="Drop file here..."
            accept="image/*"
        ></b-form-file>
        <div class="mt-3">Selected file: {{ file1 ? file1.name : '' }}</div>
        <b-button @click="clearFiles" class="mr-2">Reset</b-button>
        <b-button @click="upload" class="mr-1">Upload</b-button>
    </div>
</template>

<script>
import AWS from 'aws-sdk';

export default {
    name: 'IndexPage',
    data() {
        return {
            file1: null,
            bucketName: this.$env.S3_BUCKET,
            bucketRegion: this.$env.S3_REGION,
            IdentityPoolId: this.$env.S3_IDENTITY_POOL_ID,
        }
    },
    computed: {
        accessToken() {
            return this.$store.state.accessToken;
        }
    },
    methods: {
        clearFiles() {
            this.$refs['file-input'].reset()
        },
        async upload() {
            if(!this.file1) {
                alert('File을 선택해주세요.')
            }else{
                console.log(this.file1);
                console.log(`${this.bucketRegion} ${this.bucketName}`);
                AWS.config.region = this.bucketRegion;
                AWS.config.credentials = new AWS.CognitoIdentityCredentials({
                    IdentityPoolId: this.IdentityPoolId,
                });
                const s3 = new AWS.S3({
                    apiVersion: '2006-03-01',
                    params: {
                        Bucket: this.bucketName+'/images'
                    }
                });
                await s3.upload({
                    ACL: 'public-read',
                    Body: this.file1,
                    Key: this.file1.name
                }, (error)=>{
                    if(error){
                        this.errorHandler(error);
                        // return alert('There was an error uploading your photo: ', error.message);
                    }
                }).promise().then((data)=>{
                    console.log('File uploaded!!!')
                    console.log(data);
                })
            };
        },
    }
}
</script>

파일 업로드 테스트를 해봅니다.

위와 같이 정상적으로 업로드가 안되고 AccessDenied가 나올 경우,
AWS의 IAM - 역할 메뉴에서 다음 항목을 검색합니다.

Cognito_SliderS3AccessUnauth_Role

해당항목을 클릭하고 들어가면,
아래와 같은 정책 이름이 보입니다.

"oneClick_Cognito_SliderS3AccessUnauth_Role_..." 항목을 클릭합니다.

JSON을 선택하여 아래와 같이 작성 후 정책 검토를 한 후 저장합니다.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                "s3:*"
            ],
            "Resource": [
                "arn:aws:s3:::codegear-slider-bucket/*",
                "arn:aws:s3:::codegear-slider-bucket"
            ]
        }
    ]
}