✅ 실습환경 세팅
① 가상 머신 다운로드 & VMBox에서 임포트
▶ 가상머신 다운로드 → 가상머신 다운로드
▶ 파일 > 가상머신 가져오기
▶ 가져올 가상머신 선택
② Terminus 설치 및 환경 세팅
▶ Terminus 설치(Windows 버전) → Terminus 설치
📌
Terminus란?
: 다양한 플랫폼에서 사용할 수 있는 현대적인 SSH 클라이언트
- 다양한 프로토콜 지원
↳ SSH, SFTP, Telnet, Serial Port 등 다양한 프로토콜을 지원- 포트 포워딩 지원
↳ 포트 포워딩 기능을 통해 보안이 강화된 환경에서도 유연한 접속이 가능
▶ 다운받은 Segfault_VM 실행 → ip주소 확인(ip a)
⚠️오류 발생
➡️ 가상머신에서 실제 네트워크 어댑터가 연결되었지만, 현재 비활성화(DOWN 상태)
➡️ 그래서 IP도 못 받고, 인터넷도 안되고,ping도 안됨.
🎯 해결 방법
1. 네트워크 인터페이스(장치) 정보 확인
ip link→ 나의 네트워크 인터페이스는enp0s17
2. 네트워크 설정을 직접 수정하기
sudo nano /etc/netplan/00-installer-config.yaml
3. 설정 반영
sudo netplan apply
3. roboot 하기
reboot
4. 네트워크 확인하기
ip a
💡NAT에서는 외부에서 VM으로 접속 불가
↳ Terminus는 로컬 터미널과 다르게호스트(내PC) → 게스트(가상머신)으로 접속하는 구조
↳ 네트워크 모드가 NAT이라면, 외부(호스트 컴퓨터 또는 Terminus)에서 VM(게스트)로 직접 접속 불가능
- 현재 VM은 NAT 연결 상태 → Terminus로 접속 불가한 상태
- 🆗해결방법: "브리지 어댑터"로 네트워크 모드 변경
↳ VM설정 → [네트워크] → 어댑터 1 → 브리지 어댑터로 변경
↳ VM 부팅 후ip aIP가192.168.x.x형태인지 확인
▶ Terminus에서 Host 등록
➡️ 192.168.35.69 IP 주소로 SSH 접속
➡️ 접속 완료!
✅ 웹 서버의 역할
📌 웹 서버란?
클라이언트의 요청을 받아, 정적 파일을 보내거나, 백엔드 프로그램과 연동하여 동적 콘텐츠를 응답하는 시스템
쉽게 말해, 파일을 웹 브라우저에 전달하는 역할을 함.
▶ http 웹 서버 실행하기
📢 Segfault_VM 실행시킨 상태여야 함.
↳ VM 안에서 ssh서버(sshd)가 동작 중이여야 terminus의 접속을 받아줄 수 있다.
↳ ssh서버가 실행 중인지 확인(ps aux | grep sshd)
•
sudo python3 -m http.server 80명령어를 사용
➡️ 80번 포트로 http 웹 서버를 실행하겠다는 의미student@segfault:~/webBasic$ sudo python3 -m http.server 80 Serving HTTP on 0.0.0.0 port 80 (http://0.0.0.0:80/) ... ➡️ 현재 웹 서버가 실행된 위치가 Web Root 경로(=기준)이 된다. student@segfault:~/webBasic$ pwd /home/student/webBasic ➡️ 즉, Web Root는 /home/student/webBasic 이 된다☑️ 현재 웹 서버의 web root 경로는
/home/student/webBasic
💡Web Root (웹 루트) 란?
↳ 웹 서버가 웹 브라우저 요청에 대해 파일을 찾아주는 시작위치
↳ 즉, 웹 루트는 웹 서버가 "파일을 여기서부터 찾는다"라고 약속한 시작 디렉터리
↳ 웹 루트 밖의 파일은 브라우저에서 접근 불가! (웹 루트경로의 위에 있는 파일들 접근 불가)
↳ 웹 루트 경로는 웹 서버마다 다름. (물론, 설정 파일에서 변경 가능)
• Apache →/var/www/html
• Nginx →/usr/share/nginx/html
• XAMPP(Windows) →c:\xampp\htdocs
▶ 웹 브라우저를 통해 요청 전달하기
🤔 웹 서버는 요청한 파일을 전달해주는 역할을 한다는데, 웹 브라우저를 통해서 파일을 어떻게 요청하는거지??
➡️ [Protocol]://[domain 또는 IP Address]:[Port]/[File Path]
➡️ [Protocol]://[domain 또는 IP Address]:[Port]/[File Path]?[parameter명]=[parameter값]
➡️ 예시) http://192.168.35.69:80/normaltic_pic.jpeg
📝 (example 1) normaltic_pic.jpeg 파일을 요청해보자.
‣ 브라우저에http://192.168.35.69:80/normaltic_pic.jpeg의 url을 입력하고 엔터 → normaltic_pic.jpeg 사진 출력됨.
📝 (example 2) normal_dir 디렉터리 생성하고 내부에 있는 test.txt 파일을 요청해보자
‣ normal_dir 생성 및
/home/student/webBasic경로에서 웹 서버 실행student@segfault:~/webBasic$ mkdir normal_dir student@segfault:~/webBasic$ ls normal_dir normaltic_pic.jpeg test.txt student@segfault:~/webBasic$ cp test.txt normal_dir student@segfault:~/webBasic$ ls normal_dir test.txt student@segfault:~/webBasic$ sudo python3 -m http.server 80 Serving HTTP on 0.0.0.0 port 80 (http://0.0.0.0:80/) ...‣ 브라우저에
http://192.168.35.69:80/normal_dir/test.txt의 url을 입력하고 엔터 → test.txt 출력됨.
📝 (example 3) 웹 루트를
/home/student/webBasic/normal_dir로 바꾸고 normaltic_pic.jpeg 파일을 요청해보자.‣
/home/student/webBasic/normal_dir경로에서 웹 서버 실행
(즉, 웹 루트가/home/student/webBasic/normal_dir)student@segfault:~/webBasic$ ls normal_dir normaltic_pic.jpeg test.txt student@segfault:~/webBasic$ cd normal_dir student@segfault:~/webBasic/normal_dir$ sudo python3 -m http.server 80 Serving HTTP on 0.0.0.0 port 80 (http://0.0.0.0:80/) ...
‣ 브라우저에http://192.168.35.69:80/../normaltic_pic.jpeg입력 후 엔터 → normaltic_pic.jpeg 사진 출력됨.
‣ 하지만, normaltic_pic.jpeg 사진이 출력된 이유는 브라우저에 있던 캐시 때문이다!
‣ 브라우저 새로고침을 하면 아래처럼 화면이 표시됨.
( 해당 파일을 찾을 수 없다는 메세지가 출력된다 )
‣ 왜냐하면, 웹 서버 입장에서 웹 서버 루트 경로의 위에 있는 파일들은 접근이 불가하기 때문이다.
현재 웹 루트는/home/student/webBasic/normal_dir이고
해당 사진 파일의 경로는home/student/webBasic에 있다.
따라서, 웹 루트의 경로보다 사진 파일이 위에 위치하기 때문에 접근불가!
🤔 웹 루트 경로가 /(루트 디렉터리)라면?
- 리눅스 시스템의 최상위 디렉터리 전체가 웹 브라우저에 노출된다.
- 따라서, 리눅스 시스템에 존재하는 모든 사용자 계정 정보를 담고 있는 파일인
/etc/passwd도 노출이 되며, 심각한 보안 사고가 발생!
▶ 실전) 네이버 접속 및 탐색
• 네이버 URL → https://www.naver.com/
• 내가 배운 URL 구조 → http://192.168.50.177:80/test.txt
📝 위 두가지를 비교해보자!
☑️ 네이버 URL →
https://www.naver.com/
↳ 프로토콜:https
↳ 도메인 :www.naver.com
↳ 포트:포트 적지 않음
↳ 파일 경로:파일 경로 적지 않음
☑️ 내가 배운 URL 구조 →http://192.168.50.177:80/test.txt
↳ 프로토콜:http
↳ IP 주소 :192.168.50.177
↳ 포트::80
↳ 파일 경로:/test.txt
🆗 네이버 URL과 같은 경우, 포트 번호를 따로 적지 않아도 된다.
왜냐하면, 웰논포트에 의해https는 기본 포트가 443번으로 정해져 있기 때문이다.
따라서, 브라우저는 프로토콜에 따라 기본 포트를 자동으로 붙여서 요청해주기 때문에 포트번호를 명시하지 않아도 잘 동작한다.
🆗네이버 URL과 같은 경우, 파일명을 붙이지 않아도 된다.
왜냐하면, 웹 서버는 URL에 파일명이 없을 경우, 기본 파일(/index.html)을 찾아서 응답으로 보내준다.
🆗네이버 URL →https://www.naver.com/은https://www.naver.com:443/index.html과 같다.
💡웰논 포트란? (Well-Known Port)
➡️ 특정 서비스가 기본적으로 사용하는 포트 번호
(✓) 기본 포트가 정해져 있다고 무조건 해당 포트만 사용해야 하는 것은 아님.
(✓) 포트 번호 임의로 변경 가능.
✅ 동적 페이지 (Dynamic Page)
: 사용자나 상황에 따라 내용이 바뀌는 웹 페이지
➡️ 그냥 "파일 그대로를 보여주는 게" 아니라,
서버가 코드를 실행해서 페이지 내용을 만들어서 보여주는 웹 페이지
➡️ 예를 들어, 로그인할 때, 사용자 별로 "환영합니다 ○○님"이라고 출력되게 만들려면 동적페이지여야 한다.
그래서 동적 페이지는 "서버"가 코드를 실행해서 결과를 웹 서버에 전달하고 웹 브라우저에 표시하게 되는데,
그 서버가 WAS(Web Application Server)이다.
▶ WAS (Web Application Server)
: 동적 페이지를 처리해주는 서버
➡️ 단순한 HTML 파일만 보여주는게 아니라,
"코드"를 실행해서 결과를 만들어주는 서버이다.
➡️ 여기서 WAS가 실행하는 코드는 백엔드 코드(서버 측 코드)
➡️ 즉, 백엔드 코드를 실행시켜주는 주체가 바로 WAS
➡️ 백엔드 코드(서버측 코드): 사용자의 요청을 받아서, 서버에서 처리하고, 그 결과를 돌려주는 서버측 코드
➡️ 백엔드 언어:PHP,Python,Java,JavaScript(Node.js)등
▶ 동적 페이지 흐름
- 사용자가 브라우저에
URL요청- 웹 서버는
.php,jsp,.py등과 같은 요청을 받으면 WAS에 넘김- WAS가 코드 실행
- 결과를 HTML로 만들어서 웹 서버에 돌려줌
- 웹 서버는 그 결과를 사용자에게 전달
🆗 브라우저 → 웹서버 → WAS → 웹서버 → 브라우저
이런 흐름으로 동적 웹 서비스가 제공된다!
▶ 웹 서비스의 전체적인 기본 구조와 흐름
- Web Server: 요청을 받고 정적페이지(리소스)를 전달하는 역할
- WAS: 동적페이지 담당
- DB: 데이터 저장/조회/수정
▶ 실습
- 컨테이너 목록 확인
student@segfault:~$ ls
webBasic webDev
student@segfault:~$ cd webDev/
student@segfault:~/webDev$ ls -al
total 20
drwxrwxr-x 4 student student 4096 Oct 21 2023 .
drwxr-x--- 6 student student 4096 Oct 21 2023 ..
-rwxrw-r-- 1 student student 146 Oct 21 2023 dockerCMD
drwxrwx--- 5 student staff 4096 Oct 21 2023 mysql
drwxrwxr-x 2 student staff 4096 Oct 21 2023 webApp
student@segfault:~/webDev$ sudo docker ps -a // 실행중이거나 중단된 컨테이너 목록을 출력
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
// 실행중이거나 중단된 컨테이너 목록 없음!
// 만약 있다면,
// sudo docker rm -f [컨테이너ID]를 작성해서 삭제하기- 도커 관련 웹 환경(Apache, PHP, MySQL) 도커 컨테이너을 자동 실행시키는 스크립트인
dockerCMD실행
☑️
docekrCMD스크립트 내용 확인student@segfault:~/webDev$ cat dockerCMD #!/bin/bash sudo docker run -p "1018:80" --name studentWeb -v ${PWD}/webApp:/app -v ${PWD}/mysql:/var/lib/mysql mattrayner/lamp:latest-1604-php7➡️ 웹 개발 환경(LAMP: Linux + Apache + MySQL + PHP)을 실행하는 Docker 컨테이너를 만들어주는 스크립트
•docker run: 컨테이너 실행 명령
•-p "1018:80": 호스트의 1018번 포트 → 컨테이너의 80번 포트로 연결 (웹서버용)
•--name studentWeb: 컨테이너 이름을studentWeb으로 지정
•-v ${PWD}/webApp:/app: 현재 디렉토리의webApp폴더 → 컨테이너의/app경로로 마운트
•-v ${PWD}/mysql:/var/lib/mysql: 현재 디렉토리의mysql폴더 → 컨테이너의 MySQL 데이터 디렉토리로 마운트
•mattrayner/lamp:latest-1604-php7: 사용한 도커 이미지 (Ubuntu 16.04 + PHP7이 포함된 LAMP 스택)
☑️ 백그라운드에서
dockerCMD실행student@segfault:~/webDev$ ./dockerCMD & [1] 2195 student@segfault:~/webDev/webApp$ sudo docker ps -a CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES 26835c165ae3 mattrayner/lamp:latest-1604-php7 "/run.sh" 32 minutes ago Up 32 minutes 3306/tcp, 0.0.0.0:1018->80/tcp, [::]:1018->80/tcp studentWeb이
dockerCMD를 실행함으로써,
1.webApp폴더 안의 파일이 컨테이너의/app에 복사되면서 웹서버에서 실행됨
( webApp폴더는 Apache웹서버에서 웹 루트(/app)로 쓰이는 디렉토리에 연결되어 있다.)
2.mysql폴더는 MySQL의 데이터 저장소가 됨
3. 브라우저에서http://[ip 주소]:1018로 접속하면 웹 페이지 볼 수 있다.
💡 즉, 웹 루트가/home/student/webDev/webApp이다!
↳ 해당 경로에 테스트용으로 index.php 파일을 만들어서 화면에Hello web server글자를 띄어보자.student@segfault:~/webDev/webApp$ echo "<?php echo 'Hello web server'; ?>" > ~/webDev/webApp/index.php
📌 vscode의 sftp 플러그인
: 로컬 vscode에서 수정하면, 그 변경사항이 자동으로 원격서버에 반영된다. 그래서 서버에 직접 접속하거나, scp로 매번 복사할 필요 없이 편하게 사용 가능!
☑️ 예시) score.php 만들기
student@segfault:~/webDev/webApp$ vim score.php <html> <h1>Score</h1> <h2>Name : <?php echo $_GET['name']; ?></h2> </html>
- GET : 파라미터를 URL에다가 붙여서 전달.
➡️http://[ip 주소]:1018/score.php?name=kaia에 접속
➡️name이라는 파라미터 값을 받아서 출력한다.
➡️ url에?name=kaia처럼 name 파라미터에 kaia라는 값을 넣어준다.
✅ PHP 맛보기
▶ 파라미터 전달법 ( GET/POST )
▷ 이름을 출력하는 페이지 만들기( name.php )
1. GET 방식
student@segfault:~/webDev/webApp$ vim name.php <form method="GET"> <input type="text" name="id"/> </form> <?php echo $_GET['id']; ?>
➡️
kaia를 입력 후 enter를 하면, id라는 파라미터에 해당 문자열(kaia)가 들어가고
➡️ id라는 파라미터에 저장되어 있는 문자열 kaia를 가지고 php파일 실행
2. POST 방식
student@segfault:~/webDev/webApp$ vim name.php <form method="POST"> <input type="text" name="id"/> </form> <?php echo $_POST['id']; ?>
💡
GET방식과POST방식의 차이점
POST방식은GET방식과 다르게 URL에 데이터 담지 X
→ 그럼 어떻게 데이터를 전송하는거야?
→ HTTP 메세지의 request body 부분에 데이터를 넣어서 보냄
→ 그렇기 때문에 URL에 노출되지 않고 데이터를 숨길 수 잇다.
🎯 정리
● 웹 서버에 데이터를 전달하는 방식 (2)
‣GET방식
‣POST방식예를 들어, 로그인 페이지를 만들 때는 보안의 문제가 있으니
POST방식이 더 적절하겠지.
▶ 파라미터를 다른 페이지로 전달하는 방법
▷ 로그인 페이지 만들기 ( login.php )
student@segfault:~/webDev/webApp$ vim login.php <form method="GET"> <input type="text" name="id" placeholder="User Id"/> <input type="password" name="pass" placeholder="User Password"/> <input type="submit" value="login"/> </form>
📢 파라미터를 구분할 때는 &를 사용
▷ 입력한 id와 passwd를 한 줄로 출력하는 페이지 만들기( login_proc.php )
student@segfault:~/webDev/webApp$ vim login_proc.php <?php echo $_GET['id']; echo $_GET['pass']; ?>
😊 login.php 페이지에서 입력한 id와 pass 값을 login_proc.php로 전달해서 한 줄로 출력되게 하고 싶어!
( => id와 pass 파라미터를 login_proc.php라는 다른 파일에 전달하고 싶다는 의미)
➡️그럴땐 action을 통해 전달하고 싶은 페이지를 적으면 된다!
▷ 로그인 페이지에 action 추가
student@segfault:~/webDev/webApp$ vim login.php <form method="GET" action="login_proc.php"> <input type="text" name="id" placeholder="User Id"/> <input type="password" name="pass" placeholder="User Password"/> <input type="submit" value="login"/> </form>➡️
id와pass파라미터를 전달할 페이지(login_proc.php)를action=login_proc.php로 적으면 된다!
➡️id와 password를 입력한 후 enter
➡️login_proc.php페이지로 이동하여 id와 pass를 한 줄로 출력함.
