让我们使用Vue框架创建一个网站，并学习如何使用nginx在Docker容器中为其服务。我们将使用Vue CLI来生成一个初始的Vue应用程序。

我们将把这个应用命名为vue-nginx-docker 。

npx @vue/cli create vue-nginx-docker

在本教程中，我将使用yarn，所以如果你想完全跟上，请确保在生成应用程序时选择 "yarn"。选择npm也是完全可以的，你只需要相应地调整一些Docker命令。

一旦应用程序设置好了，就导航到新的应用程序文件夹。

cd vue-nginx-docker

现在我们知道我们需要几个文件来与Docker一起使用：一个Dockerfile 和一个.dockerignore 文件。现在让我们来制作它们。

touch Dockerfile

对于我们的.dockerignore 文件，让我们确保忽略我们在node_modules 中的依赖文件，就像我们在git中那样。

echo "node_modules" > .dockerignore

构建Docker文件

是时候建立Docker文件了！我们可以用很多方法来建立Docker文件。我们有很多方法可以做到这一点，但今天我们将使用一个多阶段的过程。

阶段1：用于构建前端资产的Node镜像
阶段2：nginx阶段，为前端资产提供服务

第一阶段：构建前端资产

我们的第一个阶段将

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

这是Docker中的样子!

# Name the node stage "builder"
FROM node:10 AS builder
# Set working directory
WORKDIR /app
# Copy all files from current directory to working dir in image
COPY . .
# install node modules and build assets
RUN yarn install && yarn build

接下来，我们实际上是为我们刚刚建立的内容提供服务

第二阶段：我们的nginx服务器

我们的第二个阶段将。

使用一个nginx镜像
从nginx镜像中删除任何默认的静态资产
从我们在第一阶段创建的builder 镜像中复制我们的静态资产
为我们的容器指定运行nginx的入口。

下面是这个阶段在Docker文件中的样子。

# nginx state for serving content
FROM nginx:alpine
# Set working directory to nginx asset directory
WORKDIR /usr/share/nginx/html
# Remove default nginx static assets
RUN rm -rf ./*
# Copy static assets from builder stage
COPY --from=builder /app/dist .
# Containers run nginx with global directives and daemon off
ENTRYPOINT ["nginx", "-g", "daemon off;"]

重要的是，Vue默认将静态资产构建到dist ，所以我们从那里复制我们的文件。如果你的应用程序由于某种原因将文件放到另一个文件夹中，请进行相应调整。

把它放在一起

好了！让我们把这一切都放在一起，然后把它放在我们的网站上。让我们把这一切放在一起并运行我们的应用程序。

我们的多阶段Docker文件现在应该是这样的。

# Multi-stage
# 1) Node image for building frontend assets
# 2) nginx stage to serve frontend assets

# Name the node stage "builder"
FROM node:10 AS builder
# Set working directory
WORKDIR /app
# Copy all files from current directory to working dir in image
COPY . .
# install node modules and build assets
RUN yarn install && yarn build

# nginx state for serving content
FROM nginx:alpine
# Set working directory to nginx asset directory
WORKDIR /usr/share/nginx/html
# Remove default nginx static assets
RUN rm -rf ./*
# Copy static assets from builder stage
COPY --from=builder /app/dist .
# Containers run nginx with global directives and daemon off
ENTRYPOINT ["nginx", "-g", "daemon off;"]

现在我们已经组装好了我们的Docker文件，让我们建立一个名为vue-nginx 的镜像。

docker build -t vue-nginx .

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

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

导航到http://localhost:8080，现在你应该看到我们的默认Vue应用程序了

如何在Docker中用nginx服务Vue应用程序

构建Docker文件

第一阶段：构建前端资产

第二阶段：我们的nginx服务器

把它放在一起