【实战】手动使用阿里云ECS部署前端页面-docker版服务器基本登录操作见：【实战】手动使用阿里云ECS部署前端页面

下载docker

yum install -y yum-utils device-mapper-persistent-data lvm2
// 设置yum源
yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo
// 查看可安装版本
yum list docker-ce --showduplicates | sort -r
// 安装docker
yum -y install docker-ce-XXXXXXX

创建Dockerfile文件

# 多阶段构建
# 第一阶段：构建应用
FROM swr.cn-north-4.myhuaweicloud.com/ddn-k8s/docker.io/library/node:lts-alpine AS builder

# 设置工作目录
WORKDIR /app

# 复制package文件
COPY package.json pnpm-lock.yaml ./

# 配置淘宝镜像源并安装pnpm和依赖
RUN npm config set registry https://registry.npmmirror.com/ && \
    npm install -g pnpm && \
    pnpm config set registry https://registry.npmmirror.com/ && \
    pnpm install

# 复制源代码
COPY . .

# 构建应用
RUN pnpm run build

# 第二阶段：生产环境
FROM swr.cn-north-4.myhuaweicloud.com/ddn-k8s/docker.io/nginx:1.21

# 复制nginx配置文件
COPY nginx.conf /etc/nginx/nginx.conf

# 从构建阶段复制构建产物
COPY --from=builder /app/dist /root/web/project-name/dist

# 暴露端口
EXPOSE 80

# 启动nginx
CMD ["nginx", "-g", "daemon off;"]

编写部署脚本

#!/bin/bash

# 1. 进入项目目录
cd /root/web/astro-future-fe

# 2. 确保Dockerfile正确（检查当前内容）
echo "检查Dockerfile内容..."
cat Dockerfile

# 3. 停止并删除现有容器（如果存在）
echo "清理现有容器..."
docker stop project-name 2>/dev/null || true
docker rm project-name 2>/dev/null || true

# 4. 构建镜像
echo "构建Docker镜像..."
docker build -t project-name .

# 检查构建是否成功
if [ $? -eq 0 ]; then
    echo "✅ Docker镜像构建成功！"
else
    echo "❌ Docker镜像构建失败！"
    exit 1
fi

# 5. 验证镜像是否构建成功
echo "验证镜像..."
docker images | grep project-name

# 6. 运行容器
echo "启动新容器..."
docker run -d \
  --name project-name \
  -p 80:80 \
  --restart unless-stopped \
  project-name

# 检查容器是否启动成功
if [ $? -eq 0 ]; then
    echo "✅ 容器启动成功！"
else
    echo "❌ 容器启动失败！"
    exit 1
fi

# 7. 检查容器状态
echo "检查容器状态..."
docker ps | grep project-name

# 8. 等待几秒让容器完全启动
echo "等待容器完全启动..."
sleep 3

# 9. 检查容器健康状态
CONTAINER_STATUS=$(docker inspect --format='{{.State.Status}}' project-name 2>/dev/null)
if [ "$CONTAINER_STATUS" = "running" ]; then
    echo "🎉 部署成功！容器正在运行中"
    echo "📱 应用访问地址: http://localhost:80"
    echo "📊 容器状态: $CONTAINER_STATUS"
    
    # 显示容器信息
    echo "\n📋 容器详细信息:"
    docker ps --filter name=project-name --format "table {{.Names}}\t{{.Status}}\t{{.Ports}}"
    
    echo "\n📝 查看实时日志命令: docker logs -f project-name"
    echo "🔄 重启容器命令: docker restart project-name"
    echo "🛑 停止容器命令: docker stop project-name"
else
    echo "❌ 部署失败！容器状态异常: $CONTAINER_STATUS"
    echo "\n📋 容器日志:"
    docker logs project-name
    exit 1
fi

启动脚本

./deploy.sh

如果提示权限问题：

chmod +x deploy.sh