来自chat-GPT的使用docker部署vue项目的教学

# 第一步：基于 Node.js 镜像创建一个新的镜像
FROM node:14.17.0-alpine as build

# 第二步：在容器内创建并设置一个工作目录
WORKDIR /app

# 第三步：将应用的依赖文件 package.json 和 package-lock.json 复制到容器内
COPY package*.json ./

# 第四步：使用 npm 安装依赖
RUN npm install

# 第五步：将应用程序的所有文件复制到容器内
COPY . .

# 第六步：构建 Vue 应用程序
RUN npm run build

# 第七步：从 nginx 镜像中创建一个新的镜像
FROM nginx:stable-alpine

# 第八步：将 Nginx 的配置文件复制到容器中
COPY nginx.conf /etc/nginx/nginx.conf

# 第九步：从 Node.js 镜像中复制已编译的 Vue 应用程序到 Nginx 的默认静态文件目录中
COPY --from=build /app/dist /usr/share/nginx/html

# 第十步：暴露端口 80，以便外部网络可以访问应用程序
EXPOSE 80

# 第十一步：以前台模式启动 Nginx 服务器
CMD ["nginx", "-g", "daemon off;"]

上面的Dockerfile文件中：

第一步，我们选择一个Node.js 14.17.0-alpine作为基础镜像，使用as build命名它作为构建阶段的临时镜像。
第二步，我们在容器内部创建了一个工作目录/app，并将其设置为容器中所有后续步骤的默认工作目录。
第三步，我们复制了package.json和package-lock.json文件到容器中。
第四步，我们使用npm安装应用程序的所有依赖。
第五步，我们将应用程序的所有文件复制到容器内。
第六步，我们运行npm run build命令来构建Vue应用程序。
第七步，我们从Nginx镜像中创建了一个新的镜像。
第八步，我们复制了nginx.conf配置文件到容器中，这个文件用来配置Nginx服务器。
第九步，我们从构建阶段中复制已编译的Vue应用程序到Nginx的默认静态文件目录。
第十步，我们将容器内的80端口暴露给外部网络。
第十一步，我们使用nginx -g "daemon off;"命令启动Nginx服务器，该命令以前台模式运行Nginx，使得容器运行时可以不被关闭。

通过使用Dockerfile，我们可以在任何Docker环境中使用Docker构建工具轻松地构建

Ps:

1.第五步中的 COPY . .

是 Dockerfile 的一条指令，用于将当前上下文中的所有文件和目录复制到容器的当前工作目录中。其中第一个点号 . 表示 Dockerfile 上下文中的当前目录，第二个点号 . 表示容器中的当前工作目录。

这条指令在将本地的 Vue.js 应用复制到容器中的 /app 目录时使用，即将本地的 ./dist 目录下的文件复制到容器中的 /app 目录下。

2.第九步中的COPY --from=build /app/dist /usr/share/nginx/html

这个命令是将上一步中编译出来的 Vue.js 应用静态文件复制到 Nginx 中用于服务的目录中。具体来说：

COPY 是 Dockerfile 中用于将本地文件或目录复制到容器中的命令。
--from=build 是从上一个阶段（即 FROM build 定义的阶段）中复制文件。
/app/dist 是上一个阶段编译出来的 Vue.js 应用静态文件所在的目录。
/usr/share/nginx/html 是 Nginx 中默认的服务目录，该目录下的文件会被 Nginx 作为静态文件服务。将 Vue.js 应用静态文件复制到该目录下，即可通过 Nginx 提供服务。

综合起来，这条命令的作用是将编译出来的 Vue.js 应用静态文件复制到 Nginx 中用于服务的目录中，从而实现在 Docker 容器中部署 Vue.js 应用。

在这个 Dockerfile 中，COPY --from=build /app/dist /usr/share/nginx/html 这一行命令是在 Nginx 镜像中执行的。这个命令的意思是从前面定义的 build 阶段复制 /app/dist 目录中的文件到当前的容器中的 /usr/share/nginx/html 目录下，作为 Nginx 服务器的默认站点。这个关系是在 Dockerfile 中定义的。

我们可以把这个 Dockerfile 中的过程大致理解为：

在第一阶段中，定义了一个名为 build 的阶段，使用 Node.js 镜像，然后将应用的源代码复制到镜像中，并使用 npm install 安装依赖，最后使用 npm run build 命令打包应用，生成静态资源文件。
在第二阶段中，使用 Nginx 镜像，将前一个阶段生成的静态资源文件复制到 Nginx 的默认站点目录 /usr/share/nginx/html 下，然后启动 Nginx 服务器，用于提供服务。

在这个过程中，使用了多个 Docker 镜像作为容器运行的环境，但是在 Dockerfile 中，使用了 FROM 和 COPY --from 这样的关键字来定义镜像间的依赖和关系，从而实现了主从关系的设置。

3.在项目中的环境变量可以使用ENV关键字来设置

ENV NODE_ENV=production
ENV API_URL=http://localhost:3000

也可以在启动容器时动态设置环境变量，可以使用 docker run 命令的 -e 选项来设置。比如：

docker run -e NODE_ENV=production -e API_URL=http://localhost:3000 my-app-image

来自chat-GPT的使用docker部署vue项目的教学

猜你喜欢