feat: add Dockerfile's configuration and add CI/CD pipelines

.dockerignore

@@ -0,0 +1,8 @@
+node_modules
+dist
+.dockerignore
+Dockerfile
+docker-compose.yml
+.git
+.gitlab-ci.yml
+*.log

.github/workflows/build.yml

@@ -0,0 +1,40 @@
+name: Build
+
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+  workflow_dispatch:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout code
+      uses: actions/checkout@v4
+
+    - name: Setup Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: '18'
+        cache: 'npm'
+
+    - name: Install dependencies
+      run: npm ci
+
+    - name: Build project
+      run: npm run build
+
+    - name: Upload build artifacts
+      uses: actions/upload-artifact@v4
+      with:
+        name: build-files-${{ github.sha }}
+        path: dist/
+        retention-days: 7
+
+    - name: Build summary
+      run: |
+        echo "✅ Build completed successfully" >> $GITHUB_STEP_SUMMARY
+        echo "📦 Artifacts uploaded as: build-files-${{ github.sha }}" >> $GITHUB_STEP_SUMMARY

.github/workflows/deploy.yml

@@ -0,0 +1,73 @@
+name: Deploy to Server
+on:
+ push:
+   branches: [ main ]
+jobs:
+ deploy:
+   runs-on: ubuntu-latest
+
+   steps:
+   - name: Checkout code
+     uses: actions/checkout@v4
+
+   - name: Setup Node.js
+     uses: actions/setup-node@v4
+     with:
+       node-version: '20'
+       cache: 'npm'
+
+   - name: Install dependencies
+     run: npm ci
+
+   - name: Run lint
+     run: npm run lint
+
+   - name: TypeScript check
+     run: npx tsc --noEmit
+
+   - name: Build project
+     run: npm run build
+
+   - name: Deploy to server
+     uses: appleboy/ssh-action@v1.0.0
+     with:
+       host: ${{ secrets.SERVER_HOST }}
+       username: ${{ secrets.SERVER_USER }}
+       key: ${{ secrets.SERVER_SSH_KEY }}
+       port: ${{ secrets.SERVER_PORT || 22 }}
+       script: |
+         echo "🚀 Starting deployment..."
+
+         cd /opt
+
+         if [ ! -d "frontend-react" ]; then
+           echo "📥 Cloning repository..."
+           git clone https://github.com/PrettyPet-Organization/frontend-react.git
+         else
+           echo "🔄 Updating repository..."
+           cd frontend-react
+           git fetch origin
+           git reset --hard origin/main
+           cd ..
+         fi
+
+         cd frontend-react
+
+         echo "⏹️ Stopping old containers..."
+         docker-compose down || true
+
+         echo "🔨 Building and starting containers..."
+         docker-compose up -d --build
+
+         echo "⏳ Waiting for startup..."
+         sleep 10
+
+         if docker-compose ps | grep -q "Up"; then
+           echo "✅ Deployment successful!"
+         else
+           echo "❌ Something went wrong"
+           docker-compose logs
+           exit 1
+         fi
+
+         docker-compose ps

.github/workflows/lint.yml

@@ -0,0 +1,50 @@
+name: Lint
+
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+  workflow_dispatch:
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout code
+      uses: actions/checkout@v4
+
+    - name: Setup Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: '18'
+        cache: 'npm'
+
+    - name: Install dependencies
+      run: npm ci
+
+    - name: Run ESLint
+      run: npm run lint
+      continue-on-error: false
+
+    - name: Run TypeScript check
+      run: npx tsc --noEmit
+
+    - name: Run Prettier check
+      run: |
+        if npm run format:check; then
+          echo "✅ Code formatting is correct"
+        else
+          echo "❌ Code formatting issues found. Run 'npm run format' to fix."
+          exit 1
+        fi
+      continue-on-error: false
+
+    - name: Lint summary
+      if: always()
+      run: |
+        echo "## Lint Results" >> $GITHUB_STEP_SUMMARY
+        echo "- ESLint: ${{ steps.eslint.outcome || '✅ Passed' }}" >> $GITHUB_STEP_SUMMARY
+        echo "- TypeScript: ${{ steps.typescript.outcome || '✅ Passed' }}" >> $GITHUB_STEP_SUMMARY
+        echo "- Prettier: ${{ steps.prettier.outcome || '✅ Passed' }}" >> $GITHUB_STEP_SUMMARY

.gitignore

@@ -22,3 +22,6 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+# enviroment
+.env

Dockerfile

@@ -0,0 +1,16 @@
+FROM node:20-alpine3.19 AS builder
+
+WORKDIR /app
+COPY package*.json ./
+RUN npm ci
+COPY . .
+RUN npm run build
+
+FROM nginx:alpine
+
+COPY --from=builder /app/dist /usr/share/nginx/html
+
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]

docker-compose.yml

@@ -0,0 +1,13 @@
+version: '3.8'
+
+services:
+  frontend:
+    build: .
+    container_name: prettypet-frontend
+    restart: unless-stopped
+    ports:
+      - "80:80"
+    volumes:
+      - ./logs:/var/log/nginx
+    environment:
+      - NODE_ENV=production

index.html

@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/logo.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>Pretty Pet</title>
   </head>
   <body>
     <div id="root"></div>

nginx.conf

@@ -0,0 +1,43 @@
+events {
+    worker_connections 1024;
+}
+
+http {
+    include       /etc/nginx/mime.types;
+    default_type  application/octet-stream;
+
+    access_log /var/log/nginx/access.log;
+    error_log /var/log/nginx/error.log;
+
+    gzip on;
+    gzip_vary on;
+    gzip_min_length 1024;
+    gzip_proxied expired no-cache no-store private must-revalidate auth;
+    gzip_types text/plain text/css text/xml text/javascript application/javascript application/xml+rss application/json;
+
+    server {
+        listen 80;
+        server_name localhost;
+        root /usr/share/nginx/html;
+        index index.html;
+
+        location / {
+            try_files $uri $uri/ /index.html;
+        }
+
+        location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
+            expires 1y;
+            add_header Cache-Control "public, immutable";
+        }
+
+        add_header X-Frame-Options "SAMEORIGIN" always;
+        add_header X-Content-Type-Options "nosniff" always;
+        add_header X-XSS-Protection "1; mode=block" always;
+
+        location /health {
+            access_log off;
+            return 200 "healthy\n";
+            add_header Content-Type text/plain;
+        }
+    }
+}