ChangJoo-Park
commented
6 years ago 안녕하세요 빌드후에는 dev모드에 설정된 프록시가 적용되지 않습니다 가장 간단히 해결하는 방법으로는 node서버가 빌드가 된 프론트엔드 앱을 라우트에 추가하는것입니다
vue router를 쓰실테니 node.js fallback 관련 내용을 보시면 좋을것같아요
Open Gregory-Han opened 6 years ago
ChangJoo-Park
commented
6 years ago 안녕하세요 빌드후에는 dev모드에 설정된 프록시가 적용되지 않습니다 가장 간단히 해결하는 방법으로는 node서버가 빌드가 된 프론트엔드 앱을 라우트에 추가하는것입니다
vue router를 쓰실테니 node.js fallback 관련 내용을 보시면 좋을것같아요
Gregory-Han
commented
6 years ago 답변 감사합니다. 밤새 많은 시간을 투자해서 이리저리 해보았습니다만, 결과가 신통치 않습니다. 첫번째로 node router에서 다음과 같이 이미 처리했습니다. 그리고 오류 메시지도 아래에 있는데로 잘 나옵니다. 헌데 redirect는 실행되지 않습니다. 무엇보다 개발모드에서는 전혀 문제가 안되는데, 빌드 후에는 이런 문제가 있는게 어떤 이유인지 궁금합니다.
/ Data Access Violation / app.all("/api/*", (req, res) => { res.status(404).end(); console.log('\u001b[41m', '==> 404 ; 파일 또는 디렉터리를 찾을 수 없습니다.', '\u001b[0m'); });
/ All Access except for above / app.all('*', (req, res, next) => { if (req.user != undefined) { console.log('\u001b[41m', 'Undefined User & All Access Violation', '\u001b[0m'); } else { console.log('\u001b[41m', 'Defined User & All Access Violation', '\u001b[0m'); } res.redirect('/'); });
참고로 클라이언트 라우트입니다. ...... { path: '/dashboard', name: 'dashboard', component: lazyLoad('dashboard/Dashboard'), meta: { title: '나의 대시보드', chartType: 'dashboard' } }, ...... { path: '*', redirect: { name: 'home' } }
function lazyLoad(component) {
return () =>
import (@/views/${component}.vue)
}
혹시 빌드시에 lazyLoad가 문제를 야기하는지요?
차주에 완료해야 하는데 정말 답답합니다. 제가 구현하려는 최종 목적은 로그인 후 refresh를 해도 로그인을 유지하는 것입니다. Udemy에서 동영상 교육 받고 따라 했는데, 조금만 범위를 벗어나는 일이 발생하면 헤맵니다.
개발환경은
node: v8.11.3
"axios": "^0.18.0",
"babel-polyfill": "^6.26.0",
"es6-promise": "^4.2.4",
"lodash": "^4.17.10",
"vue": "^2.5.16",
"vue-router": "^3.0.1",
"vuex": "^3.0.1"
서버: "dependencies": { "bcryptjs": "^2.4.3", "body-parser": "^1.18.2", "compression": "^1.7.1", "connect-history-api-fallback": "^1.5.0", "console-stamp": "^0.2.6", "cookie-parser": "^1.4.3", "cors": "^2.8.4", "errorhandler": "^1.5.0", "express": "^4.16.2", "express-session": "^1.15.6", "jsonwebtoken": "^8.3.0", "mongoose": "^4.13.2", "morgan": "^1.9.0", "multer": "^1.3.0", "nodemailer": "^4.4.0", "passport": "^0.4.0", "passport-google-oauth20": "^1.0.0", "passport-local": "^1.0.0", "rotating-file-stream": "^1.3.4", "serve-favicon": "^2.4.5", "session-memory-store": "^0.2.2", "socket.io": "^2.1.1", "system-sleep": "^1.3.6" }
죄송합니다만, 도와주시기 바랍니다.^^
jicjjang
commented
6 years ago @Gregory-Han 위 코드에서 어디를 들어갔을 때, 리디렉션이 제대로 안된다는 말씀이신가요? 정보가 너무 부족하네요 ^^;
Gregory-Han
commented
6 years ago 반갑습니다. 문제의 요지는 로그인 후 refresh 를 하면 -.dev: 현재 페이지에 사용자 정보 유지하면서 정상 처리됩니다. -.build 후 production : 브라우저의 빈 화면으로 이동합니다. 이것을 잡기 위해 App의 created 에서 user 정보를 localstorage에 저장 해서 사용했는데(위에 기술) 고의로 이것을 삭제하면 로그인 되지 않은 상태로 남으면서 예상외의 페이지나 rest-api 만 실행한 데이터를 보여 주기도 합니다. 설명이 어려운데 가능한 시간 알려 주시면 원격 도움 받을 수 있을까요? 초면에 죄송합니다.^^
jicjjang
commented
6 years ago 데이터 문제가 아니라 refresh 시, 페이지를 못잡는거면 router 문제인 것 같습니다. 아래 링크 한 번 확인해주세요. https://github.com/vuejs-templates/webpack/issues/511
qgp9
commented
6 years ago 빈화면이 보이는 페이지의 주소를 서버에서 제대로 routing 하고 있는지 확인해야 할 것 같습니다.
Gregory-Han
commented
6 years ago 빈 화면은 관계없는 주소가 나오기도 합니다. 그리고 보내주신 511번은 검토했는데 저에게는 해당되지 않는것 같습니다. 소스를 보여드리는 방법도 가능한데 어떤게 좋은지요.
qgp9
commented
6 years ago "빈화면은 관계없는 주소" 가 나오는게 지금 가장 큰 문제인 것 같은데요.
Gregory-Han
commented
6 years ago 네, 휴가를 헤메면서 보내고 있습니다. 다 된줄 알았는데 엄청난 복병이네요...
Gregory-Han
commented
6 years ago 관계없는 주소는 직전에 테스트한 포트나 라우트를 의미합니다. 간간이 크롬의 초기 화면 비슷한 것도 나옵니다. production이 쉽지 않은 건지 제가 뭘 잘못했는지 감을 잡을 수가 없네요.^^
Gregory-Han
commented
6 years ago 혹시 커뮤니티에 계신 분중에 제가 방문할 수 있는데, 지원 가능하신분 계신지요? 주로 프론트단의 d3 만 해서 도움이 절실합니다...^^
jicjjang
commented
6 years ago 슬랙으로 얘기해주시겠어요 ^^? 휴가나 주말이라 직접 만나기엔 부담인 부분들이 많으실 것 같은데, 슬랙으로 일단 얘기해보시죠. (저는 일을하고있어서 ㅠㅠ...)
Gregory-Han
commented
6 years ago 네 감사합니다. 시간 알려주시면 슬랙을 잘못쓰지만 연결하도록 하겠습니다.
jicjjang
commented
6 years ago 슬랙엔 글 올리시면 언제든 고수분들이 대답해주실거에요 ㅎ.ㅎ
Gregory-Han
commented
6 years ago 네 알겠습니다, 감사합니다.
bichikim
commented
6 years ago 질문을 이슈 트레킹으로 하는거 좋은데요 ??
james-song
commented
6 years ago https://guides.github.com/features/mastering-markdown/#examples 보시면 아시겠지만,
코드 일부를 첨삭 하실때
```javascript if (isAwesome){ return true } ``` 와 같이 ` 문자와 함께 lang type을 적어서 작성해주시면
if (isAwesome){
return true
}와 같이 표현되기 때문에 문서를 읽는데 유용 할 것 같습니다 :)
Gregory-Han
commented
6 years ago 어제 자문이후 깃으로 작업해서 올리는 것도 쉽지않아 cli 3.0으로 힘차게 바꿔서 어찌되는가 했는데, 동일한 문제인지 안됩니다. 개발모드는 정상 작동합니다. 빌드하면 vue.config.js에서 약간 잡아주면(devServer 관련 주석 처리) 빌드는 됩니다만, 지난번 처럼 잠깐 나왔다가 사라집니다. CORS 라고 하기도 하는데 서버에서 cors() 잡아 줬습니다. 소켓과 같이 하는데 뷰가 쉬운듯 한데 무식하니 뺑뺑이 업청 돕니다...
고수님들 얼굴 한 번 뵙고 자문 부탁합니다. 맛있는 점심은 사지요, 시간이 워낙 급해서...^^^ 서울 경기 어디든 달려갑니다, 자문 부탁드립니다.....
Gregory-Han
commented
6 years ago 이러다가 개발모드로 납품하게 될 것 같습니다...
개발모드에서는 proxy 3090 과 8070으로 refresh 등 정상 작동합니다. vue app created에서 user 정보를 localStorage에 저장해서 체크 후 건너 뛰려는데, 디버그는 되는데 production이 문제 거리입니다. build 로그인 후 refresh 만 하면, 설정한 포트로 화면이 잠깐 보인 후 브러우져의 빈 화면으로 갑니다. node 서버에서 cors & passport 사용 했습니다.
아래는 간단히 정리한 소스입니다. 바쁘시겠지만 조언 부탁합니다. ===== config/index.js ==== dev: { ..... port: process.env.PORT || 8070,
proxyTable: { '/api': { target: 'http://localhost:3090', changeOrigin: true, pathRewrite: { '^/api': '' } } },
==> App.vue created () { let user = localStorage.getItem('my_User') if (user) { user = JSON.parse(user) this.$store.dispatch('autoLogin', user) // 여기서는 별거 안합니다. } ======= =======
정보가 너무 부족한지요, 아무리 봐도 문제가 안될 것 같은데... 무엇이 문제인가요? 혹시 JWT 등으로 처리해야 하는지요? 몇일째 헤메고 있답니다, 도와주세요.....^^.