refactor: update Dockerfile and package management to use pnpm

- Transitioned from Yarn to pnpm for package management, updating package.json scripts accordingly.
- Enhanced Dockerfile for better build efficiency by separating dependency installation and application build steps.
- Updated Docker commands in README files to reflect changes in port mapping and image tagging.
- Added healthcheck to the Dockerfile for improved container reliability.

Dockerfile

@@ -1,26 +1,34 @@
-# Use node as the builder image
+# Build stage
-FROM docker.io/node:alpine3.17 as builder
+FROM node:20-alpine AS builder
 
-# Copy the vue-color-avatar file from the local directory to the /app directory inside the container
+# Set working directory
-COPY . /app
-
-# Change the working directory to /app
 WORKDIR /app
 
-# Set the Yarn registry to Taobao mirror and install dependencies using yarn install
+# Install dependencies first (for better caching)
-RUN yarn config set registry 'https://registry.npmmirror.com' && yarn install && yarn cache clean
+COPY package.json pnpm-lock.yaml ./
+RUN corepack enable pnpm && pnpm install --frozen-lockfile
 
-# Building the html code
+# Copy source code
-RUN yarn build
+COPY . .
 
-# Using nginx for production
+# Build the application
-FROM docker.io/nginxinc/nginx-unprivileged:1.25.1-alpine
+RUN pnpm build
 
-# Showing that port 8080 can be published
+# Production stage
-EXPOSE 8080
+FROM nginx:alpine
 
-# Maintainer information
+# Copy custom nginx config if needed
-MAINTAINER tanwenyang@aliyun.com
+# COPY nginx.conf /etc/nginx/conf.d/default.conf
 
-# Copy html from previous stage
+# Copy built assets from builder stage
 COPY --from=builder /app/dist /usr/share/nginx/html
+
+# Add healthcheck
+HEALTHCHECK --interval=30s --timeout=3s \
+  CMD wget --quiet --tries=1 --spider http://localhost:80/ || exit 1
+
+# Expose port
+EXPOSE 80
+
+# Start nginx
+CMD ["nginx", "-g", "daemon off;"]

README-CN.md

@@ -52,31 +52,19 @@ yarn dev
 
 ### Docker 快速部署
 
-你可以直接使用我已经构建好的镜像来运行。
-
-```sh
-docker run -d -t -p 5173:8080 \
---name=vue-color-avatar \
---restart=always \
-docker.io/wenyang0/vue-color-avatar:latest
-
-```
-
-或者，如果您愿意，也可以自己手动编译。
-
 ```sh
 #下载代码
 git clone https://github.com/Codennnn/vue-color-avatar.git
 
 #docker 编译
 cd vue-color-avatar/
-docker build -t vue-color-avatar:v1 .
+docker build -t vue-color-avatar:latest .
 
 #启动服务
-docker run -d -t -p 5173:8080 --name vue-color-avatar --restart=always vue-color-avatar:v1
+docker run -d -p 3000:80 --name vue-color-avatar vue-color-avatar:latest
 ```
 
-最后，打开你的浏览器访问服务的地址 http://serverIP:5173 即可。
+最后，打开你的浏览器访问服务的地址 http://localhost:3000 即可。
 
 ### 在 Zeabur 中部署
 

README.md

@@ -49,31 +49,22 @@ yarn dev
 
 ## Docker deploy
 
-You can directly run using the image I have already built.
-
-```sh
-docker run -d -t -p 5173:8080 \
---name=vue-color-avatar \
---restart=always \
-docker.io/wenyang0/vue-color-avatar:latest
-
-```
-
-Or, you can manually compile it yourself if you prefer.
-
 ```sh
 #clone the code
 git clone https://github.com/Codennnn/vue-color-avatar.git
 
 #docker build
 cd vue-color-avatar/
-docker build -t vue-color-avatar:v1 .
+docker build -t vue-color-avatar:latest .
 
 #start server
-docker run -d -t -p 5173:8080 --name vue-color-avatar --restart=always vue-color-avatar:v1
+docker run -d -p 3000:80 --name vue-color-avatar vue-color-avatar:latest
 ```
 
-Finally, open your browser and access the service's address at http://serverIP:5173.
+Once the container is running, open your browser and visit:
+
+- http://localhost:3000 (if running locally)
+- http://your-server-ip:3000 (if running on a server)
 
 ### Deployed on Zeabur
 

package.json

@@ -7,9 +7,9 @@
   "scripts": {
     "build": "npm run test && vite build",
     "build:prerelease": "vite build --mode prerelease",
-    "deps": "yarn upgrade-interactive --latest",
+    "deps": "pnpm upgrade-interactive --latest",
     "dev": "vite",
-    "lint": "yarn lint:es && yarn lint:style && yarn lint:ts",
+    "lint": "pnpm lint:es && pnpm lint:style && pnpm lint:ts",
     "lint:es": "eslint \"src/**/*.{js,jsx,ts,tsx,vue}\"",
     "lint:prettier": "prettier --write \"src/**/*.{md,json,html}\"",
     "lint:style": "stylelint \"src/**/*.{css,scss,vue}\"",