반응형

 

# 컨테이너 구성
알파인리눅스 OS
└── Cockpit CMS 
    ├── API_Server 컨테이너 ( 알파인리눅스 )
    │	└─ PHP
    ├── Front 컨테이너 ( 알파인리눅스 )
    │	└─ Svelte
    ├── Backend 컨테이너 ( 알파인리눅스 )
    │	├─ PHP
    │	└─ frameworkX
    ├── supabase
    └── blaze B2
    
    
# 경로 구성    
알파인리눅스 OS
└── user2000
    ├── api_server
    │   ├─ src : 컨테이너와 매핑되는 host 디렉토리 ( .gitignore 포함 )
    │   └─ docker : docker 관련파일 ( Dockerfile, docker-compose.yml )
    ├── frontend
    │	├─ src : 컨테이너와 매핑되는 host 디렉토리 ( .gitignore 포함 )
    │	└─ docker : docker 관련파일 ( Dockerfile, docker-compose.yml )
    └── backend
    	├─ src : 컨테이너와 매핑되는 host 디렉토리 ( .gitignore 포함 )
    	└─ docker : docker 관련파일 ( Dockerfile, docker-compose.yml )

 

 

# ■  ( user ) 도커 이미지 내려받기
        docker pull 로 내려받지 않으면 컨테이너 만들때마다 새로 내려받는다
docker    pull    alpine:3.21
 

 

# ■   ( user ) 전용 네트워크  생성

docker    network    create    php_cms_network

 

 

 

# ■   ( user ) 프로젝트 디렉토리 생성

cd    ~/

mkdir    -p    ~/php_cms
mkdir    -p    ~/php_cms/frontend

mkdir    -p    ~/php_cms/frontend/src

mkdir    -p    ~/php_cms/frontend/docker

 

 

 

# ■  ( root )  사용자 권한 설정
addgroup    user2000    docker

 

 

 

# ■  ( root )  파일소유권 지정

chown    -R    1000:1000    /home/user2000/php_cms/frontend/src

 

 

 

# ■   ( user )  .gitignore 파일 생성

cd ~/php_cms/frontend/src

# .gitignore 파일 생성
cat << 'EOF' >  ~/php_cms/frontend/src/.gitignore
node_modules/
/build
/.svelte-kit
/package
.env
.env.*
!.env.example
vite.config.js.timestamp-*
vite.config.ts.timestamp-*
EOF

 

 


# ■  ( user )  파일 생성 확인
ls    -la
cat    .gitignore

 

 

 

# ■   ( user )  Dockerfile 생성

cd  ~/php_cms/frontend/docker


cat > ~/php_cms/frontend/docker/Dockerfile.dev << 'EOF'
FROM node:alpine

WORKDIR /app

# 초기화 스크립트 생성 
COPY --chown=node:node <<-"SCRIPT" /home/node/init-project.sh
#!/bin/sh

if [ ! -f "package.json" ]; then
   # package.json 생성
   echo '{
     "name": "frontend",
     "private": true,
     "version": "0.0.0",
     "type": "module",
     "scripts": {
       "dev": "vite --host"
     }
   }' > package.json

   # 의존성 설치
   npm install svelte@^4.2.8
   npm install -D vite@^5.0.0 @sveltejs/vite-plugin-svelte@^3.0.1

   # 기본 파일 생성
   mkdir -p src

   # main.js
   echo 'import App from "./App.svelte";
const app = new App({
 target: document.getElementById("app")
});' > src/main.js

   # App.svelte  
   echo '<script>
 let count = 0;
 function increment() {
   count += 1;
 }
</script>

<main>
 <h1>Hello Svelte!</h1>
 <button on:click={increment}>
   count is {count}
 </button>
</main>

<style>
 main {
   text-align: center;
   padding: 1em;
 }
 h1 {
   color: #ff3e00;
 }
</style>' > src/App.svelte

   # index.html
   echo '<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>Svelte App</title>
</head>
<body>
   <div id="app"></div>
   <script type="module" src="/src/main.js"></script>
</body>
</html>' > index.html

   # vite.config.js
   echo 'import { defineConfig } from "vite";
import { svelte } from "@sveltejs/vite-plugin-svelte";

export default defineConfig({
 plugins: [svelte()],
 server: {
   host: "0.0.0.0",
   port: 5173
 }
});' > vite.config.js

   npm install
fi

# 개발 서버 실행
exec npm run dev
SCRIPT

RUN chmod +x /home/node/init-project.sh
RUN chown -R node:node /app

USER node

EXPOSE 5173

CMD ["/home/node/init-project.sh"]
EOF

 

 

 

# ■   ( user ) docker-compose 파일 생성

cd ~/php_cms/frontend/docker

# 개발용 (docker-compose.dev.yml)
cat > docker-compose.dev.yml << 'EOF'
services:
 php_cms_frontend:
   container_name: php_cms_frontend
   build: 
     context: .
     dockerfile: Dockerfile.dev
   volumes:
     - ../src:/app
   ports:
     - "5173:5173"
   environment:
     - NODE_ENV=development
   working_dir: /app
   restart: unless-stopped
   
networks:
 default:
   name: php_cms_network
   external: true

EOF

 

 

 

# ■  ( user )  Docker 이미지 빌드 및 실행

cd    ~/php_cms/frontend/docker

docker    compose     -f    docker-compose.dev.yml    up    -d    --build    php_cms_frontend

 

 


# ■  ( user )  로그 확인

docker    compose    -f    docker-compose.dev.yml    logs    -f    php_cms_frontend

php_cms_frontend  |
php_cms_frontend  | > frontend@0.0.0 dev
php_cms_frontend  | > vite --host
php_cms_frontend  |
php_cms_frontend  |
php_cms_frontend  |   VITE v5.4.11  ready in 3305 ms
php_cms_frontend  |
php_cms_frontend  |   ➜  Local:   http://localhost:5173/
php_cms_frontend  |   ➜  Network: http://172.18.0.2:5173/

 

 


# ■  ( user )  API 테스트
curl    http://localhost:5173

 

 

 

# ■   ( user ) 컨테이너에 접속
docker    compose    exec    php_cms_frontend    sh

/app $

 

 

 

# ■ ( user ) 호스트 매핑 테스트
cd    ~/php_cms/frontend/src
echo    "test" > test.txt

 

 


# ■ ( user )  컨테이너에서 확인
docker    exec    php_cms_frontend    ls    -l    /app/test.txt

-rw-r--r--    1 node     node             5 Jan  8 03:21 /app/test.txt

 

반응형