例如:docker pull registry.cn-shanghai.aliyuncs.com/xx/vuejs-demo-v1.0.0) 5.3.3 运行vue镜像 docker -d -p 本机端口号:容器端口号 --name=xx 镜像名字 (例如 docker -d -p 1233:1233 --name=vuejs-demo-v1.0.0 registry.cn-shanghai.aliyuncs.com/xx/vuejs-demo-v1.0.0) 5.4 将端口添加到...
四、开始构建项目docker镜像 注意:需cd到‘dist’文件所在的根目录下进行操作 指令:docker build -tvue-project:1.0. 五、创建docker容器并运行 1、分两种情况,这里我用的第一种情况 ① 第一种情况,基于SSL的https格式,需要映射443端口 指令:docker run -d -p 8081:443 -v /etc/timezone:/etc/timezone:ro...
(1)-it 交互式 (2)-p 99:80 指定映射端口(首先在本地查看项目的端口号是多少) (3)-v /home/xieyingpeng/c/vue-ui:/usr/ruoyi-ui 把该路径下文件读取到后面一个创建的路径中 (4)后面一个是npm 的ID号 镜像 启动进入 (5)进入我们创建的文件usr中 然后我们可以看见当前文件夹下有我们的项目代码了 (...
用vue cli 创建一个vue项目,修改一下创建出来的项目,在页面上写一个前端接口请求,构建一版线上资源 ,基于nginx docker镜像构建成一个前端工程镜像,然后基于这个前端工程镜像,启动一个容器 vuenginxcontainer。 启动一个基于 node 镜像的容器 nodewebserver,提供后端接口。 修改vuenginxcontainer 的 nginx 配置,使前端...
1.安装好 nginx 。 2. 把 vue 项目的源码克隆到确定目录下。用 git 管理,所以直接 git clone 到既定目录就行了。 如我的目录是:/root/jiangyu/projects/gentle_vue/gentle_vue_code 。 3. 项目打包: 代码语言:javascript 复制 npm run build
Docker部署nginx+vue项目并运行 一、打包VUE项目 npm run build:prod 二、编写default.conf 文件 server { listen80; server_name localhost; #charset koi8-r; #access_log logs/host.access.log main; location/{ root/usr/share/nginx/html; try_files $uri $uri/ /index.html;...
现在执行docker info,可以查看到docker的一些信息,说明已经安装成功了。下面就对Vue项目进行配置 Vue项目配置 根目录添加Dockerfile文件 touch nginx.conf user nginx;worker_processes 1;error_log /var/log/nginx/error.log warn;pid /var/run/nginx.pid;events { ...
查看vue项目package.json "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, 然后使用如下命令编译到dist文件夹下 npm run build 编译之后会生成到dist文件夹下,这里我们会遇到一个问题,先我们查看vue.config.js文件 ...
从0 开始 之 Docker部署Vue项目 什么是Docker 装应用的容器 开发、测试、运维都偏爱的容器化技术 轻量级 扩展性 一次构建、多次分享、随处运行 原理 对Docker 最简单并且带有一定错误的认知就是 “Docker 是一种性能非常好的虚拟机”。 Docker 相比于传统虚拟机的技术来说先进了不少,具体表现在 Docker 不是在宿...
首先,选择一个创建好的Vue项目(本案例是采用一个前后端分离的单页Vue项目) 接下来,运行 npm run build 命令,生成一个打包的 dist 文件(ps:具体打包命名根据项目配置而定。)你会发现,项目中多了一个 dist 文件夹。 获取Nginx镜像 本案例的Vue 项目是一个前后端分离项目,前端界面在服务器上只需要能被外部访问到...