Skip to content

Manual(한국어)

Jump to bottom
YeJun, Jung edited this page Sep 13, 2023 · 7 revisions

dev-proxy 소개

dev-proxy는 웹 개발자들이 개발과정에서 손쉽게 웹 페이지를 테스트하고 CORS오류 없이 API연결 테스트를 진행할 수 있도록 도와주는 프록시 서버 소프트웨어 입니다.

특징과 기능들

  • 로컬 혹은 외부 서버 프록시 기능
  • 로컬 정적파일(HTML, CSS, JS, Image, Video) 배포 서버
  • Websocket 프록시 기능
  • Websocket을 기반으로 하는 실시간 통신 프로토콜 프록시 지원(socket.io, SignalR)
  • 관리용 Web UI 제공

dev-proxy 다운로드

  • v2 release
  • 자신의 환경(운영체제)에 맞는 프로그램을 다운로드 합니다.
  • Windows 환경의 경우 프로그램의 파일 확장명으로 .exe를 추가해 주세요.
  • Unix/Linux 환경의 경우 프로그램에 실행 권한을 추가해 주세요. (chmod +x ./dev-proxy)
  • 프로그램을 실행합니다.

관리용 페이지 접속

스크린샷 2023-09-14 오전 12 52 34
  • 프로그램 로그에 적혀 있는 서버 주소와 포트를 확인합니다.
  • http://(서버주소)/dev-proxy/admin을 웹 브라우저 주소창에 입력합니다.
admin-page
  1. 설정 파일
    • JSON 포맷으로 저장됩니다.
    • 설정 파일은 사용자 환경에 따라 프로그램이 자동으로 위치를 설정합니다.
    • 모든 설정은 파일로 저장되어 프로그램을 종료하더라도 내용을 유지합니다.
    • 파일이 존재하지 않는 경우 새롭게 파일을 생성합니다.
  2. 설정 파일 직접 편집
    • 설정 파일을 직접 편집할 수 있습니다.
    • JSON 문법을 잘못 작성하거나 정해진 포맷을 벗어나면 저장이 되지 않습니다.
  3. 설정 파일 불러오기
    • 설정 내용을 저장해 두었다가 불러올 수 있습니다.
  4. 서버 접속 주소
    • 서버에 접속하기 위한 IP주소와 Port번호 입니다.
    • 사용할 수 없는 IP주소 혹은 다른 프로세서가 점유중인 Port번호를 입력하는 경우 서버가 동작하지 않거나 다른 IP, Port가 자동 설정될 수 있습니다.
  5. 프록시 설정
    • dev-proxy는 proxy와 static 두가지 모드를 제공합니다.
    • proxy 모드는 다른 웹 페이지나 API 서버에 dev-proxy 접속 주소로 접속할 수 있도록 합니다.
    • static 모드는 로컬에 저장된 정적파일(HTML, CSS, JS, Image, Video, 등)을 dev-proxy 접속 주소로 배포합니다.
    • Name 항목에는 이름을 적절하게 입력합니다.
    • URL 항목에는 프록시 하려는 서버 주소 혹은 정적파일 폴더의 상대/절대 위치를 입력합니다.
    • Set Item 버튼을 클릭하여 설정을 확정합니다.
    • 기존 항목을 선택하면 수정할 수 있습니다. (역시 Set Item 버튼을 클릭하여 확정합니다)
  6. 변경된 설정을 저장합니다.

접속 시도

  • 미리 설정해둔 프록시의 Name 항목을 기억해 둡니다.
  • http://(서버주소)/(Name)으로 접속합니다.

외부 인터넷에서 dev-proxy로 접속

  • 서버의 IP주소를 0.0.0.0:80으로 변경합니다.
  • 서버의 방화벽 설정에서 80포트를 개방합니다.
  • 환경에 따라서 공유기의 포트포워딩 설정이 추가로 필요할 수 있습니다.
  • !!주의사항!! dev-proxy는 개발용으로만 사용하시고 절대 웹 페이지를 대중에 배포하는 용도로는 사용하지 마시기 바랍니다. (심각한 보안문제 발생)

참고: SOP와 CORS

  • SOP: Same-Origin Policy
    • 현대 웹 브라우저는 지금 접속중인 웹 페이지의 Origin을 벗어난 서버로 비동기 통신을 시도할 경우 보안오류를 나타냅니다.
    • 이는 일반 사용자의 안전한 웹 서핑을 위한 기본적인 조치로서 사용자의 정보를 수상한 서버로 전송하는 것을 차단합니다.
  • CORS: Cross Origin Resource Sharing
    • SOP의 예외조항을 설정하는 것을 CORS라고 하며 서버에서 웹 브라우저에게 응답을 돌려줄때 Header에 설정 내용을 명시합니다.
  • dev-proxy는 외부 서버의 Origin을 dev-proxy의 Origin으로 둔갑하여 보내주기 때문에 웹 브라우저 입장에서는 보안오류가 생기지 않는 것입니다.
  • 또한 dev-proxy는 모든 Origin에 대해서 CORS를 허용하기 때문에 dev-proxy를 통해서 어느 서버로든 요청을 보낼 수 있습니다.
  • 하지만 이는 개발자를 위한 소프트웨어 이며 절대 dev-proxy를 사용하여 웹 페이지를 배포해서는 안된다는 것을 기억하세요!

추가: 버그 발견시!

  • Github Issues 페이지에 새로운 이슈를 추가해 주세요.
  • 로그 내용과 스크린샷 그리고 운영체제나 실행 환경을 같이 적어주시면 문제 해결에 도움이 됩니다.
Clone this wiki locally