도커 실습 4 - php mysql 연결 및 tasks app 개발 > 클라우드네이티브

※ 주의 첫번째 파일 app.zip 실습 한 이후 -> 프론트와 서버 분리하고 두번째 파일 app.js 덮어 씌우세요. 
※ 상단 app.zip 파일 압축이 안풀리면 https://ine.or.kr:5001/sharing/yISQoXtba 에서 다시 다운로드 하세요.

목차

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

php, mysql 컨테이너 실행

공유 네트워크 생성

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

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

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 ./

생성한 이미지 기반 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

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

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

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

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

개발 환경 구축 및 tasks app 설치

PC에서 VSCode 설치 및 SSH 접속

• VSCode(Visual Studio Code) 다운로드 및 설치
  • https://code.visualstudio.com/Download 다운로드 > 설치

 

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

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

 

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

 

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

 

• HTML Files, XML Files 등등 설치

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

• - 첨부파일 : tasks app.zip (5.3K) - 다운로드

호스트(windows) 컴퓨터 크롬에서 게스트(ubuntu) 컴퓨터 tasks app(myphp 컨테이너)에 접속

호스트(windows) 컴퓨터에서 게스트(ubuntu)를 통해 mysql 컨테이너 접속


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
);

게스트(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 컨테이너) 접속 및 동작 확인

front, back end 컨테이너 분할

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

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

php 폴더에 서버 프로그램 이동


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) - 다운로드