docker搭建vue自动部署

简介: 现在写项目吧,每次都要打包,懒得时候直接在服务器运行开发环境了,这有跟没有生产环境一个样。因此,为了自己更懒,也借于cvat对react的自动打包,写了一个对vue的自动打包

现在写项目吧,每次都要打包,懒得时候直接在服务器运行开发环境了,这有跟没有生产环境一个样。

因此,为了自己更懒,也借于cvat对react的自动打包,写了一个对vue的自动打包

Dockerfile如下
FROM node:lts-buster AS vue
# Install dependencies
COPY vue/package*.json /tmp/vue/
RUN npm install -g cnpm --registry=https://registry.npm.taobao.org
# Install vue dependencies
WORKDIR /tmp/vue/
RUN cnpm install
# Build source code
COPY vue/ /tmp/vue/
RUN npm run build
FROM nginx:mainline-alpine
# 配置nginx
COPY vue/nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=cvat-ui /tmp/vue/dist /usr/share/nginx/html/

就这样,轻松上线啦

目录
相关文章
|
前端开发 JavaScript Java
Docker打包前端vue代码推送镜像到远程仓库
Docker打包前端vue代码推送镜像到远程仓库 Docker打包前端vue代码推送镜像到远程仓库 业务场景:📝1.将前端代码www包解压后放在本地临时目录,然后创建一个dockerfile📜 2.登陆自己远程仓库📒3.构建镜像🔖4.给镜像打tag📖5.推送镜像到远程仓库🖊️最后总结 业务场景: 需要将本地前端代码推送到远程镜像仓库 📝1.将前端代码www包解压后放在本地临时目录,然后创建一个dockerfile
180 1
|
7月前
|
前端开发 应用服务中间件 nginx
Nginx配置详解Docker部署Nginx使用Nginx部署vue前端项目
Nginx配置详解Docker部署Nginx使用Nginx部署vue前端项目
671 0
|
前端开发 JavaScript 应用服务中间件
【Docker篇】vue前端项目部署
首先打包编译生成一系列的静态文件(dist),然后把这些文件scp(放)到远程部署的服务器中,放完之后配置nginx指向到你存放静态资源的目录,完成nginx指向才能保证请求能访问到相应的资源
777 0
【Docker篇】vue前端项目部署
|
7月前
|
JavaScript 应用服务中间件 nginx
Docker 部署 Vue
在 Docker 中使用 Node 和 Nginx 基础镜像来部署一个 Vue 项目,通常可以按照以下步骤进行。这些步骤涵盖了从构建 Vue 项目到配置 Dockerfile 和 Nginx 的过程。
79 1
|
7月前
|
JavaScript 前端开发 Docker
全栈开发实战:结合Python、Vue和Docker进行部署
【4月更文挑战第10天】本文介绍了如何使用Python、Vue.js和Docker进行全栈开发和部署。Python搭配Flask创建后端API,Vue.js构建前端界面,Docker负责应用的容器化部署。通过编写Dockerfile,将Python应用构建成Docker镜像并运行,前端部分使用Vue CLI创建项目并与后端交互。最后,通过Nginx和另一个Dockerfile部署前端应用。这种组合提升了开发效率,保证了应用的可维护性和扩展性,适合不同规模的企业使用。
348 4
|
7月前
|
JavaScript Java jenkins
如何利用CentOS7+docker+jenkins+gitee部署springboot+vue前后端项目(保姆教程)
如何利用CentOS7+docker+jenkins+gitee部署springboot+vue前后端项目(保姆教程)
325 0
|
7月前
|
资源调度 JavaScript 前端开发
如何使用 Docker 来部署 Vue 项目?
【2月更文挑战第8天】
1060 2
|
7月前
|
JavaScript Docker 容器
vue打Docker镜像动态获取IP-nginx做的web服务
vue打Docker镜像动态获取IP-nginx做的web服务
60 0
|
7月前
|
JavaScript 应用服务中间件 nginx
docker安装的nginx放在html文件下的vue项目404解决
docker安装的nginx放在html文件下的vue项目404解决
126 0
|
前端开发 应用服务中间件 nginx
docker Compose 部署springboot+vue前端端分离项目
docker Compose 部署springboot+vue前端端分离项目
521 0
下一篇
DataWorks