在Docker中使用nginx托管vue应用程序

## 小目标

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

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

```vue
npx @vue/cli create vue-nginx-docker
```

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

```bash
cd vue-nginx-docker
```

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

```bash
touch Dockerfile
```

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

```bash
echo "node_modules" > .dockerignore
```

## 构建Dockerfile

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

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

### 阶段1：构建前端文件

我们的第一阶段将：

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

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

### 阶段2：准备Nginx服务

我们的第二阶段将：

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

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

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

```YAML
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应用程序。