Common Ninja Storage 발표 - 전자 상거래 앱에 스토리지 기능을 추가하기 위한 간단한 API

최근 Shopify 및 기타 전자 상거래 플랫폼을 위한 new app을 구축했습니다. 이 앱을 통해 판매자는 제품 이미지에 정보 라벨을 추가할 수 있습니다. 이는 판매자가 제품의 일부 기능을 강조하기 위해 제품 이미지의 여러 변형을 자주 생성하기 때문에 매우 일반적인 사용 사례입니다.

앱의 기능 중 하나는 우리가 만든 정보 레이블 편집기로 이미지를 만든 다음 나중에 사용할 수 있도록 저장하는 기능입니다. 이를 가능하게 하려면 AWS S3 , Google Cloud Storage , Azure Blob Storage 등과 같은 스토리지 솔루션과 통합해야 했습니다.

어떤 이유로 이 기능을 추가하고 클라우드 스토리지에 파일을 저장하는 가장 좋은 방법이 무엇인지 이해하고 클라이언트와 서버 측 모두에서 기능을 엔드 투 엔드로 코딩하는 것은 결코 쉬운 일이 아니었습니다. 이것은 내가 수십 번 처리 한 것입니다).

스택에는 React, Node 및 AWS S3가 포함됩니다. 그러나 우리가 직면한 몇 가지 문제는 다음과 같습니다.

ReactJS 앱에서 서버로 이미지를 보내는 방법은 무엇입니까?

NodeJS에서 이미지 파일을 수락하는 방법은 무엇입니까?

AWS S3에 이미지를 저장하는 방법은 무엇입니까?

업로드된 이미지 URL을 가져오는 방법은 무엇입니까?

각 사용자에 대한 폴더를 만들고 관리하는 방법은 무엇입니까?

이것들은 사소한 질문처럼 보이지만, 각각의 질문에 대답하고 그들이 모두 함께 플레이하는 방식을 이해하는 데는 오랜 시간이 걸릴 수 있습니다.

여기서 주요 문제는 클라이언트에서 서버로 이미지를 업로드하는 여러 가지 방법(base64, url, 양식 데이터, blob)이 있다는 것입니다. 앱 개발자로서 원하는 유일한 것은 사용자가 이미지와 파일을 업로드할 수 있도록 하는 것입니다.

❓ 일반 닌자란?

Common Ninja는 개발자가 전자 상거래 플랫폼용 앱을 매우 쉽게 구축하고 수익을 창출할 수 있는 플랫폼입니다. 단일 전자 상거래 API를 사용하면 앱을 한 번 구축하고 Shopify, BigCommerce, Wix, WooCommerce 등과 같은 여러 플랫폼과 통합할 수 있습니다. 앱을 다시 빌드하고 모든 플랫폼에서 개별적으로 작동하도록 할 필요가 없습니다.

또한 Common Ninja는 개발자가 개발 프로세스를 향상하고 결제 및 스토리지 솔루션을 제공하는 데 도움이 되는 일련의 API 및 도구를 제공합니다.

📣 Common Ninja 스토리지 발표

Common Ninja의 스토리지 솔루션은 모든 전자 상거래 앱에 스토리지 기능을 추가하는 새롭고 쉬운 방법입니다.

우리의 API는 간단하며 Common Ninja가 스토리지를 관리하도록 할지 아니면 자체 AWS S3 버킷과 통합할지 결정할 수 있습니다.

docs 에서 API에 대한 자세한 내용을 읽을 수 있습니다.

💻 코드 예

우리는 곧 훨씬 더 많은 기술 문서를 게시할 예정이지만 한편 얼마나 쉬운지 맛보기 위해 Info Labels app(React & NodeJS로 개발)의 간단한 코드 예제가 있습니다.

import React, { useState } from 'react';

function FileUpload() {
    const [selectedFile, setSelectedFile] = useState<string | Blob>('');

    const changeHandler = (event: any) => {
        setSelectedFile(event.target.files[0]);
    };

    const uploadImage = async () => {
        try {
            const body = new FormData();
            body.append('file', selectedFile);
            const req = await fetch('/api/storage/files', {
                method: 'POST',
                body,
            });
            const {
                data: { url },
            } = await req.json();

            console.log('File url: ', url);
        } catch (e) {
            console.error('Could not upload image', e);
        }
    };

    return (
        <div>
            <input type="file" name="file" onChange={changeHandler} />
            <div>
                <button onClick={uploadImage}>Upload</button>
            </div>
        </div>
    );
}

다음으로 NodeJS 서버에서 Common Ninja의 API를 사용하여 파일을 업로드하고 URL을 반환합니다.

import { Request, Response, Router } from 'express';
import CommonNinja from '@commonninja/node-sdk';

const router: any = Router();
const { COMMONNINJA_APP_ID, COMMONNINJA_APP_SECRET } = process.env;

function getCommonNinjaClient(req: Request) {
    if (!COMMONNINJA_APP_ID || !COMMONNINJA_APP_SECRET) {
        throw new Error('Missing Common Ninja app ID or secret key.');
    }

    return new CommonNinja({
        appId: COMMONNINJA_APP_ID,
        appSecret: COMMONNINJA_APP_SECRET,
        accessToken: req.query.token as string,
        env: CommonNinja.envs.production,
        logs: true,
    });
}

router.post('/api/storage/upload', async (req: Request, res: Response) => {
        const client = getCommonNinjaClient(req);
        const result = await client.storage.uploadFile(req.body.file);
        res.send(result.data);
});

그리고 그게 다야! 노력 없이 사용자가 이미지, 비디오, 문서 및 앱에서 지원하려는 기타 파일을 업로드할 수 있습니다.

📚 더 알아보기

Common Ninja 또는 API를 사용하여 첫 번째 앱을 빌드하는 방법에 익숙하지 않은 경우 이전 기사에서 이에 대해 작성했습니다.

또한 다음 리소스를 사용하여 자세히 알아보고 도움을 받을 수 있습니다.

📜 Common Ninja Docs
💬 Discord Community