vue项目docker nginx部署
时间: 2024-04-16 16:21:17 浏览: 9
Vue项目的Docker+Nginx部署可以通过以下步骤完成:
1. 创建Dockerfile:在Vue项目的根目录下创建一个名为Dockerfile的文件,内容如下:
```
# 使用Node作为基础镜像
FROM node:14 as build-stage
# 设置工作目录
WORKDIR /app
# 复制package.json和package-lock.json到工作目录
COPY package*.json ./
# 安装依赖
RUN npm install
# 复制所有文件到工作目录
COPY . .
# 构建项目
RUN npm run build
# 使用Nginx作为基础镜像
FROM nginx:1.21-alpine
# 将构建好的项目复制到Nginx的默认静态文件目录
COPY --from=build-stage /app/dist /usr/share/nginx/html
# 复制Nginx配置文件到容器中
COPY nginx.conf /etc/nginx/conf.d/default.conf
# 暴露80端口
EXPOSE 80
# 启动Nginx服务
CMD ["nginx", "-g", "daemon off;"]
```
2. 创建Nginx配置文件:在Vue项目的根目录下创建一个名为nginx.conf的文件,内容如下:
```
server {
listen 80;
server_name localhost;
location / {
root /usr/share/nginx/html;
index index.html;
try_files $uri $uri/ /index.html;
}
}
```
3. 构建Docker镜像:在终端中进入Vue项目的根目录,执行以下命令构建Docker镜像:
```
docker build -t vue-app .
```
其中,`vue-app`是镜像的名称,可以根据需要自行修改。
4. 运行Docker容器:执行以下命令运行Docker容器,并将容器的80端口映射到主机的指定端口(例如8888):
```
docker run -d -p 8888:80 vue-app
```
其中,`8888`是主机的端口号,可以根据需要自行修改。
至此,Vue项目的Docker+Nginx部署就完成了。你可以通过访问`http://localhost:8888`来查看部署后的项目。