假如我们有一个 vue-cli 项目，我们想通过 Dockerfile 文件构建一个镜像，用于部署该 vue-cli 项目。项目结构如下图：
以下是使用 Dockerfile 构建镜像的步骤：
FROM ubuntu:latest
RUN apt-get update && apt-get install -y nginx curl npm
COPY . /app
WORKDIR /app
RUN npm install --registry=https://registry.npm.taobao.org
RUN npm run build
RUN rm -rf node_modules
RUN cat <<EOF > /etc/nginx/conf.d/demo_app.conf
server {
listen 8080;
server_name localhost;
location / {
root /app/dist;
index index.html index.htm;
}
}
EOF
EXPOSE 8080
CMD ["nginx", "-g", "daemon off;"]Dockerfile 分析：
FROM ubuntu:latest：使用最新的 Ubuntu 作为基础镜像，为后续的安装和配置提供了一个干净的环境。
RUN apt-get update && apt-get install -y nginx curl npm：更新软件包列表并安装 Nginx、curl 和 Node.js 的包管理器 npm。这些软件将在后续的步骤中用于服务部署和构建应用。
COPY. /app：将当前目录下的所有文件复制到容器内的 /app 目录。
WORKDIR /app：设置工作目录为 /app，后续的命令将在这个目录下执行。
RUN npm install --registry=https://registry.npm.taobao.org：使用淘宝的 npm 镜像源安装项目的依赖包，这可以加快依赖包的下载速度。
RUN npm run build：运行项目的构建命令，通常用于将前端项目进行编译、打包等操作，生成可部署的静态文件。
RUN rm -rf node_modules：删除 node_modules 目录，可能是为了减小镜像的大小或者避免不必要的文件占用空间。
RUN cat <<EOF > /etc/nginx/conf.d/demo_app.conf：通过这里的命令创建 Nginx 的配置文件，配置文件中指定了监听端口为 8080，服务器名称为 localhost，并将 /app/dist 目录设置为静态文件的根目录，当访问时会查找 index.html 和 index.htm 文件作为默认页面。
EXPOSE 8080：声明容器将在运行时监听 8080 端口，以便外部可以访问。
CMD ["nginx", "-g", "daemon off;"]：设置容器启动时运行的命令为启动 Nginx，并且以非守护进程模式运行，这样可以确保容器在前台运行，方便查看日志和进行调试。
总结，该 Dockerfile 的目的是创建一个包含 Nginx 和前端应用的容器，通过 Nginx 来提供前端应用的静态文件服务。可以根据实际情况进行调整和优化，例如添加更多的环境变量、优化构建过程或者调整 Nginx 的配置以满足特定的需求。
在这里使用 docker build 命令构建镜像：
root@hxstrive:~/demo_app# docker build -t demo_app . [+] Building 49.9s (13/13) FINISHED docker:default => [internal] load build definition from Dockerfile 0.0s => => transferring dockerfile: 561B 0.0s => [internal] load metadata for docker.io/library/ubuntu:latest 0.0s => [internal] load .dockerignore 0.0s => => transferring context: 2B 0.0s => [1/8] FROM docker.io/library/ubuntu:latest 0.0s => [internal] load build context 0.0s => => transferring context: 629B 0.0s => CACHED [2/8] RUN apt-get update && apt-get install -y nginx curl npm 0.0s => CACHED [3/8] COPY . /app 0.0s => CACHED [4/8] WORKDIR /app 0.0s => [5/8] RUN npm install --registry=https://registry.npm.taobao.org 30.1s => [6/8] RUN npm run build 12.6s => [7/8] RUN rm -rf node_modules 1.2s => [8/8] RUN cat <<EOF > /etc/nginx/conf.d/demo_app.conf 0.4s => exporting to image 5.2s => => exporting layers 5.2s => => writing image sha256:26b475ca556ec68f45b621eb5bb2304dbb66594d30ea2589deda874eb227550b 0.0s => => naming to docker.io/library/demo_app root@hxstrive:~/demo_app# docker images | grep demo_app demo_app latest 26b475ca556e 29 seconds ago 1.13GB
上述命令，将构建了一个名为 demo_app 的镜像。
使用 docker run 命令启动容器：
root@hxstrive:~/demo_app# docker run --name demo_app -p 8080:8080 -d demo_app 4afaff00fbbe5c23d3ef8dabbba4b4aa978dd024000d9221ef6270908330c197 root@hxstrive:~/demo_app# docker ps | grep demo_app 4afaff00fbbe demo_app "nginx -g 'daemon of…" 56 seconds ago Up 55 seconds 0.0.0.0:8080->8080/tcp, :::8080->8080/tcp demo_app
上述命令启动了一个名为 demo_app 的容器，将容器的 8080 端口映射到主机的 8080 端口。现在你可以通过 http:// 宿主机IP:8080 地址来访问你的 Vue 应用，如下图：
川公网安备51010802032098
