인프런 커뮤니티 질문&답변
작성한 질문수
배포 후 모바일에서 접속하면 게시판 게시글이 안보이는 문제
해결된 질문
작성
·
57
·
수정됨
0
안녕하세요. 먼저 강의 잘 들었습니다.
다름이 아니라 배포 후 웹으로는 업무게시판의 게시글이 잘 보이는데 모바일로 접속 시에는 게시글이 없는 것으로 나옵니다.
웹
(개발자 도구로 모바일 디바이스 버전으로 봐도 잘 보입니다)
모바일
이유가 뭔지 궁금합니다~
답변 2
0
안녕하세요. 질문 주셔서 감사합니다!
말씀해주신 문제의 원인은 여러 가지가 있을 수 있으며, 그에 따른 해결 방법도 다양합니다. 제가 생각하는 가장 가능성 높은 원인과 해결 방법을 아래에 정리 해드리겠습니다. 혹시 아래 방법으로 해결되지 않는다면, 추가 질문을 주시거나 프로젝트 코드를 dakgangjung122@gmail.com으로 보내주시면 보다 자세히 확인해드리겠습니다.
설명해주신 문제를 보면:
웹 브라우저(개발을 진행한 PC)에서는 게시판 글이 잘 보이지만,
모바일 실제 기기에서는 게시글이 보이지 않는 현상이 발생하고 있으며,
크롬 개발자 도구에서 모바일 디바이스 모드로 테스트해도 정상적으로 보이는 것으로 확인됩니다
제가 생각하는 가능성이 높은 원인은 컴퓨터에서는 배포된 프론트엔드 주소로 접속하면 프론트엔드 코드 내부에서 백엔드 주소를 localhost로 지정해둔 경우, 컴퓨터에서는 프론트와 백엔드가 모두 로컬(자기 컴퓨터)에서 돌아가니까 문제없이 동작합니다.
하지만 휴대폰에서는 localhost는 휴대폰 자신의 내부 주소를 가리키기 때문에 프론트엔드에서 보낸 API 요청이 실패하고, 결과적으로 게시글이 안 보이는 겁니다.
외부 모바일 기기에서 localhost로 API 요청을 보내면, 이는 컴퓨터의 localhost가 아닌 '휴대폰 자체'를 가리키게 됩니다. 따라서 컴퓨터에서 실행 중인 백엔드 서버까지 요청이 도달하지 않아 통신이 실패하게 됩니다.
해결 방법으로는 제가 강의 중간에 프론트엔드 폴더에 .env 파일을 만들고 전역적으로 백엔드 주소를 정의한 적이 있습니다.
// .env 파일
VITE_API_URL=배포된 백엔드 주소백엔드까지 배포 후에 프론트엔드의 .env 파일을 수정하시면 될 것 같습니다!
궁금하신 점이 해결되셨길 바랍니다!
혹시 더 도움이 필요하시거나 추가 질문이 있으시면 언제든지 편하게 문의해주세요.
네 맞습니다!
정식 배포 전에 먼저 ngrok을 이용해 프론트엔드와 백엔드를 임시로 배포해주세요. 그리고 .env 파일 또는 실제 요청이 이루어지는 백엔드 API 주소를 ngrok 주소로 임시 교체한 뒤,
1차적으로는 개발에 사용한 컴퓨터에서 게시판이 정상적으로 로딩되는지 확인하고,
2차적으로는 휴대폰 등 다른 디바이스에서 프론트엔드 ngrok 주소로 접속했을 때 게시판이 제대로 뜨는지 확인해 주세요.
이 과정을 순차적으로 점검해주시면 됩니다!
ngrok http http://localhost:포트넘버터미널 두개 띄워서 하나는 프론트, 하나는 백엔드 배포하려고 했는데 프론트 배포하니까 백엔드 시도하다가 에러난거 보니까 무료버전이라 배포를 하나밖에 못하는거 같습니다 ㅋㅋ
ERROR: authentication failed: Your account is limited to 1 simultaneous ngrok agent sessions.
ERROR: You can run multiple simultaneous tunnels from a single agent session by defining the tunnels in your agent configuration file and starting them with the command ngrok start --all.
ERROR: Read more about the agent configuration file: https://ngrok.com/docs/secure-tunnels/ngrok-agent/reference/config
ERROR: You can view your current agent sessions in the dashboard:
ERROR: https://dashboard.ngrok.com/agents
ERROR:
ERROR: ERR_NGROK_108
ERROR: https://ngrok.com/docs/errors/err_ngrok_108
ERROR:
답변해주셔서 감사합니다. 다른 방법 찾아봐야겠네요. 강의 잘 들었습니다!
죄송합니다. 무료 버전에서는 두 개 이상의 서비스를 동시에 배포할 수 없다는 점을 미처 고려하지 못했습니다.
번거로우시겠지만, 백엔드는 ngrok을 통해 배포하시고, ngrok로 생성된 주소를 프론트엔드의 .env 파일에 반영해 주시면 됩니다. 이후 프론트엔드는 ngrok 다음으로 가장 간편하게 배포할 수 있는 Firebase Hosting을 활용하시는 것을 추천드립니다.
이 방법은 제가 다른 강의에서도 소개한 바 있습니다.
아래 강의의 10-4강(무료 공개)에서 자세한 내용을 확인하실 수 있으니 참고해 주세요:
🔗 자바스크립트 GUI 개발 Part 1 - Inflearn 강의
감사합니다!
0
안녕하세요, 인프런 AI 인턴입니다. ys5133님께서 배포 후 모바일에서 접속했을 때 게시판 게시글이 보이지 않는 문제에 대해 문의 주셨군요. 아래에 몇 가지 원인과 해결 방안을 제시하겠습니다.
문제의 원인
사용자 인터페이스: 모바일 화면에서 CSS 스타일링이나 화면 표시 방식이 달라질 수 있습니다. 모듈이나 컴포넌트가 모바일 환경에 맞도록 최적화되지 않았을 수 있습니다.
네트워크 요청 차단: 모바일 환경에서 일부 요청이 차단될 수 있습니다. 특히 API 호출이 모바일 환경에서 제대로 이루어지지 않는 경우, 데이터가 표시되지 않을 수도 있습니다.
브라우저 호환성 문제: 모바일 브라우저에서 사용하는 JavaScript나 CSS 설정이 데스크톱과 다를 수 있으며, 이로 인해 제대로 렌더링되지 않을 수 있습니다.
해결 방법
CSS 미디어 쿼리 확인: CSS 코드에 미디어 쿼리가 웹과 모바일 환경 모두에 적용되어 있는지 확인해 주세요. 혹시 모바일에서는 숨겨지는 설정이 있지는 않은지 살펴보세요.
API 호출 및 CORS 설정: 모바일 기기에서의 API 요청이 제대로 이루어지는지 네트워크 탭에서 확인해 보고, 필요한 경우 서버의 CORS 설정을 점검해 보세요.
브라우저 차이점 고려: 모바일 브라우저의 경우 일부 기능이 제한적일 수 있습니다. 따라서 최신 버전의 브라우저를 사용하고, 개발자 도구에서 얻을 수 있는 정보 또는 오류 메시지를 확인해 보세요.
배포 설정 점검: Vercel이나 Cloudtype과 같은 배포 플랫폼에서 모바일 환경에 대한 추가적인 설정이나 제한이 있는지 확인합니다.
참고 자료
- React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 애플리케이션 배포 가이드
- 배포관련 질문드립니다.: 배포 시 발생할 수 있는 일반적인 문제에 대한 조언을 제공합니다.
질문을 해결하는 데 도움이 되었길 바랍니다. 더 궁금한 점이 있으시면 언제든지 문의 주세요.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
백엔드 배포 후에 forwarding의 주소를 프론트엔드 .env 파일에 배포 주소 작성하고 api 요청 주소를 프론트엔드도 다시 배포하면 되는건가요?
위 코드처럼 모든 api 호출 로직에서 요청 주소를 변경해주고
강의영상에서 프론트엔드 배포한거처럼 백엔드도 똑같이 ngrok으로 배포하고 테스트해보면 되나요?