Shopify App의 경우 정식으로 App store에 등록을 하거나 Customer에게 커스터마이징된 App을 설치 해주려면 App을 Web Service로 등록을 해주어야 합니다. 이런 서비스를 제공 하는 회사들은 굉장히 많이 있습니다. 그 중 Shopify App을 등록하는데 가장 적합한 서비스중 하나가 Render 에서 제공하는 Web Service입니다. 그러나, 그 과정은 결코 간단하지 않습니다. Shopify 의 Remix App의 경우 여러가지 기술이 호합된 형태 이기 대문에 설정을 해야할 부분들이 아주 많습니다. 그러다 보니 이중 하나라도 문제가 생기면 해걸하기 아주 힘든 형태로 꼬이게 됩니다. 저의 경우도 처음에는 많은 시간을 에러 해결을 위해서 시간을 보내야 했습니다. 그래서 Deploy를 하기전에 철저히 준비를 하고 시작을 하는것이 많은 시간과 노력을 아끼는 길입니다.
전체 작업 리스트: Render 배포 전 점검 및 준비 단계
A. 기본 준비
GitHub 저장소 준비 (코드 Push 완료 상태)
Remix + Shopify App 구조 확인 (shopify-app-remix 기반 또는 포크 버전)
Render 계정 생성 및 GitHub 연동 완료
.env 파일 변수 설정 확인
B. 코드 점검 및 수정
vite.config.ts의 Remix SSR 설정 점검 (import assertion 오류 등 방지)
remix.config.js 또는 remix.config.ts 설정 확인 (JSON import 등)
AppProvider.tsx에서 import en from … 제거 및 Polaris 로케일 점검
server/index.ts에서 인증 로직 및 shop, host 처리 확인
shopify.server.ts에서 shopify.auth, shopify.api 올바르게 설정
/api/* 경로의 핸들러에 authenticate() 올바르게 사용되었는지 확인
C. Render 설정 및 배포
Render에서 새 Web Service 생성 (Node, GitHub 연동)
빌드 명령어 및 start 명령어 설정 (npm run build, npm run start)
환경변수 .env 내용 Render에도 추가 (SHOPIFY_API_KEY 등)
도메인 설정 (trycloudflare.com 또는 Cloudflare Tunnel 사용 시 도메인 처리)
D. 최종 점검
배포 후 로그인 동작 확인 (shop/host query 정상 여부)
Shopify Admin 내에서 앱 정상 실행 여부 확인
기능 테스트 (예: bulk edit, 필터링, 검색 등)
콘솔 에러 및 API 응답 오류 확인
