首先,确保你的Vue 3项目已经构建完成,并且生成了静态文件。这通常是通过运行以下命令来完成的: bash npm run build 或者如果你使用的是Yarn: bash yarn build 这个命令会生成一个dist目录,里面包含了构建后的静态文件,这些文件将用于Docker部署。 2. 编写Dockerfile来定义Docker镜像 在项目的根目录下创建一个名...
当前是直接把宿主机数据挂在到容器默认路径,容器删除后需要重新挂载,如果需要持久化docker数据管理,可以挂载到容器的数据卷。 docker run--name postgis--restart always-e POSTGRES_PASSWORD='password'-v/home/haben/mtms/postgis:/var/lib/postgresql/data--privileged=true-p5433:5432-d--network my-net pgro...
1.编译打包 2.准备部署 2.1.跟随SpringBoot项目一同部署 2.2.在nginx上部署 2.2.1.安装nginx 2.2.2.修改配置文件 2.2.3.将项目移动到root对应的文件夹 2.2.4.启动/重启nginx以开启项目 2.2.5.服务器配置安全组(防火墙) 2.2.6.访问 1.编译打包 代码编写完毕后,在终端输入 vue ui 1. 随后就会在项目中生成...
docker使用nginx镜像部署vue3项目 1、打包 2、上传到服务器并解压(我已经解压) 3、修改nginx.conf配置文件 4、部署 代码语言:docker 复制 docker run -d \ --name vue-nginx \ -p 8091:80 \ -v /usr/local/nginx/conf/nginx.conf:/etc/nginx/nginx.conf:ro \ -v /usr/local/nginx/dist:/usr/share...
7、开始部署自己的项目 7.1、开始将自己的vue前端项目打包到dist目录 pnpm build 7.2、在本地创建一个Dockerfile FROM nginx:latest# 将项目根目录下dist文件夹下的所有文件复制到镜像中 /usr/share/nginx/html/ 目录下COPY dist/ /usr/share/nginx/html/COPY default.conf /etc/nginx/conf.d/default.conf ...
1. 创建一个vue项目 相信大部分人都已经知道怎么创建项目的,可以跳过这一节,看下一节。 1.1 安装@vue/cli # 全局安装 vue-cli脚手架npm install -g @vue/cli 等待安装完成后开始下一步 1.2 初始化项目 vue create vue-cli3-project 选择一个预设 ...
本篇主要是在本地用docker部署mysql、vue项目和springboot项目,记录一下。 一、docker部署mysql 我的环境是win10,用的是docker desktop。安装很简单。照着官网的步骤安装即可。 接下来部署mysql 1.1 创建目录 首先在D盘创建目录,这里的目录是为了容器内部挂载数据,方便我们查看数据。
docker构建vue3前端项目 前端是基于vue3开发typescript项目,打包之后将生成的dist静态资源放到我们准备好的目录下,然后在这个目录下创建一个Dockerfile文件和nginx.conf配置文件,做如下配置: FROM nginx:1.24.0WORKDIR/usr/share/nginx/html COPY dist/usr/share/nginx/html/COPY nginx.conf/etc/nginx/nginx.conf ...
其中,Docker和Jenkins是两个广泛使用的工具,它们可以无缝地结合在一起,实现应用程序的容器化和自动化部署。本文将指导你如何使用Docker和Jenkins来自动化部署Vue3+Vite前端项目。我们将通过以下步骤完成这个过程: 构建Vue3+Vite应用程序 创建Docker镜像 配置Jenkins 自动化部署流程一、构建Vue3+Vite应用程序首先,你需要...
2. 部署 2.1 使用Vue生成前端文件 2.2 创建Docker file文件 2.3 配置Nginx代理 2.4 Docker打包镜像并运行镜像 2.5 测试 3. 踩坑总结 1. 前言 由于项目使用的前后端分离结构,采用nginx作为服务器代理前端解决跨域问题。 阅读本文之前,需要有了解过Docker、Vue、Nginx、CORS内容。