# 컨테이너 구성
알파인리눅스 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
'리눅스 > ALPINE 리눅스' 카테고리의 다른 글
알파인리눅스 : docker 도커 생성파일 지우기 (1) | 2025.01.07 |
---|---|
알파인리눅스 : network 사용자정의 네트워크 (0) | 2025.01.07 |
알파인리눅스 : 우분투 도커 이미지 빌드하기 (1) | 2025.01.06 |
알파인리눅스 : ls (0) | 2024.12.30 |
알파인리눅스 : console color 콘솔 칼라 (0) | 2024.12.30 |