前端使用Docker（这里以Vue项目举例）

第一步：检查 Vue 项目打包输出

你已经使用 npm run build 进行打包，Vue 的默认打包输出文件通常在 dist/ 目录下。请确认该目录存在，并且包含 index.html 以及 assets/ 等静态文件。

第二步：编写 Dockerfile 配置

在 Vue 项目的根目录下，新建一个 Dockerfile，内容如下：

# 使用 nginx 作为基础镜像
FROM nginx:latest

# 删除默认的 nginx 静态文件目录
RUN rm -rf /usr/share/nginx/html/*

# 复制 Vue 打包后的 dist 文件到 nginx 目录
COPY dist/ /usr/share/nginx/html/

# 复制自定义的 Nginx 配置文件（可选）
COPY nginx.conf /etc/nginx/nginx.conf

# 暴露 80 端口
EXPOSE 80

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

说明：

• FROM nginx:latest：使用官方 nginx 作为基础镜像。
• COPY dist/ /usr/share/nginx/html/：将 Vue 打包后的文件复制到 Nginx 服务器的默认静态目录。
• EXPOSE 80：暴露 80 端口，让外部可以访问网站。
• CMD ["nginx", "-g", "daemon off;"]：设置 Nginx 作为前台进程运行。

第三步：编写 Nginx 配置

如果你需要自定义 Nginx 配置，可以在项目根目录新建 nginx.conf：

worker_processes 1;

events {
    worker_connections 1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;
    keepalive_timeout 65;

    server {
        listen 80;
        server_name localhost;

        location / {
            root   /usr/share/nginx/html;
            index  index.html;
            try_files $uri $uri/ /index.html;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   /usr/share/nginx/html;
        }
    }
}

注意：

• try_files $uri $uri/ /index.html; 这一行很重要，如果你的 Vue 项目是单页面应用（SPA），可以确保前端路由正确。

第四步：构建 Docker 镜像

在 Vue 项目的根目录（包含 Dockerfile 的目录）执行：

docker build -t my-vue-app .

说明：

• docker build：用于构建 Docker 镜像。
• -t my-vue-app：给镜像取一个名字 my-vue-app，方便后续运行。

第五步：将选择的镜像运行到 Docker 容器中

docker run -d -p 8080:80 --name my-vue-container my-vue-app

说明：

• -d：后台运行容器。
• -p 8080:80：将宿主机的 8080 端口映射到容器的 80 端口，这样你可以通过 http://localhost:8080 访问 Vue 项目。
• --name my-vue-container：给容器取一个名字 my-vue-container。
• my-vue-app：使用上一步构建的镜像运行容器。

第六步：测试 Vue 应用

浏览器打开：

http://localhost:8080

管理 Docker 容器

常见的 Docker 操作命令：

# 查看正在运行的容器
docker ps

# 查看所有容器（包括已停止的）
docker ps -a

# 停止容器指定定容器
docker stop my-vue-container

# 停止所有运行的容器
docker stop $(docker ps -q)

# 删除容器
docker rm my-vue-container

# 删除所有容器
docker rm $(docker ps -aq)

# 删除镜像
docker rmi my-vue-app

# 删除所有镜像
docker rmi $(docker images -q)

# 重新运行容器（如果已创建）
docker start my-vue-container

说明

Windows 版 Docker 提供 Docker Desktop，你可以在 GUI（图形界面）上管理容器、镜像等资源。
不过，Docker 主要是通过 命令行 操作的，GUI 只是辅助查看。
你可以按照以下步骤，在 Windows 上通过 Docker Desktop 操作 Vue 项目。

确认 Docker Desktop 运行正常
打开 Docker Desktop，确保它在运行状态。

检查 Docker 是否可用
打开 Windows 终端（PowerShell 或 CMD），执行：

docker version
如果 Docker 运行正常，会显示客户端和服务器的版本信息。

如果使用了可选项nginx，运行nginx报错问题处理

这个错误的主要原因是 Docker 无法从官方仓库拉取 nginx:latest 镜像，可能的原因包括：

1. 网络问题：
   • 访问 docker.io 的网络不稳定，可能被防火墙拦截或 DNS 解析失败。
2. Docker 未正确登录：
   • 需要 docker login 登录 Docker Hub 账户。
3. Windows 代理问题：
   • 可能需要配置 Docker Desktop 的代理或者使用国内镜像加速器。

方案 1：手动拉取 Nginx 镜像
　　　　尝试手动拉取 nginx:latest 镜像：

　　　　docker pull nginx:latest


方案 2：使用国内镜像加速
Docker 默认从 docker.io 拉取镜像，但国内访问可能会超时，你可以使用 国内镜像加速器（例如阿里云或网易云）。

    步骤 1：修改 Docker Desktop 配置
                打开 Docker Desktop。
                进入 Settings（设置） → Docker Engine。
                找到 "registry-mirrors"，添加国内镜像：

{
  "registry-mirrors": [
    "https://registry.docker-cn.com",
    "https://mirror.ccs.tencentyun.com",
    "https://hub-mirror.c.163.com",
    "https://docker.mirrors.ustc.edu.cn"
  ]
}

点击 Apply & Restart（应用并重启）。

步骤 2：重新拉取 Nginx 镜像

            docker pull nginx:latest

            如果这一步成功，再次执行：

            docker build -t my-vue-app .