AWS 시작하기

React 애플리케이션 구축

AWS Amplify를 사용하여 간단한 웹 애플리케이션 생성

모듈 5: 스토리지 추가

이 모듈에서는 앱에서 이미지를 메모에 연결하는 기능과 스토리지를 추가합니다.

소개

이제 메모 앱이 작동하므로 각 메모에 이미지를 연결하는 기능을 추가해보겠습니다. 이 모듈에서는 Amplify CLI와 라이브러리를 사용하여 Amazon S3 기반의 스토리지 서비스를 생성합니다. 그런 다음 이전 모듈에서 생성한 GraphQL 스키마를 업데이트하여 각 메모에 이미지를 연결합니다. 마지막으로, 이미지 업로드, 가져오기 및 렌더링을 지원하도록 React 앱을 업데이트합니다.

배우게 될 내용

  • 스토리지 서비스 생성
  • GraphQL 스키마 업데이트
  • React 앱 업데이트

주요 개념

스토리지 서비스 - 이미지, 동영상 등의 파일을 저장하고 쿼리하는 기능은 대부분의 애플리케이션에서 기본적으로 요구됩니다. 이 기능을 구현하는 방법 중 하나는 파일을 Base64로 인코딩하고 문자열로 전송해 데이터베이스에 저장하는 것입니다. 이 방법은 인코딩된 파일의 크기가 원본 바이너리보다 커지고, 작업을 수행하는 데 컴퓨팅 리소스가 많이 소요되며, 적절하게 인코딩하고 디코딩하는 데 따른 복잡성이 가중된다는 단점이 있습니다. 다른 방법으로, 파일 저장용으로 특별히 구축되고 최적화된 스토리지 서비스를 이용할 수 있습니다. Amazon S3와 같은 스토리지 서비스는 이 기능을 최대한 높은 성능으로 쉽고 저렴하게 구현하기 위해 제공됩니다.

 완료 시간

10분

 사용되는 서비스

구현

  • 스토리지 서비스 생성

    이미지 스토리지 기능을 추가하려면 Amplify 스토리지 카테고리를 사용합니다.

    amplify add storage
    
    ? Please select from one of the below mentioned services: Content
    ? Please provide a friendly name for your resource that will be used to label this category in the project: imagestorage
    ? Please provide bucket name: <your-unique-bucket-name>
    ? Who should have access: Auth users only
    ? What kind of access do you want for Authenticated users? create, read, update, delete
    ? Do you want to add a Lambda Trigger for your S3 Bucket? N
  • GraphQL 스키마 업데이트

    다음으로, amplify/backend/api/notesapp/schema.graphql을 열고 다음 스키마로 업데이트합니다.

    type Note @model {
      id: ID!
      name: String!
      description: String
      image: String
    }
    

    파일을 저장합니다.

  • 스토리지 서비스 및 API 업데이트 배포

    스토리지 서비스를 로컬로 구성하고 GraphQL 스키마를 업데이트했으므로 이제 Amplify 푸시 명령을 실행하여 업데이트를 배포할 수 있습니다.

    amplify push --y
  • React 앱 업데이트

    백엔드가 업데이트되었으므로, React 앱을 업데이트하여 메모에 사용할 이미지를 업로드하고 표시하는 기능을 추가해보겠습니다. src/App.js를 열고 다음과 같이 변경합니다.

    a. 먼저, Amplify 가져오기에 스토리지 클래스를 추가합니다.

    import { API, Storage } from 'aws-amplify';

    b. 기본 앱 함수에서 이미지 업로드를 처리할 새 onChange 함수를 생성합니다.

    async function onChange(e) {
      if (!e.target.files[0]) return
      const file = e.target.files[0];
      setFormData({ ...formData, image: file.name });
      await Storage.put(file.name, file);
      fetchNotes();
    }
    

    c. 메모에 연결된 이미지가 있는 경우 이미지를 가져오도록 fetchNotes 함수를 업데이트합니다.

    async function fetchNotes() {
      const apiData = await API.graphql({ query: listNotes });
      const notesFromAPI = apiData.data.listNotes.items;
      await Promise.all(notesFromAPI.map(async note => {
        if (note.image) {
          const image = await Storage.get(note.image);
          note.image = image;
        }
        return note;
      }))
      setNotes(apiData.data.listNotes.items);
    }
    

    d. 메모에 이미지가 연결되어 있는 경우 로컬 이미지 어레이에 이미지를 추가하도록 createNote 함수를 업데이트합니다.

    async function createNote() {
      if (!formData.name || !formData.description) return;
      await API.graphql({ query: createNoteMutation, variables: { input: formData } });
      if (formData.image) {
        const image = await Storage.get(formData.image);
        formData.image = image;
      }
      setNotes([ ...notes, formData ]);
      setFormData(initialFormState);
    }
    

    e. 반환 블록의 양식에 새 입력을 추가합니다.

    <input
      type="file"
      onChange={onChange}
    />
    

    f. 메모 어레이로 매핑할 때 이미지를 렌더링합니다(있는 경우).

    {
      notes.map(note => (
        <div key={note.id || note.name}>
          <h2>{note.name}</h2>
          <p>{note.description}</p>
          <button onClick={() => deleteNote(note)}>Delete note</button>
          {
            note.image && <img src={note.image} style={{width: 400}} />
          }
        </div>
      ))
    }
    
  • 앱 실행

    앱을 테스트하려면 시작 명령을 실행합니다.

    npm start

    이제 각 메모마다 이미지를 선택적으로 업로드할 수 있습니다.

결론

AWS Amplify를 사용하여 웹 애플리케이션을 배포했습니다! 사용자가 가입하고 로그인하고 계정을 관리할 수 있도록 앱에 인증을 추가했습니다. 이 앱에는 Amazon DynamoDB를 사용하여 구성된 확장형 GraphQL API도 추가되어 사용자가 메모를 생성하고 삭제할 수 있습니다. 또한 Amazon S3를 사용한 파일 스토리지도 추가하여 사용자가 이미지를 업로드하고 앱에서 볼 수 있게 했습니다.

  • 리소스 삭제

    개별 서비스 제거

    개별 서비스를 제거하려면 Amplify 제거 명령을 사용하면 됩니다.

    amplify remove auth
    
    ? Choose the resource you would want to remove: <your-service-name>

    그런 다음 Amplify 푸시 명령을 실행합니다.

    amplify push

    전체 프로젝트 삭제

    프로젝트, 그리고 연결된 리소스를 삭제하려면 Amplify 삭제 명령을 실행하면 됩니다.

    amplify delete

이 모듈이 유용했습니까?

감사합니다.
좋아하는 사항을 알려주세요.
실망을 드려 죄송합니다.
오래되었거나 혼란스럽거나 부정확한 사항이 있습니까? 피드백을 제공하여 이 자습서를 개선할 수 있도록 도와주십시오.

축하합니다!

AWS에서 웹 애플리케이션을 구축했습니다. 다음 단계로, 특정 AWS 기술을 자세히 살펴보고 애플리케이션의 수준을 한 차원 높여보겠습니다.