도커 실습 4 - php mysql 연결 및 tasks app 개발 > 도커 & 쿠버네티스(2024)

본문 바로가기

도커 & 쿠버네티스(2024)

[실습] 도커 실습 4 - php mysql 연결 및 tasks app 개발

필기자
2024-10-15 22:54 2,896 0
  • - 첨부파일 : app.zip (5.1K) - 다운로드
  • - 첨부파일 : app.js (3.2K) - 다운로드

본문

※ 주의 첫번째 파일 app.zip 실습 한 이후 -> 프론트와 서버 분리하고 두번째 파일 app.js 덮어 씌우세요. 

목차

  • php, mysql 컨테이너 실행
  • 개발 환경 구축 및 tasks app 설치
  • front, back end 컨테이너 분할


php, mysql 컨테이너 실행

공유 네트워크 생성


# php-mysq 네트워크 생성
docker network create php-mysql

2049277881_3i71fGnS_023abd169e3fab3a3c7492a76a85e110d4ae7242.png

mysql 컨테이너 실행

# 컨테이너 명 : mysql
# 네트워크 : php-mysql
# root 패스워드 : 123456
# database : php-mysql
# 사용자 계정 : php-mysql
# 사용자 패스워드 : 123456
# 포트포워드 : 33306:3306

docker run --name mysql -dit -p 33306:3306 --net php-mysql -e MYSQL_ROOT_PASSWORD=123456 -e MYSQL_DATABASE=php-mysql -e MYSQL_USER=php-mysql -e MYSQL_PASSWORD=123456 mysql:8.0 --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci

# docker run --name mysql -dit -p 33306:3306 --net php-mysql -e MYSQL_ROOT_PASSWORD=123456 -e MYSQL_DATABASE=php-mysql -e MYSQL_USER=php-mysql -e MYSQL_PASSWORD=123456 mysql:8.0 --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci --default-authentication-plugin=mysql_native_password

2049277881_Atwie4FK_0b0da6be09bd1889f217bc44ab4daf3efe9ae4de.png

php-apache 컨테이너 설치를 위한 디렉토리 생성

# html 디렉토리 생성
mkdir html
mkdir myphpimage


Dokerfile 생성

cd myphpimage
nano Dockerfile


FROM php:8.0-apache

# 필요한 모든 확장을 활성화
RUN apt-get update && \
    apt-get install -y zlib1g-dev libpng-dev && \
    docker-php-ext-install mysqli pdo pdo_mysql gd iconv opcache


Dockerfile 빌드 한후 이미지 생성

# 이미지 빌드
# 명령어 마지막 . 은 현재 경로
docker build -t myphpimage ./

2049277881_fRZdmXzv_d7cf97d290bc95f538c8396448987fcd67ddba12.png

생성한 이미지 기반 myphp 컨테이너 설치

# 컨테이너 명 : myphp
# 네트워크 : php-mysql
# 포트포워드 : 80:80
# 바인딩마운트 : ~/html:/var/www/html

docker run -d -p 80:80 --name myphp --net php-mysql -v ~/html:/var/www/html myphpimage

2049277881_yZnzR73G_64b773bf38631409dedcbabe8f16e3e3beaad0f1.png

네트워크 상세 정보에서 구성 컨테이너 확인

# 네트워크 상세 정보
docker network inspect php-mysql

2049277881_JiIA5lpN_f295155d9c28092a4fe862471a2c9e0388fc2511.png

게스트(ubuntu) 컴퓨터에 ssh 서버 설치

#sshd 설치
sudo apt update
sudo apt install openssh-server
sudo systemctl status ssh
sudo systemctl enable ssh

2049277881_qL6IeT0f_3339fbd4e975c3433d41bbdd17941c7f6db7301f.png

개발 환경 구축 및 tasks app 설치

PC에서 VSCode 설치 및 SSH 접속

20240222133604_1b7cf81cceba86daf1b6fadf10def42d_ty4f.png

20240222134343_ce6bcee2c81d3115e6eabf54d63fe06d_manw.png
 
  • VSCode SSH 클라이언트 설치
    • Remote Development 설치 : 좌측 확장 아이콘 > remote 검색 > Remote Development Install
20240222134457_ce6bcee2c81d3115e6eabf54d63fe06d_cf5l.png

20240222134548_ce6bcee2c81d3115e6eabf54d63fe06d_q3c1.png
  • VSCode SSH 클라이언트 설정
    • SSH 설정 : F1 버튼 > ssh 검색 > Add New SSH Host 선택 > 본인아이디@우분투아이피 입력 > config 파일에 저장
20240222134753_ce6bcee2c81d3115e6eabf54d63fe06d_upt5.png

20240222135001_ce6bcee2c81d3115e6eabf54d63fe06d_nep3.png

20251008111907_1742b9dbe3d8b5fc3b7ba01a15e2cdca_63nd.png

 
  • VSCode에서 라즈베리파이 SSH 접속
    • 좌측 원격 아이콘 클릭 > REMOTES EXPLORER에서 우분투 아이피 클릭 > Linux 선택 >비밀번호 입력(2323) > 접속 확인
20251008112114_1742b9dbe3d8b5fc3b7ba01a15e2cdca_hqwx.png

20251008112154_1742b9dbe3d8b5fc3b7ba01a15e2cdca_4934.png

20251008112229_1742b9dbe3d8b5fc3b7ba01a15e2cdca_dfij.png

20251008112334_1742b9dbe3d8b5fc3b7ba01a15e2cdca_268k.png
 
  • 작업 폴더 열기
    • 좌측 탐색기 아이콘 클릭 > Connected to remote > Open Folde 버튼 클릭 > /home/본인아이디(kkl)/ 선택 > OK 버튼 클릭
20251008112403_1742b9dbe3d8b5fc3b7ba01a15e2cdca_zayy.png

20251008112438_1742b9dbe3d8b5fc3b7ba01a15e2cdca_6gu0.png
 
  • HTML Files, XML Files 등등 설치

html 폴더에 첨부 파일 tasks app 설치 > myphp 컨테이너의 /var/www/html 과 동기화

20251008112548_1742b9dbe3d8b5fc3b7ba01a15e2cdca_6xbz.png
20251008112934_1742b9dbe3d8b5fc3b7ba01a15e2cdca_gg2r.png

호스트(windows) 컴퓨터 크롬에서 게스트(ubuntu) 컴퓨터 tasks app(myphp 컨테이너)에 접속
2049277881_TWjPLVcx_84cec4d9d888d3971d639ea2ad273503e8433588.png
호스트(windows) 컴퓨터에서 게스트(ubuntu)를 통해 mysql 컨테이너 접속
2049277881_REpI8sZx_e72665b206269806e0a0e7bd06ee263c317fb6c6.png

tasks app(myphp 컨테이너) DB 테이블 생성
  • php-mysql > 쿼리

CREATE TABLE task (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(255) NOT NULL,
    description TEXT,
    due_datetime DATETIME
);

2049277881_952LycmN_97420746ffcb94dfa0957af7b70fb1785e27de6f.png

게스트(ubuntu) 컴퓨터에 tasks app(myphp 컨테이너) DB 접속 설정 및 동작 확인
  • database.php 파일 수정

$mysql_host = "mysql";
// docker inspect -f '{{range .NetworkSettings.Networks}}{{.IPAddress}}{{end}}' mysql
$mysql_user = "php-mysql";
$mysql_password = "123456";
$mysql_db = "php-mysql";
$connection = mysqli_connect(
    $mysql_host, $mysql_user, $mysql_password, $mysql_db
);
  • 호스트(windows)에서 게스트(ubuntu) 컴퓨터 tasks app(myphp 컨테이너) 접속 및 동작 확인
2049277881_LxTOk2IS_760f8ab56ded78dcdc5dd7fbdc6835b93596f216.png

front, back end 컨테이너 분할

서버 프로그램 분할 도커 컨테이너 생성

docker run -d -p 8080:80 --name myserver --net php-mysql -v ~/php:/var/www/html myphpimage


php 폴더에 서버 프로그램 이동
2049277881_BEoOVisy_aaeff25f0d6fa94990c752babe28f0971e2724c6.png

database.php 에  CROSS 도메인 이슈 설정

header("Access-Control-Allow-Origin: *");
$mysql_host = "mysql";
// docker inspect -f '{{range .NetworkSettings.Networks}}{{.IPAddress}}{{end}}' mysql
$mysql_user = "php-mysql";
$mysql_password = "123456";
$mysql_db = "php-mysql";

$connection = mysqli_connect(
    $mysql_host, $mysql_user, $mysql_password, $mysql_db
);



const hostName = window.location.hostname;
const hostNameServerUrl = 'http://'+hostName+':8080/';
// url: hostNameServerUrl+'tasks-list.php' 등으로 변경
// 이하 app.js 파일 첨부 확인

- 첨부파일 : app.js (3.2K) - 다운로드
 

댓글목록0

등록된 댓글이 없습니다.
게시판 전체검색