背景

使用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

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

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

我们的第一阶段将：

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

FROM node:10 AS builderWORKDIR /appCOPY . .RUN yarn install && yarn build

我们的第二阶段将：

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

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

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

FROM node:10 AS builderWORKDIR /appCOPY . .RUN yarn install && yarn buildFROM nginx:alpineWORKDIR /usr/share/nginx/htmlRUN 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

然后访问即可访问vue应用程序。