Dockerfile 一键部署Vue项目

最新推荐文章于 2024-07-15 10:19:30 发布

杰哥力挽狂澜

最新推荐文章于 2024-07-15 10:19:30 发布

阅读量450

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_45870300/article/details/129594547

版权

该文章介绍了如何通过Dockerfile将Vue前端项目部署到nginx服务器。首先，前端项目被打包生成dist目录。接着，创建Dockerfile，基于node最新镜像构建，并安装依赖，执行build命令。然后，利用nginx镜像，复制配置文件和前端打包后的静态资源。最后，说明了在服务器上如何构建镜像并运行容器来启动服务。

摘要由CSDN通过智能技术生成

Dockerfile 一键部署Vue项目

第一步

第一先把前端打包目录下面就会出现 dist

第二步

编写 Dockerfile 文件名字可改可不改

FROM node:latest as builder
WORKDIR /jayvuedockerfiledemocode
COPY package.json ./
RUN npm install
COPY . .
RUN npm run build
FROM nginx:latest
COPY /nginx.conf /etc/nginx
COPY --from=builder /jayvuedockerfiledemocode/dist  /usr/share/nginx/html

第三步

编写 nginx.conf 文件备用

nginx.conf 文件我这就简单写一下了按照自己需求去

events {
  worker_connections  1024;
}
http{
  server {
    listen       80;
    server_name  localhost;
    location / {
      root   /usr/share/nginx/html;
      index  index.html index.htm;
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
      root   /usr/share/nginx/html;
    }
  }
}