Docker项目部署

创建 Dockerfile

    # ---------- 构建阶段 ----------
    FROM node:18-alpine AS builder

    WORKDIR /app

    # 复制 package.json 和 package-lock.json
    COPY package*.json ./
    RUN npm install

    # 复制项目源码并打包
    COPY . .
    RUN npm run build

    # ---------- 运行阶段 ----------
    FROM nginx:alpine

    # 删除默认 nginx 配置
    RUN rm /etc/nginx/conf.d/default.conf

    # 拷贝自定义 nginx 配置
    COPY nginx.conf /etc/nginx/conf.d/default.conf

    # 拷贝打包产物
    COPY --from=builder /app/dist /usr/share/nginx/html

    EXPOSE 80

    CMD ["nginx", "-g", "daemon off;"]

创建 nginx.conf

    server {
        listen 80;
        server_name localhost;

        root /usr/share/nginx/html;
        index index.html;

        location / {
            try_files $uri $uri/ /index.html;
        }
    }

在服务器上构建 Docker 镜像

    cd 项目路径
    docker build -t 项目名称 .

运行 Docker 容器

    docker run -d \
    --name vitepress \
    -p 4000:80 \
    vue3-vite-press

docker常用命令

    docker ps // 查看运行中的容器
    docker ps -a // 查看所有容器 (包含已经停止的)
    docker ps -q // 只看容器ID
    docker logs 容器名 // 查看容器日志
    docker logs -f 容器名 // 实时查看
    docker images // 构建成功后查看镜像
    docker rm -f 容器名 // 删除旧容器

创建自动部署脚本

  在项目根目录创建 deploy.sh 文件

  deploy.sh 文件内容:
  // 如果是使用node做为服务器 使用sh 不使用node 使用bash
    #!/bin/sh  
    #!/bin/bash

    # 进入项目目录
    cd 项目路径

    # 拉取最新代码
    git reset --hard   # 保证覆盖本地修改
    git clean -fd      # 删除未追踪文件
    git pull

    # 构建 Docker 镜像
    docker build -t 容器名 .

    # 停止并删除旧容器（如果存在）
    docker stop 容器名 || true
    docker rm 容器名 || true

    # 运行新容器
    docker run -d \
    -p 对外端口:对内端口 \
    --restart=always \
    --name 容器名 \
    容器名

    echo "部署完成，访问 http://服务器IP"

本地执行

# 获取执行权限
chmod +x 文件路径/deploy.sh
# 手动执行
bash 文件路径/deploy.sh