• 카테고리

    질문 & 답변
  • 세부 분야

    풀스택

  • 해결 여부

    미해결

배포후 Login error 질문입니다

21.11.07 12:58 작성 조회수 476

0

안녕하세요,

 

Heroku 에서 server 를 Netlify 에서 client 를 배포 했습니다. 시간을 오래걸렸지만 이거저거 찾아가면 배우는 시간이었습니다.

제 앱 주소 입니다:

https://vigorous-cori-21594f.netlify.app/

 

다름이 아니고 사진도 나오고 route 도 다 작동이 되는 데요. 

로그인을 할경우 isAuth 가 true 바뀌어야 새로운 메뉴가 나오는데, 계속 false 로 되 있습니다.

register를 통해 새로운 아이디를 만들면 mongoDB 에서 확인이 되는걸로 봐서는 서버와의 연결은 잘 된거 같습니다. 

혹시 짚이 시는게 있다면 알려주시면 감사하겠습니다. 아니면 만들었던 code 들 중에 다시 봐봐야 할 부분이라도 알려주시면 감사하겠습니다. !!

답변 7

·

답변을 작성해보세요.

0

hheo97님의 프로필

hheo97

2022.01.10

 
Paul Hahm 님
 
정말 감사합니다.
토근 생성 함수내 쿠키 저장시 아래 option이 들어가니
되네요;
res.cookie("w_authExp", user.tokenExp,{
                        httpOnly:true,
                        secure:true,
                        sameSite:'none'
                  });
 
저는 client-netlify, 서버만-heroku 에
배포시도한지 3주째인데 이소스 옵션을 못 찾았습니다.
소스 보여 주신 것보고 이제 해결돼 기쁨니다.
 
정말 감사합니다.
 
 

0

hheo97님의 프로필

hheo97

2022.01.10

삭제된 글입니다
kuntange님의 프로필

kuntange

질문자

2022.01.10

아....  댓글보니 저도 생각이 나네요. 

server/routes/users 에서 토큰 만들때 설정을 조금 바꿔 줬었는데.. 제가 그것까지는 기억이 안나서 한번에 알려 드리지 못했었네요.

그래도 이제 다 해결 되셨다니 다행입니다. 

그리고 괜찮으시다면 저 한테 이메일 (github 에 이멜 주소 있습니다) 하나 보내주시겠어요? 아니면 이메일을 알려주셔도 되고요.  개인적으로 코딩/취업 관련해서 궁금한게 있어서요.

0

hheo97님의 프로필

hheo97

2022.01.09

답변 감사합니다.

CORS오류는  위 코드 와같이 cors 코드로 해결됐습니다.

저는 origin: "___netlify.app" 로 했는 데  true로 해도 되네요.

503,504오류 는 DB연결 문제 였는 데 해결했습니다.

page not found 문제도 있었는 데  _redirects 파일로 해결됐습니다.

현재 쿠키 저장이 안되는 상태로 isAuth:항상 false인데 kuntange 님 소스대로

withCredentials:true 를 넣어도 그대로 입니다.

heroku에 client,server모두 넣는 방법을 해봐야겠습니다.

(Jhon Ahn 강사님도 client/server를 다르게 배포시

cors로 요청 경로 제한을 풀어주어야 한다네요, 이방법도 찾아 봐야 겠습니다.)

답변 정말 감사합니다. 

0

hheo97님의 프로필

hheo97

2022.01.08

토근 정보가 쿠키에 저장이 되지 않아 

isAuth가 항상 false로 됩니다

어떻게해야 쿠키에 저장 되는 지 알려 주세요

 

kuntange님의 프로필

kuntange

질문자

2022.01.09

먼저 답변이 너무 늦어 죄송하네요...

처음 2개 댓글은 제가 알람을 못받은거 같네요.

 

isAuth 문제는 client/src/actions/user_actions.js  에서 front 와 server를 연결하는 action 들은 전부 withCredentials: true 를 기입했어요. 아래와 같이요.

const request = axios.get(`... .... ...`, { withCredentials: true })

그리고 CORS는 어떻게 에러가 나는지 모르겠는데요. ( 저도 온갖에러 다 난거 고치면서 해서 저도 CORS 에러가 있었는지는 기억이 안나요.) 일단 server/index.js 에는 

const cors = require('cors')
 
app.use(cors({
  origin: true,
  credentials: true
}));

요렇게 한거 같아요.

그리고 503, 404 에러는..... 배포후 netlify 가면 이에러가 뜨는 건가요?  서버쪽에서 해결해야할 문제겠죠? 

우선 저는 프로젝트 전체폴더를 heroku에 배포했고요.. 서버만 쓰지만요.  Netlify  에는 client 폴더를 따로 만들어서 배포를 했어요.. 이거저거 시도하다보니 그렇게 하게됬어요.  배포할때 프로젝트에서 server 쪽은 index.js 말고는 거의 안건드렸던 같은데요.

  const mongoose = require("mongoose");

mongoose.connect(config.mongoURI || "mongodb+srv://.../myFirstDatabase?retryWrites=true&w=majority", {
  useNewUrlParser: true, useUnifiedTopology: true,
  useCreateIndex: true, useFindAndModify: false
});
app.use('/api/users', require('./routes/users'));
app.use('/api/product', require('./routes/product'));
app.use(express.static("client/build"));
app.get("*", (req, res) => {
    res.sendFile(path.resolve(__dirname, "client", "build", "index.html"));
  });
}

let port = process.env.PORT || 5000;

이런식으로 한거 같습니다.

 

그리고 제 깃허브는

https://github.com/paulsplanet

이고요. 전체 폴더는 travelshoppingapp.

client 배포 폴더는 travelplanetapp_front  일꺼에요.

 

도움이 됬다면 좋겠습니다. 더 궁금하신거 있으시면 댓글주시고요. 저도 너무 힘들었었는데 가장 중요한거는 계속 진짜 원인을 찾아야 한다는 거였습니다. 원인을 좁힌다음 구글검색으로 거의 해결했습니다. 저도 1주일 넘게 거의 2주일 걸려 배포한거 같네요.. 코딩공부하고 가장 힘든 시간 이었습니다.

아. 그리고 client/public 에 _redirects 파일 만드는것도 중요했어요.

그럼 수고하세요

 

0

hheo97님의 프로필

hheo97

2022.01.05

안녕하세요

client - netlify.com

server - heroku

배포후  CORS 오류가 납니다.

어느 부분을 확인 하여야하는 지 알려 주시면 감사하겠습니다.

 

0

hheo97님의 프로필

hheo97

2021.12.26

안녕하세요

heroku 배포시 서버쪽 연결 오류 503,404등이 계속납니다.

서버쪽  api를 어떻게 연결 하셨는 지 알고 싶습니다.

혹시 github에 소스 공유하시면 주소 알려주시면

많은 도움 되겠습니다.

감사합니다.

0

안녕하세요 !! 
들어가서 회원가입하고 로그인하고 봤는데 isAuth 트루로 잘나오는것 같은데 
해결하신건가요? !! 
배포되게 잘하셧네요 ㅎㅎ !!! 

kuntange님의 프로필

kuntange

질문자

2021.11.13

네.. 지난 일요일에 성공했습니다.. 한 일주일 걸린거 같네요..

서버와 클라이언트를 따로 배포하는게 쉽지 않드라고요.  신경쓸것도 많고 계속 에러가 나서 수정해야 하는 부분도 많았고요. 

좋은 강의 감사드립니다.  

이번에 배포때문에 이거저거 많이 찾아보면서 배우는 시간이었습니다.