웹 개발 기초 공부

웹 서버

• 파일을 전달하는 친구

웹 브라우저

• 웹 서버로부터 전달받은 파일을 보기 좋게 변환하거나, 이미지 파일을 적용하거나, 텍스트를 바꾸는 등 더 테크니컬한 작업을 하는 친구

 

환경설정

VMware 가상머신을 설치하고 APM 패키지 파일을 다운로드해서 시작했습니다.

sudo python3 -m http.server 80

• sudo: 최고 권한 사용자(root)로 실행하겠다는 의미
• 파이썬으로 서버를 실행하고 포트 80으로 설정 (중간에 -m은 파이썬에서 모듈을 실행할 때 쓰는 명령어)

 

비밀번호를 입력하면 서버가 열립니다.

 

웹 브라우저를 열고 URL을 입력해주면 되는데, 먼저 URL이 무엇인지, 그리고 그 구성 요소는 어떻게 되는지 알아보겠습니다.

 

URL이란

• 웹 서버에 자료를 요청하는 링크입니다.

URL의 구성 요소

• 일반적으로 URL의 주소 규칙은 다음과 같이 적용됩니다.

[protocol]://[Domain or IP Address]:[port]/[File Path]

• [protocol]: 웹 서버와 통신할 방식을 정의
• [Domain or IP Address]: 웹 서버의 위치가 도메인인지 주소인지 파악
• [port]: 서버와 상호작용하는 네트워크 포트 번호
• [File Path]: 상호작용할 디렉토리의 파일 위치

 

예시

https://192.157.23.187:80/sol <-[자료를 요청할 파일 경로] 이렇게 구성됩니다

위의 URL은 자료를 요청할 파일 경로를 나타냅니다. 이 파일 경로는 서버가 어디에서 실행되느냐에 따라 옮길 수 있는 파일과 옮길 수 없는 파일이 결정됩니다. 이는 뒤에서 좀 더 자세히 설명하겠습니다.

 

Web Root 경로

서버를 실행한 경로가 기준이 됩니다. 이 경로에서 불러오고 싶은 파일을 전송하면 됩니다.

"ls" 명령어를 이용해 현재 서버를 연 디렉토리의 파일 목록을 확인할 수 있습니다.

예를 들어, 내가 text.txt 파일을 서버로부터 받고 싶다면
웹 브라우저에서 192.157.23.178/text.txt를 URL 주소창에 입력하면 text.txt 파일이 출력되는 것을 볼 수 있습니다.

 

이쯤 되면 한 가지 의문이 생길 수 있습니다. 위에서 언급한 ":80" 포트 부분은 어디로 갔을까요?

"80" 포트는 *사회적 약속*이라고 생각하시면 됩니다.

• http -> 80
• https -> 443

이것은 웹에서 정해진 규칙입니다. 우리가 HTTP를 입력하고 파일을 요청했기 때문에 컴퓨터는 자동으로 포트 번호를 80으로 받아들이고 text.txt 파일을 출력해준 것입니다.
이를 *웰노운 포트*라고 합니다.

 

여기서 또 다른 의문이 생길 수 있습니다.

그러면 80번 포트만 사용할 수 있는 걸까요?

아닙니다! 임의의 포트 번호를 입력해서 서버를 열어도 됩니다.
하지만 약속된 포트 번호(80)가 아니므로 반드시 포트 번호를 기입해줘야 합니다.
예를 들어, :4567/test.txt처럼 말이죠.

 

👋이해돕기

 

추가적으로 한 가지 더 설명하고 싶습니다.

http://youtube.com에 접속했을 때 "내가 요청하지도 않은 HTML 파일이 바로 보여지네? 이건 뭐지?"라고 생각할 수 있습니다. 이것 역시 사회적 약속입니다.

포트 뒤에 아무것도 없을 때는 index 파일을 보여주도록 설정되어 있습니다.

 

👋이해돕기

 

"touch index.html" 명령어를 통해 HTML 파일을 만들 수 있습니다.

만들어진 index.html 파일에 "nano index.html"을 입력하고 내용을 추가할 수 있습니다.
그런 다음 index.html 파일이 있는 경로에서 서버를 열어주고,
브라우저의 URL 창에 서버 주소만 입력하면 추가한 내용을 그대로 출력할 수 있습니다.

 

만약 내가 불러오고 싶은 파일이 현재 경로보다 상위 디렉토리에 있다면,
그 파일은 불러올 수 없다고 앞서 언급한 바 있을겁니다. 이해돕기를 통해 이 말이 대체 무슨뜻인지 간단하게 알아보죠

 

👋 이해돕기

/home/student/WebBasic/sol에서 파일을 열면 경로는 sol에서부터 시작합니다.

내가 WebBasic에 있는 text.txt 파일을 불러오고 싶지만, 불러오지 못합니다.
이는 WebBasic이 text.txt의 상위 디렉토리이기 때문입니다

 

이를 해결하는 방법은?

파일을 하위 디렉토리로 이동: 상위 디렉토리에 있는 파일을 서버가 실행된 디렉토리나 그 하위 디렉토리로 옮겨서 접근할 수 있습니다.

• 예: text.txt를 /home/student/WebBasic/sol/ 디렉토리로 이동