一个vue项目如何运行在docker

将 Vue.js 应用程序通过 Docker 发布是一个非常常见的做法，它可以帮助你轻松地部署应用到不同的环境中。下面是一个简单的指南，介绍如何为 Vue.js 项目创建 Dockerfile 并进行构建和运行。

第一步：安装 Docker

确保你的开发机器上已经安装了 Docker。你可以从 Docker 官方网站下载并安装适合你操作系统的 Docker 版本。

第二步：准备 Vue.js 项目

如果你还没有 Vue.js 项目，可以使用 Vue CLI 创建一个新的项目：

npm install -g @vue/cli
vue create my-vue-app
cd my-vue-app

因为vue 项目需要nginx运行，需要一个配置文件nginx.conf，所以创文件

server {
    listen 80;
    server_name localhost;

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

    error_log /var/log/nginx/error.log;
    access_log /var/log/nginx/access.log;
}

包括文件目录如下

第三步：创建 Dockerfile

在项目的根目录下创建一个名为 Dockerfile 的文件，然后添加以下内容：

# 复制 package.json 和 package-lock.json 到工作目录
COPY package*.json ./

# 安装依赖
RUN npm ci --only=production

# 如果有其他需要编译的资源（例如：Vue.js 应用），先复制所有文件
COPY . .

# 构建 Vue.js 应用
RUN npm run build

# 使用 nginxinc/nginx-unprivileged 镜像来服务 Vue.js 应用
FROM nginxinc/nginx-unprivileged:alpine

# 设置工作目录
WORKDIR /app

# 删除默认的 nginx html 文件夹，并将 Vue.js 应用复制到 nginx 的默认目录中
COPY --from=build-stage /app/dist /usr/share/nginx/html

# 暴露 80 端口
EXPOSE 80

# 确保 nginx 配置文件正确
COPY ./nginx.conf /etc/nginx/conf.d/default.conf

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

这个 Dockerfile 分为两个阶段：构建阶段和运行阶段。构建阶段使用 Node.js 镜像来构建 Vue.js 应用，而运行阶段则使用 Nginx 镜像来服务构建好的静态文件。

第四步：构建 Docker 镜像

在包含 Dockerfile 的目录中打开终端，执行以下命令来构建 Docker 镜像：

docker build -t my-vue-app .

这里的 -t 参数用于指定镜像的名字，你可以根据自己的需求修改名字。

第五步：运行 Docker 容器

构建完成后，你可以使用以下命令来运行 Docker 容器：

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

这条命令会启动一个新的容器，并将容器内的 80 端口映射到宿主机的 8080 端口上。现在，你可以通过访问 http://localhost:8080 来查看你的 Vue.js 应用了。

第六步：推送镜像到 Docker Hub 或其他仓库

如果你想让其他人也能使用你的 Docker 镜像，可以将其推送到 Docker Hub 或其他 Docker 镜像仓库：

docker tag my-vue-app your-dockerhub-username/my-vue-app
docker push your-dockerhub-username/my-vue-app

这样就完成了 Vue.js 应用的 Docker 化过程。