背景

使用Vue框架创建一个网站，掌握如何使用nginx在Docker容器中提供服务。

首先，我们将使用Vue CLI生成入门Vue应用程序，我们将这个应用命名vue-nginx-docker

npx @vue/cli create vue-nginx-docker

创建应用程序后，进入到新的应用程序文件夹

cd vue-nginx-docker

现在我们需要几个文件才能与Docker一起使用：Dockerfile和一个.dockerignore文件。

touch Dockerfile

对于我们的.dockerignore文件，请确保像忽略git一样忽略我们的依赖文件node_modules。

echo "node_modules" > .dockerignore

构建Dockerfile

这里我们通过使用Docker的多阶段multi-stage构建完成这个过程：

• 阶段1：用于构建前端资源的node镜像
• 阶段2：Nginx阶段为前端资源提供服务的

阶段1：构建前端文件

我们的第一阶段将：

• 使用node镜像
• 将我们所有的Vue文件复制到工作目录中
• 用yarn安装项目依赖项
• 用yarn构建应用程序

FROM node:10 AS builder
WORKDIR /app
COPY . .
RUN yarn install && yarn build

阶段2：准备Nginx服务

我们的第二阶段将：

• 使用Nginx镜像
• 从Nginx镜像中删除所以不需要的静态文件
• 从builder我们在第一阶段创建的容器中复制我们的静态文件
• 为我们的容器指定入口点以运行nginx

FROM nginx:alpine
WORKDIR /usr/share/nginx/html
RUN rm -rf ./*
COPY --from=builder /app/dist .
ENTRYPOINT ["nginx", "-g", "daemon off;"]

重要的是，Vue的dist默认将静态资源构建到该文件夹中，因此我们从那里复制文件。如果您的应用由于某种原因将文件构建到另一个文件夹中，请进行相应调整。这里我们就完成整个Dockerfile的内容了:

FROM node:10 AS builder
WORKDIR /app
COPY . .
RUN yarn install && yarn build

FROM nginx:alpine
WORKDIR /usr/share/nginx/html
RUN rm -rf ./*
COPY --from=builder /app/dist .
ENTRYPOINT ["nginx", "-g", "daemon off;"]

现在我们已经组装了Dockerfile，让我们构建一个名为vue-nginx的镜像：

docker build -t vue-nginx .

现在我们的镜像已构建，我们可以使用以下命令启动一个容器，该容器将在端口8080上为我们的应用程序提供服务。

docker run --rm -it -p 8080:80 vue-nginx

然后访问http://localhost:8080即可访问vue应用程序。