nginx 部署vue前端配置

在Kubernetes(K8S)中部署Vue前端应用并配置nginx是一个常见的操作，本文将教你如何完成这个过程。首先，让我们来了解整个流程，然后详细说明每个步骤需要做什么。

### 流程概述

在K8S中部署Vue前端应用并配置nginx的流程如下：

| 步骤 | 描述 |
| ---- | ---- |
| 步骤一 | 创建Vue前端应用Docker镜像 |
| 步骤二 | 编写nginx配置文件 |
| 步骤三 | 创建K8S Deployment和Service对象 |
| 步骤四 | 部署应用到Kubernetes集群 |

### 详细步骤及代码示例

#### 步骤一：创建Vue前端应用Docker镜像

1. 首先，在Vue前端应用的根目录下创建Dockerfile文件，内容如下：

```Dockerfile
# 使用Node.js作为基础镜像
FROM node:14.17.0 as build

# 设置工作目录
WORKDIR /app

# 拷贝项目文件
COPY package.json .
COPY yarn.lock .

# 安装依赖
RUN yarn install

# 拷贝所有文件
COPY . .

# 构建Vue应用
RUN yarn build

# 使用nginx作为基础镜像
FROM nginx:1.21.3

# 复制构建输出到nginx目录
COPY --from=build /app/dist /usr/share/nginx/html

# 指定nginx监听的端口
EXPOSE 80

# 启动nginx服务
CMD ["nginx", "-g", "daemon off;"]
```

2. 使用以下命令构建Vue前端应用的Docker镜像：

```bash
docker build -t vue-frontend .
```

#### 步骤二：编写nginx配置文件

在Vue前端应用的根目录下创建nginx.conf文件，内容如下：

```nginx
server {
listen 80;
server_name localhost;

location / {
root /usr/share/nginx/html;
index index.html;
try_files $uri $uri/ /index.html;
}
}
```

#### 步骤三：创建K8S Deployment和Service对象

1. 创建Deployment对象的yaml文件，如下所示：

```yaml
apiVersion: apps/v1
kind: Deployment
metadata:
name: vue-frontend
spec:
replicas: 3
selector:
matchLabels:
app: vue-frontend
template:
metadata:
labels:
app: vue-frontend
spec:
containers:
- name: vue-frontend
image: vue-frontend
ports:
- containerPort: 80
```

2. 使用以下命令创建Deployment对象：

```bash
kubectl apply -f deployment.yaml
```

3. 创建Service对象的yaml文件，如下所示：

```yaml
apiVersion: v1
kind: Service
metadata:
name: vue-frontend-service
spec:
selector:
app: vue-frontend
ports:
- protocol: TCP
port: 80
targetPort: 80
type: LoadBalancer
```

4. 使用以下命令创建Service对象：

```bash
kubectl apply -f service.yaml
```

#### 步骤四：部署应用到Kubernetes集群

1. 部署Vue前端应用到Kubernetes集群：

```bash
kubectl apply -f deployment.yaml
kubectl apply -f service.yaml
```

2. 确认应用部署成功：

```bash
kubectl get pods
kubectl get services
```

### 总结

通过以上步骤，你已经成功在Kubernetes集群中部署Vue前端应用并配置nginx。希望本文能够帮助你顺利完成这一过程，如果有任何问题，请随时向我提问。祝你学习顺利！