내 제출물 개요

다른 자리 표시자 이미지 SaaS를 만들었습니다.



우선, 여기에서 찾을 수 있는 API로 Azure 함수를 사용하여 Blazor WASM에서 시작하는 애플리케이션을 만들었습니다. https://github.com/staticwebdev/blazor-starter

그런 다음 이 아키텍처로 할 수 있는지 알고 싶었기 때문에 백엔드 부분에 대한 몇 가지 테스트를 수행했습니다.
이것이 이미지에 고정된 텍스트를 추가하고 바이트 배열을 결과로 반환하는 간단한 API 끝점을 Azure 함수에 만든 이유입니다.
그런 다음 끝점에 두 개의 경로 매개 변수(너비 및 높이)를 추가하고 Redis의 키로 사용합니다.
Redis의 애플리케이션 스토어는 응답 속도를 높이기 위해 애플리케이션에서 생성한 모든 이미지입니다.

GitHub Action을 사용하여 Azure Static Web App에 애플리케이션을 배포했습니다. 프리 티어로 충분합니다.



파일 캐싱을 위해 Azure Redis Cache 인스턴스도 만들었습니다.

생산 환경

이 링크에서 응용 프로그램을 찾을 수 있습니다: https://www.placify.xyz

개발 시간

나는 하루 동안 모든 것을 메모하고 솔루션을 개발하는 데 총 2시간이 걸렸다고 말할 수 있습니다(연속이 아님).

작동 원리

매우 간단합니다. HTML 페이지에 img 태그를 추가하면 자리 표시자 이미지로 대체됩니다.

<img src="https://www.placify.xyz/api/draw/1920/768>

제출 카테고리:

카테고리: MEAN/MERN Mavericks

사용 언어

프런트엔드 기술 스택: ASP.NET Core Blazor 6, Stone.css
백엔드 기술 스택: C#, Azure 함수
클라우드: Azure 정적 웹 앱
Redis: Azure Redis 캐시 서비스

코드 링크

이 프로젝트는 오픈 소스이며 GitHub에서 호스팅됩니다.

가스켄 / 달래다

Blazor & C#으로 작성된 그림 자리 표시자 엔진

Placify - 또 다른 이미지 자리 표시자 saas

Placify는 SaaS 이미지 자리 표시자 서비스입니다. SaaS 제품에 대한 이미지 자리 표시자를 만들고 관리할 수 있습니다. 이를 사용하여 제품에 대한 자리 표시자 이미지를 만든 다음 애플리케이션에서 사용할 수 있습니다. 마케팅 자료용 자리 표시자 이미지를 만드는 데 사용할 수도 있습니다.

작동 원리

매우 간단합니다. HTML 페이지에 img 태그를 추가하면 자리 표시자 이미지로 대체됩니다.

<img src="https://www.placify.xyz/api/draw/1920/768>

데이터 저장 방법:

Placify는 이미지의 바이너리 스트림을 Redis에 직접 저장합니다. 키로서 애플리케이션은 너비*높이 형식의 키를 생성합니다.

데이터 액세스 방법:

키로 응용 프로그램은 이진 정보를 검색하고 API 결과로 다시 보냅니다.

성능 벤치마크

솔루션으로 몇 가지 테스트를 수행했으며 결과는…

View on GitHub

Redis를 다중 모델 데이터베이스로 사용하기 위한 클라이언트 라이브러리인 Redis OM을 확인하십시오.

RedisInsight을 사용하여 Redis에서 데이터를 시각화합니다.

free Redis database에 가입하세요 .