Appwrite Storage API를 React와 통합

이 블로그 자습서에서는 Appwrite 스토리지 API를 사용하여 반응 웹 앱을 만들 것입니다.

1단계: ▶️ Appwrite 초기화 및 React 프로젝트 생성

Digital ocean을 사용하여 Appwrite 인스턴스를 호스팅했습니다.(다른 호스팅 옵션을 자유롭게 탐색해 보세요.)

먼저 디지털 바다(최소 2GB RAM/2vCPU)에 물방울을 만들고,

appwrite를 설치하려면 다음 명령을 실행합니다(인스턴스에 도커가 설치되어 있는지 확인).

docker run -it --rm \
    --volume /var/run/docker.sock:/var/run/docker.sock \
    --volume "$(pwd)"/appwrite:/usr/src/code/appwrite:rw \
    --entrypoint="install" \
    appwrite/appwrite:0.11.0

브라우저에서 VM의 IP 주소를 사용하여 Appwrite 콘솔에 액세스하거나 Droplet IP 주소를 가리키는 DNS "A 레코드"를 추가하고 해당 도메인을 사용하여 콘솔에 액세스할 수 있습니다.



이제 create-react-app를 사용하여 React 프로젝트를 생성합니다.

npx create-react-app appwrite-storage

그런 다음 프로젝트에 appwrite js 패키지를 설치합니다.

npm install appwrite

2단계: 🔗 React 앱을 Appwrite와 연결

Appwrite 콘솔에서 새 프로젝트를 만듭니다.

그런 다음 Appwrite에 새로운 웹 플랫폼을 등록합니다. 개발용으로 추가localhost하고 프로덕션용으로 도메인 이름으로 새 웹 플랫폼을 등록합니다.





이 프로젝트에서는 OAuth와 이메일 및 비밀번호 대신 익명의 사용자를 사용할 것입니다.

이제 👇 아래의 API 래퍼를 사용하여 appwrite 서버와 다양한 작업을 수행합니다. (다양한 기능을 추가하여 확장할 수도 있습니다.)

// Create a new file under lib/appwrite.js
import { Appwrite } from "appwrite";

let api = {
  sdk: null,

  provider: () => {
    if (api.sdk) {
      return api.sdk;
    }
    let appwrite = new Appwrite();
    appwrite
      .setEndpoint("appwrite-endpoint-url")
      .setProject("project-id");
    api.sdk = appwrite;
    return appwrite;
  },

  createSession: (email, password) => {
    return api.provider().account.createAnonymousSession();
  },

  createFile: (file) => {
    return api.provider().storage.createFile(file, ["*"], ["*"]);
  },

  getFileView: (id) => {
    return api.provider().storage.getFileView(id);
  }
};

export default api;

프로젝트의 설정 아래에 있는 appwrite 콘솔에서 사용자project-id를 찾을 수 있습니다.



예이 🥳 ! React 앱을 Appwrite와 성공적으로 연결했습니다.

3단계: 👩‍💻 사용자 세션 관리

Warning: You cannot create a file in appwrite storage without signing in with a user

이 프로젝트에서는 익명의 사용자를 사용하겠습니다(다른 옵션도 자유롭게 살펴보세요!).
다른 옵션을 탐색할 수 있습니다here!

이제 웹 앱에 도착할 때 익명 사용자 세션을 생성합니다. 즉, src/App.js 반응 후크를 사용하여 useEffect 아래에 새 사용자를 생성합니다.

import "./index.css";
import { useEffect } from "react";
import api from "./lib/appwrite";

function App() {
  useEffect(() => {
    api
      .createSession()
      .then((response) => {
        console.log(response);
      })
      .catch((err) => console.log(err));
  }, []);

  return <div></div>;
}

export default App;

4단계: 📩 Appwrite 저장소에 파일 생성

Appwrite 스토리지에 파일을 업로드하기 위해 생성한 헬퍼 함수( api.createFile() )를 사용할 것입니다.

먼저 input 유형의 "file" 필드가 있는 React 양식 구성 요소를 생성해야 합니다.

import "./index.css";
import { useEffect, useState } from "react";
import api from "./lib/appwrite";

function App() {
  useEffect(() => {
    api
      .createSession()
      .then((response) => {
        console.log(response);
      })
      .catch((err) => console.log(err));
  }, []);

  const [image, setImage] = useState(null);

  const handleSubmit = async () => {
    if (image !== null) {
      const respsone = await api.createFile(image);
      console.log(respsone);
    } else {
      alert("No file is uploaded");
    }
  };

  return (
    <div className="min-h-screen bg-primary flex justify-center items-center">
      <form onSubmit={() => handleSubmit()}>
        <input
          type="file"
          required
          onChange={(event) => setImage(event.currentTarget.file[0])}
        />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

export default App;

5단계: 🔍 Appwrite 저장소에서 파일 보기

Appwrite 저장소에서 파일 URL을 가져오기 위해 우리가 만든 도우미 함수( api.getFileView() )를 사용할 것입니다.

파일 URL을 얻으려면 "파일 ID"가 필요합니다. 파일 ID는 두 가지 방법이 있습니다.

첫 번째는 api.createFile()의 응답에서 ID를 얻을 수 있다는 것입니다.

const respsone = await api.createFile(image);
console.log(respsone["$id"]); // Logs the file ID

다른 방법은 Appwrite 콘솔에서 파일 ID를 가져오는 것입니다.

ID를 얻으려는 파일로 이동하고,


그리고 파일 ID를 얻습니다.


파일 ID를 얻은 후 위에서 언급한 도우미 기능을 사용하여 파일 URL을 얻습니다.

const url = api.getFileView(fileId).href;
console.log(url);

이제 이 URL을 사용하여 Appwrite Storage에 저장한 파일을 볼 수 있습니다.

끝입니다!✊. 이제 성공적으로 🏆 Appwrite Storage로 React 앱을 구축했습니다 🎉.