Add Docker Build Script

.dockerignore

@@ -0,0 +1,8 @@
+node_modules
+dist
+.git
+.idea
+.vscode
+.angular
+README.md
+package-lock.json

.gitignore

@@ -42,3 +42,5 @@ __screenshots__/
 # System files
 .DS_Store
 Thumbs.db
+
+*.tar

Dockerfile

@@ -0,0 +1,26 @@
+# 1. Build Stage
+FROM node:24-alpine AS build
+
+WORKDIR /app
+
+# 의존성 파일 복사 및 설치
+COPY package*.json ./
+RUN npm install
+
+# 소스 코드 복사 및 빌드
+COPY . .
+RUN npm run build
+
+# 2. Production Stage
+FROM node:24-alpine AS runner
+
+WORKDIR /app
+
+# 빌드 스테이지에서 생성된 dist 폴더만 복사
+COPY --from=build /app/dist /app/dist
+
+# 포트 설정 (Angular SSR 기본 포트: 4000)
+EXPOSE 4000
+
+# 서버 실행 (package.json의 serve:ssr:aef-component-test 참고)
+CMD ["node", "dist/aef-component-test/server/server.mjs"]

angular.json

@@ -37,7 +37,11 @@
             "server": "src/main.server.ts",
             "outputMode": "server",
             "security": {
-              "allowedHosts": []
+              "allowedHosts": [
+                "aef.kr",
+                "*.aef.kr",
+                "yunizun.org"
+              ]
             },
             "ssr": {
               "entry": "src/server.ts"

build.ps1

@@ -0,0 +1,21 @@
+# AefComponentTest Docker 이미지 빌드 및 추출 스크립트
+
+$IMAGE_NAME = "aef-component-test"
+$TAG = "0.0.1"
+$OUTPUT_FILE = "aef-component-test.tar"
+
+Write-Host "--- Docker 이미지 빌드 시작: ${IMAGE_NAME}:${TAG} ---" -ForegroundColor Cyan
+docker build -t "$($IMAGE_NAME):$TAG" .
+
+if ($LASTEXITCODE -eq 0) {
+    Write-Host "--- 이미지 추출 시작: $OUTPUT_FILE ---" -ForegroundColor Cyan
+    docker save -o $OUTPUT_FILE "$($IMAGE_NAME):$TAG"
+
+    if ($LASTEXITCODE -eq 0) {
+        Write-Host "성공! $OUTPUT_FILE 파일이 생성되었습니다." -ForegroundColor Green
+    } else {
+        Write-Host "이미지 추출 중 오류가 발생했습니다." -ForegroundColor Red
+    }
+} else {
+    Write-Host "빌드 중 오류가 발생했습니다." -ForegroundColor Red
+}

src/app/app.ts

@@ -2,7 +2,7 @@ import { Component, signal } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 import { Switch } from './components/switch/switch';
 import { Dropdown, DropdownOption } from './components/dropdown/dropdown';
-import { HeaderMenu } from './ui/header-menu/header-menu';
+import { HeaderMenu } from './features/header-menu/header-menu';
 
 @Component({
   selector: 'app-root',

src/app/features/settings/settings.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'settings-popup',
+  imports: [],
+  templateUrl: './popup.html',
+  styleUrl: './popup.scss',
+})
+export class SettingsPopup {}

src/app/ui/settings/settings.ts

@@ -1,12 +0,0 @@
-import { Component, input, model, output } from '@angular/core';
-import { Dropdown } from '../../components/dropdown/dropdown';
-import { Switch } from '../../components/switch/switch';
-import { PopupComponent } from '../../components/popup/popup';
-
-@Component({
-  selector: 'settings-popup',
-  imports: [PopupComponent, Dropdown, Switch],
-  templateUrl: './popup.html',
-  styleUrl: './popup.scss',
-})
-export class SettingsPopup {}

src/server.ts

@@ -50,13 +50,15 @@ app.use((req, res, next) => {
  * The server listens on the port defined by the `PORT` environment variable, or defaults to 4000.
  */
 if (isMainModule(import.meta.url) || process.env['pm_id']) {
-  const port = process.env['PORT'] || 4000;
+  const port = parseInt(process.env['PORT'] || '4000');
-  app.listen(port, (error) => {
+  const host = '0.0.0.0';
+
+  app.listen(port, host, (error) => {
     if (error) {
       throw error;
     }
 
-    console.log(`Node Express server listening on http://localhost:${port}`);
+    console.log(`Node Express server listening...`);
   });
 }