[Docker]내부 네트워크를 사용해 웹사이트 만들기

1. 프로젝트 개요

1.1 개발 목적

• 웹 기반 메모 관리 시스템 구축
• 사용자 친화적인 인터페이스 제공
• Docker를 활용한 손쉬운 배포 환경 구성

1.2 사용 기술

• Backend: PHP, MySQL
• Frontend: HTML, CSS, JavaScript
• 인프라: Docker (Apache, MySQL, Nginx)
• 개발 환경: Ubuntu (서버), Windows Chrome (클라이언트)

2. 설치 가이드
도커 HUB : https://hub.docker.com/r/minch13r/cloudnative/tags

2.1 사전 요구사항

- Ubuntu 서버 (20.04 LTS 이상)
- Docker Engine
- Docker Compose
- 고정 IP

 

※ 고정 IP 할당하는 방법 ※

https://minch13r.tistory.com/23

 

2.2 설치 절차

1. 우분투 서버 준비
sudo apt update
sudo apt upgrade

 

2. Docker 설치
sudo apt install docker.io docker-compose

3. 프로젝트 클론
memo-project.zip (파일을 다운받고 우분투에 넣어줍니다.)
※ 파일 불안정으로 인해서 SSH 통신하고 복사 붙여넣기 추천 ※
※ 상대경로로 작성된 코드들이 있어서 구조 지켜야 실행 가능 ※

 

Ubuntu와 Visual Studio Code를 SSH 통신하는 과정은 블로그를 참조하면 된다. 여기서 ip는 고정한 본인의 Ubuntu ip를 쓰면된다.

https://velog.io/@cielo_g/Linux-Visual-Studio-Code%EB%A1%9C-ssh-%EC%9B%90%EA%B2%A9-%EC%A0%91%EC%86%8D%ED%95%98%EA%B8%B0feat.-VM-VirtualBoxsshvscubuntu

 

4. 호스트 파일 설정 (Windows) (※필수※ 메모장 관리자 권한으로 실행)
C:\Windows\System32\drivers\etc\hosts 파일에 추가:
[서버 IP] memo.com
(여기서 서버 IP는 본인 우분투 ip 넣으면 됩니다.)

hosts 파일

5. Docker 컨테이너 실행
sudo docker-compose up -d
(꼭 cd memo-project 한 뒤에 실행해야 됩니다. memo-project 폴더로 이동하고 도커 컴포즈 파일을 실행이 가능하다)

cd memo-project

3. 사용 설명서

3.1 접속 방법
1. 웹 브라우저(Chrome) 실행
2. 주소창에 'http://memo.com' 입력

3.2 주요 기능
• 메모 작성/수정/삭제
• 메모 목록 조회
• 메모 검색

3.3 MYSQL 접속

1. HeidSQL 접속
호스트명 / IP에 본인 우분투 IP 입력
사용자 : memo_user
암호 : memo_password
포트 : 3306

2. 테이블
- Docker > mysql > init.sql을 docker-compose.yml 파일을 통해 이미 테이블문
이 입력돼서 HeidSQL에 따로 테이블 추가 안 해도 됨. 
- 아래 사진처럼 테이블 작성하고 싶으면 링크 클릭(권장X)

테이블

 

4. 시스템 구조
4.1 디렉토리 구조

 

4.2 아키텍처
• Frontend: SPA (Single Page Application)
• Backend: RESTful API
• Database: MySQL
• 웹 서버: Apache + Nginx (리버스 프록시)

5. 사용방법
http://memo.com 접속(Chrome으로 접속 권장, 앞선 과정을 다 따라한 본인 PC에서만 가능)

 

제목과 내용을 입력합니다

 

필요에 따라서 굵게 혹은 기울이기 등 효과 넣기 가능합니다.

 

메모 검색 기능
검색 창에 제목 혹은 내용을 치고 돋보기 버튼을 누르면 검색 가능합니다

 

수정기능도 있습니다.
메모 목록에서 네모 위에 볼펜 모양이 그려져 있는 버튼을 클릭하면 제목과 내용
을 적었던 곳에 메모 목록이 나오면서 수정이 가능합니다.

 

수정 된 메모

 

삭제 기능
메모 목록에서 빨간색 휴지통 버튼을 누르면 삭제가 가능합니다.

 

삭제 후 메모 목록

---

memo-project.zip

0.02MB

 

파일은 이거를 쓰면 된다. 내부 네트워크, 설치 시 본인의 컴퓨터에서만 쓸 수 있는 내용이다. 도커와 Apache, Nginx, PHP, MYSQL 등 다양하게 썼으며 본인만 은밀하게 쓸 수 있는 메모장 웹사이트라고 생각하면 된다. 여기다가 본인이 추가적으로 넣고 싶은 기능이 있다면 마음껏 쓰시길 바란다.