‹ Home
Exported

알파피플 앱

조재현, CEO at Alphapeople이재철, Backend at Alphapeople정다희, Designer at Alphapeople김기범, Flutter at Alphapeople
Posted by 김기범 ·

Flutter Web 배포 (feat. 애플로그인)

이재철, Backend at Alphapeople 이재철 님 

Flutter Web을 테스트 서버 등에 미리 배포해서 웹 환경 이슈들을 체크해보았으면 합니다.

혹시 별도로 고려 중이신 배포 방식이 있을까요? (ex. fly.io)

Comments & Events

김기범, Flutter at Alphapeople 김기범, Flutter
웹 환경의 애플 로그인 기능을 위해, 아래 내용도 지원해주실 수 있을 지 문의드립니다:

애플 로그인
  • Firebase Auth 기반으로 웹에서 애플 로그인을 지원하려면,
    Firebase Auth에서 제공해주는 리다이렉션 페이지를 연동해야 합니다.
    https://alpha-people-app.firebaseapp.com/__/auth/handler 
  • 해당 페이지는 애플 로그인 성공 시 자동으로 리다이렉션 되며, OAuth 플로우를 처리합니다.
  • 다만, 해당 페이지가 저희 쪽 도메인과 다르기 때문에,
    CORS 이슈를 방지하기 위해 저희 쪽에서 아래와 같이 프록시 설정이 필요합니다. (관련 문서) 
  • # reverse proxy for signin-helpers for popup/redirect sign in.

location /__/auth {
  proxy_pass https://alpha-people-app.firebaseapp.com;
}
Notified 3 people
이재철, Backend at Alphapeople 이재철, Backend
1. vercel, netlify 등을 고려 중입니다. 기범님 편한걸로 하되, 계정은 알파피플 이메일로 제가 새로 가입할께요. 편한걸 알려주세요.

2.  alpha-people --> alphapeople 로 바꿀수 있나요? 로고가 Alphapeople 여서 모두 alphapeople 로 하고 있거든요. google mail 주소만 해도 @alphapeople.me 여서...

3. GraphQL API 의 경우 2개의 주소에서 서빙될 예정입니다.
1) staging: demo.alphapeople.me/
2) prod: app.alphapeople.me/
지금 alpha-people-app 에서 app 부분이 prod를 뜻하는건 아닌것 같아서, 나중에 꼬일까봐..
Notified 3 people
김기범, Flutter at Alphapeople 김기범, Flutter
1. 비용, 무료 대역폭, 프록시 처리 용이성, 배포 효율성 등을 고려했을 때, Cloudflare Pages를 사용하면 좋을 것 같습니다. 혹시 현재 생성된 계정이 이미 있으면 공유해주시면 감사하겠습니다!

2, 3. alpha-people-app 네이밍은 Firebase 쪽에서만 쓰이는 프로젝트 ID라서, 프록시 주소를 제외하고는 직접적으로 참조되거나 사용될 일은 없습니다. 또한 동일한 Firebase 프로젝트 내에서 prod, staging을 구분할 예정이라, 네이밍 변경이 필요할지 검토해주시면 감사하겠습니다.
아울러 프로젝트ID보니 수정이 어려운데, 혹시 꼭 네이밍 변경이 필요하시다면 새로운 프로젝트를 생성하도록 하겠습니다. 
Notified 3 people
이재철, Backend at Alphapeople 이재철, Backend
Preview of CleanShot 2025-06-29 at 16.12.34@2x.jpg
CleanShot 2025-06-29 at 16.12.34@2x.jpg 158 KB • Download

1. Pages로 하려고 했더니, Workers 로 하라고 하네요. 조금 리서치해본 후 진행할께요.


2. 프로젝트 만든 후 설정 시간이 오래 걸릴까요? 되도록 맞추는게 좋을것 같아서요. 되도록이면 해주시면 좋을것 같긴 한데, 1시간 이상 걸리는 일이면 패스하셔도 될것 같습니다.
Notified 3 people
김기범, Flutter at Alphapeople 김기범, Flutter
2. 현재 단계에서는 크게 공수가 들지는 않습니다.
다만 alphapeople은 이미 ID가 선점되어 있어서 다른 ID를 사용해야 해서,
단순히 ID 변경을 위해 새 프로젝트를 생성하는 것은 큰 의미가 없을 수 있습니다.
Notified 3 people
이재철, Backend at Alphapeople 이재철, Backend
1. 엇.. alphapeople 을 우리가 아닌 누군가가 선점했다구요?

2. 추가로 demo.alphapeople.me/gql 로 연결되는 앱(스테이징)과
app.alphapeople.me/gql 로 연결되는 앱(프로덕션)이 필요한데, 
서로 다른 프로젝트로 해야 하나요?
Notified 3 people
김기범, Flutter at Alphapeople 김기범, Flutter
네 alphapeople, alpha-people 모두 사용 중인 ID 입니다. 
기억해보니 두 ID가 선점되어 있어서 alpha-people-app으로 설정했었습니다 🤔

참고로 Firebase에서는 데모용 프로젝트도 많이 만들어지기 때문에, ID가 선점되는 경우는 흔한 편이긴 합니다.
이재철, Backend at Alphapeople 😱
Notified 3 people
이재철, Backend at Alphapeople 이재철, Backend
2번 질문, 서로 다른 GraphQL 엔드포인트를 바라보게 하는 경우, firebase 는 분리되어야 할까요?
Notified 3 people
김기범, Flutter at Alphapeople 김기범, Flutter
분리될 필요는 없습니다. 

Firebase는 크래시 수집, 푸시 알림, 인증 등을 위한 서비스이기 때문에, GraphQL 요청 기능과는 무관합니다. 

앞서 설명 드렸던 것처럼, 인증 관련 프록시를 설정할 때 외에는, 특별히 ID를 직접 참조하거나 네이밍 혼선이 생길 일은 없습니다.
# reverse proxy for signin-helpers for popup/redirect sign in.

location /__/auth {
  proxy_pass https://alpha-people-app.firebaseapp.com;
}
이재철, Backend at Alphapeople ✅
Notified 3 people
이재철, Backend at Alphapeople 이재철, Backend
김기범, Flutter at Alphapeople 김기범  Cloudflare 에 초대했습니다. (Pages 에 대한 권한은 따로 없고, Workers 권한에 통합된듯 하네요. Workers 권한 드렸습니다)
Notified 3 people
김기범, Flutter at Alphapeople 김기범, Flutter
이재철, Backend at Alphapeople 이재철  
네 감사합니다. 혹시 kiboomy@gmail.com 로 초대주셨을까요?
Notified 3 people
이재철, Backend at Alphapeople 이재철, Backend
아.. y 를 빠뜨렸네요. 다시 초대했습니다.
김기범, Flutter at Alphapeople 넵 감사합니다!
Notified 3 people
이재철, Backend at Alphapeople 이재철, Backend
기범님, 지금 Firebase의 Auth 기능으로 구현해 두시면, 나중에 백엔드만 elixir로 바꿔서 flutter에서는 거의 수정할거 없이 되도록 할께요. 혹시 지금 firebase 기반 로그인을 확정적으로 생각하실까봐 알려 드립니다. Firebase 설정이 궁금해서 그런데 초대 좀 해주시겠어요? jechol@devall.org
Notified 3 people
김기범, Flutter at Alphapeople 김기범, Flutter
이재철, Backend at Alphapeople 이재철 님

네 Firebase 초대 드렸습니다.

구글로그인, 애플로그인 시 생성되는 토큰들 활용해서 Firebase Auth 없이 자체 로그인 처리하시려는 거지요?

소셜 로그인 API 공유주시면 맞춰서 개발하겠습니다.
Notified 3 people
이재철, Backend at Alphapeople 이재철, Backend
Firebase Auth 와 같은 역할을 하는 elixir backend를 만들어야 유저 처리가 심플해지는게 아닐까 싶어서요.
일단 자세한 리서치는 나중으로 미뤄둔 상태라, 정확한 답변이 어렵네요. 지금까지는 기업용 SaaS 를 주로 만들어서 email/password 만 지원했었거든요.
Notified 3 people
김기범, Flutter at Alphapeople 김기범, Flutter
참고로 소셜 로그인 방식마다 각기 다른 형태의 토큰 값을 주기 때문에,
각 로그인 방식에 대응되는 인증 API들을 하나씩 만들어주셔야 합니다. 

만약 Firebase Auth로 소셜 로그인을 처리할 경우, 소셜 로그인의 종류에 상관없이 단일한 idToken 값을 생성해주기 때문에, 백엔드에서는 해당 토큰만 잘 활용해주시면 될 것 같습니다. 
Notified 3 people