안녕하세요.
앱 번들을 처음으로 업로드 하고 테스트 진행 하려고 합니다.
QR 코드로 앱 진입 이후 자사 백엔드 서버와 통신이 제대로 안되는 것 같아 문의 드립니다.
개발 환경 및 환경 구성은 아래와 같습니다.
- 개발환경
- web-view 환경 (react / react-router)
- 서버환경
- 백엔드 서버에 mTLS 인증서를 통한 앱인토스 서버 요청 처리
- 네트워크 환경
- AWS ALB 보안그룹 내 인바운드에 아래 IP 항목 추가
- https://developers-apps-in-toss.toss.im/api/overview.html 에 명시된 방화벽
이외에 추가적으로 확인이 필요한 사항이 있을까요?
로컬 개발환경에서는 문제 없이 테스트 이후 앱 번들 생성하여 업로드 이후 테스트 앱에서 통신이 안되고 있습니다.
추가확인
임시로 인바운드 모든 트래픽 허용으로 하여도 접속이 안되는 것 같습니다.
아래는 프로젝트 설정 정보입니다.
-
백엔드 CORS 관련 도메인 추가
-
webview 프로젝트 관련 설정
// vite.config.ts
export default defineConfig(({ mode }) => {
...
return {
...
server: {
proxy: {
'/toss/api': {
target: 'https://apps-in-toss.theminda.com'
secure: true,
changeOrigin: true,
headers: {
origin: 'https://apps-in-toss.theminda.com'
},
rewrite: path => path.replace(/^\/toss\/api/, '/api/v2/apps-in-toss'),
}
...
}
}
}
}
위와 같이 자사 벡엔드 서버로 전송하는 path 별 proxy 설정이 세개 정도 path 에 대하여 설정되어 있습니다.
// granite.config.ts
...
export default defineConfig({
appName: 'minda',
brand: {
displayName: '민다',
primaryColor: '#E26100',
icon: 'https://image.theminda.com/assets/apps-in-toss/minda_logo.png',
bridgeColorMode: 'basic',
},
web: {
host: 'localhost',
port: 5173,
commands: {
dev: 'vite',
build: 'tsc -b && vite build',
},
},
permissions: [
{
name: 'clipboard',
access: 'write',
},
],
outdir: 'dist',
});