nginx docker部署多个vue项目
时间: 2023-09-24 10:03:44 浏览: 93
您可以使用 Docker 和 Nginx 部署多个 Vue 项目。下面是一种可能的方法:
1. 创建 Docker 镜像:为每个 Vue 项目创建一个 Docker 镜像。您可以在每个项目的根目录中创建 Dockerfile 文件,并指定项目的构建和运行步骤。以下是一个示例 Dockerfile:
```Dockerfile
# 定义基础镜像
FROM node:14 as build
# 设置工作目录
WORKDIR /app
# 拷贝 package.json 和 package-lock.json 文件
COPY package*.json ./
# 安装依赖
RUN npm install
# 拷贝项目文件
COPY . .
# 构建项目
RUN npm run build
# 定义 Nginx 镜像
FROM nginx:1.19
# 删除默认配置文件
RUN rm /etc/nginx/conf.d/default.conf
# 将自定义 Nginx 配置文件复制到容器中
COPY nginx.conf /etc/nginx/conf.d/
# 将构建好的 Vue 项目复制到 Nginx 的静态文件目录中
COPY --from=build /app/dist /usr/share/nginx/html
# 暴露 Nginx 默认端口
EXPOSE 80
# 启动 Nginx 服务
CMD ["nginx", "-g", "daemon off;"]
```
请确保在每个项目的根目录中创建相应的 nginx.conf 配置文件,以正确配置 Nginx。以下是一个示例配置文件:
```nginx
server {
listen 80;
root /usr/share/nginx/html;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
}
```
2. 构建 Docker 镜像:对于每个项目,使用以下命令在项目根目录中构建 Docker 镜像(假设 Dockerfile 和 nginx.conf 配置文件已准备好):
```bash
docker build -t project1 .
```
3. 运行 Docker 容器:使用以下命令在不同的端口上运行每个项目的 Docker 容器(示例中使用端口号 8081 和 8082):
```bash
docker run -d -p 8081:80 project1
docker run -d -p 8082:80 project2
```
现在,您应该可以通过访问相应的端口号来访问每个项目。例如,通过访问 `http://localhost:8081` 来访问第一个项目,通过访问 `http://localhost:8082` 来访问第二个项目。
注意:如果您的项目需要处理后端 API 请求,您可能需要在 Nginx 配置文件中添加适当的代理规则。