구글 oauth 구현 및 GCP 배포

[쏘울프렌드]

수고많으십니다. 배포 관련 질문 드립니다.

VITE 프레임워크로 만든 리액트 프로젝트를 빌드하여 노드js와 연결시키면, 구글 oauth가 한번만 잘 작동하고 그 다음부턴, 로그아웃도, 재로그인도, 로그인하다가 취소버튼 누르기도 안됩니다. 404페이지만 나옵니다.

빌드하기 전에는, 구글oauth는 잘 작동하지만, webpack-dev-server(리액트 프론트)에서 axios로 요청한 몽고db 데이터를 nodejs로 구현한 서버에서 전송해야 하는데 network error가 나옵니다(cors 에러라는데, 서버에 app.use(cors())를 해도 안됩니다. 캐시를 지워도, 쿠키를 지워도 안됩니다.)

이러한 상태에서, 

gcp에 배포를 하면 배포는 되지만, 사이트가 열리지 않고, service가 안된다거나 504 페이지가 나옵니다.. 또한 gcp 배포하여 로그를 보면, "GET /favicon.ico HTTP/1.1" 503가 나옵니다.

vite로 pwa도 구현했고, env 파일도 프론트와 백엔드에서도 잘쓰고 있고 콘솔에서도 이상이 없습니다. 노드js에서 구글 passport 20 라이브러리를 이용해서 생성된 토큰을 res.cookie로 보내고 res.redirect로 홈으로 옮기게도 했습니다.
또한, troika-three-js를 사용해서 CSP 부분에서 걸리는 바람에 리액트와 노드부분에서 "worker-src 'self' blob:;" 설정해줬습니다.

도대체 어디서부터 봐야할까요.

[쏘울프렌드]

프론트에서 dev-dist 폴더를 지웠고, GCP에서 프로젝트를 새로 생성하여 처음 생성한 인증페이지(localhost:8080 및 localhost:8080리디렉트만 넣음)를 이용했으며

nodejs에서 아래와 같이, worker-src 'self' blob: 에서 'self'를 뺐더니 빌드후 기준으로 구글 oauth가 작동을 하였습니다.

app.use((req, res, next) => {
  res.setHeader("Content-Security-Policy", "worker-src blob:;");
  next();
});

단지, web-dev-server에서는 axios network error(cors에서 기인)가 나올뿐이고, nodejs에서 app.use(cors())를 해도 해결되지 않았습니다.

하지만, gcloud app deploy하고 server unavaliable이나 502 bad gateway(504가 아니었음)가 나오는게 의아할 따름입니다;;

CSP 문제인가요? 구글OAUTH 문제인가요? 어떤 문제인지 문의드립니다.

[codingapple]

bad gateway 나오는원인은 로그 출력해서 에러메세지 확인해봅시다

[쏘울프렌드]

수고많으십니다. 에러 내용 토대로 잘 해결했습니다. 감사합니다. 좀 복잡하게 돼 있어서 푸는데 시간이 걸렸습니다.

[글쓴이]

글