맨날 알고도 잊어버리는 내용이기에 정리하려 합니다.
로컬에서 마크업 작업을 하고 서버에서 테스트 그리고 모바일 환경에서도 확인하기 위해선 외부에서 접속을 허용해줘야 합니다.
우선 인바운드나 아웃바운드 설정을 통하여 같은 IP(와이파이) 엿을 때 접속 가능하게 할 수 있습니다.
그럼 우선 인바운드와 아웃바운드에 대해 설명 하겠습니다.
인바운드
- 내부를 향한다.
- 서버 내부로 들어온다.
- 서버 또는 네트워크 내부로 진입
- 클라이언트 --> 서버
- 클라이언트가 업로드할 때
인바운드 규칙
- Windows 방화벽 기본설정 : 모든접속 차단
- 자신의 컴퓨터로 들어오기 시작하는 네트워크 데이터
아웃바운드
- 밖으로 향한다.
- 서버 밖으로 나간다.
- 서버 또는 네트워크 영역 외부로 송출
- 서버 --> 클라이언트
- 클라이언트가 다운로드할 때
아웃바운드 규칙
- Windows 방화벽 기본설정 : 모든접속 허용
- 자신의 컴퓨터로 나가기 시작하는 네트워크 데이터
여기서 들어오는 것과 나가는 것은 IP, Protocol, Port, 패킷, 네트워크, 호스트, 도메인, 정책 등을 말합니다.
참고 : http://m.blog.naver.com/blogpyh/220731762459
우선 임의적인 포트를 설정하여 서버를 만들어다고 합시다.
저는 7036이라는 포트를 만들어 어떠한 경로의 디렉토리를 바라보게 설정하였습니다.
http://localhost:7036/나머지 경로.../
경로를 설정한 디렉토리에 index.html 파일이 있다면 바로 볼 수 있지만 없다면 해당디렉토리의 뒷경로까지 작성해 줍니다.
다음은 인바운드 설정을 합니다.
1, 제어판 - Windows 방화벽 클릭!

2. 왼쪽 메뉴에서 고급설정 클릭!

3. 왼쪽 메뉴에서 인바운드 규칙, 아웃바운드 규칙 확인 (인바운드 규칙 클릭!)

이제 포트를 개방하는 설정을 합니다.
1. 오른쪽 새 규칙 클릭!

2. 포트 선택

3. TCP(T) 선택, 특정 로컬 포트(S) 선택하면 설정한 포트 번호를 입력한다. (7036)

4. 연결 허용(A) 선택

5. 기본으로 3가지를 확인하고 다음 클릭!

6. 이름을 기입 및 설명을 기입하고 마침 클릭! (이름은 예) 7036포트 개방, 설명은 굳이 안써도 됩니다.)

7. 끝.
그럼 포트를 개방하였으니 외부에서 접속해 보겠습니다.
(같은 와이파이 여야 합니다. 완전 외부에서 의 접속은 다른방법의 방법으로 설정하여야 합니다.)
본인의 PC에서
http://localhost:7036/나머지 경로.../
위 경로로 접속하면 나오지만 즉 localhost 란 내 자신이란 뜻이기 떄문에 외부 망에서 localhost로 접속하며 절대 접속할 수 없습니다.
외부 접속을 하기 위해서는 접속을 허용한 PC의 IP주소를 확인 해야 합니다.
Win + R 키를 누르면 실행이 나오고 그곳에 cmd 를 치고 확인을 누르면

command 창이 나옵니다.

ipconfig 이라는 명령어 실행!!!
IPv4 주소를 확인해 줍니다.
자 그럼 모바일에서 같은 와이파이에 접속한 후 http:// (자신의 IPv4 주소) /나머지 경로.../
그럼 모바일에서 접속한 화면을 확인하실 수 있습니다. 이제 모바일이나 다른 기기에서도 실제 테스트 할 수 있겠네요.
다른 좋은 방법이 있다면 댓글 부탁드립니다. ^^