ionic과 AWS Amplify 연동하기 : 이미지 업로드 및 가져오기

AWS Amplify

 

---

AWS Amplify 설치

AWS 계정이 있어야 하고 다음 것들이 미리 설치되어 있어야 한다

• Node.js v12.x or later
• npm v5.x or later
• git v2.14.1 or later

 

npm install -g @aws-amplify/cli
amplify configure

 

창이 열리면서 AWS에 로그인한다

로그인 끝나면 다시 돌아와서 이후의 일을 하자

region 선택 시 앞으로의 모든 것들의 region과 동일한 것으로 선택하자...

 

 

먼저 IAM user 생성 과정을 겪게 된다

필수로 거쳐야 하는 것들

AdministratorAccess계정에 대한 사용자를 생성해야, Cognito 등과 같은 AWS 리소스를 생성할 수 있음

 

 

마지막에 나오는 secret access key와 access key ID는 어딘가에 꼭 메모해두자!!

바로 다음에 나오는 로그인 과정에 필요

새 ionic app 생성하기

npm install -g ionic
ionic start illbedie sidemenu --type=angular 
cd illbedie
npm start

 

백엔드 초기 설정하기

앞으로 나오는 이름 설정은 

영어 소문자만 써서 하자...

제안해주는 이름은 그대로 하는 게 상책이다...

 

amplify init

 

+) amplify 라이브러리 설치하기

npm install aws-amplify @aws-amplify/ui-angular@1.x.x

 

 

Amplify Storage 사용하기

amplify add storage

 

현재까지 생성한 자원들을 cloud에 올리기

amplify push

 

 

 

각 자원들의 상태를 확인하고 싶다면...

amplify status

 

---

내가 만든 웹에 amplify 설정하기

npm install -S aws-amplify

 

 

/src/main.ts에 다음 코드 추가하기

import Amplify, { Storage } from 'aws-amplify';
import awsconfig from './aws-exports';
Amplify.configure(awsconfig);

 

 

'.aws-amplify' 인식을 위해 node 설치하기

npm install --save-dev @types/node

 

tsconfig.json 에 추가

"typeRoots": ["node_modules/@types"]

tsconfig.app.json의 types에 "node" 명시하기

 

Angular 6 이상일 경우 polifills.ts에 아래 코드 추가

(window as any).global = window;

(window as any).process = {
  env: { DEBUG: undefined },
};

 

---

이미지 업로드 구현

이미지 업로드 페이지의

~.page.ts에 적기

import { Component, OnInit } from '@angular/core';
import { Storage } from 'aws-amplify'; // 추가

@Component({
  selector: 'app-drone-upload',
  templateUrl: './drone-upload.page.html',
  styleUrls: ['./drone-upload.page.scss'],
})
export class DroneUploadPage implements OnInit {
  private _Img: File; // 추가

  constructor() {}

  ngOnInit() {}

	// 추가
  imgSelectHandler(event) { // 사용자가 선택한 이미지를 _Img 변수에 담음
    console.log(event);
    this._Img = event.target.files[0];
  }
  
	// 추가
  uploadImg() { // _Img 변수에 담은 파일을 가져와서 AWS S3 bucket에 업로드
    console.log(this._Img);
    const result = Storage.put(this._Img.name, this._Img);
  }
}

<ion-header>
  <ion-toolbar>
    <ion-title>image-upload</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-item>
    <ion-button expand="full" (click)="f.click()">
      <ion-icon name="camera"></ion-icon>
      Select File
    </ion-button>
    
    <input
      class="ion-hide"
      #f
      type="file"
      (change)="imgSelectHandler($event)" // 핸들러 지정
      id="file-input"
      accept="image"
    />
  </ion-item>
  <br />
  
  // 업로드 버튼 지정
  <ion-button expand="block" (click)="uploadImg()">Upload</ion-button>
</ion-content>

 

 

 

---

결과

 

 

 

 

참고

https://docs.amplify.aws/start/getting-started/installation/q/integration/react/#option-2-follow-the-instructions