npm runbuild# 执行该指令后,在项目根目录中生成dist文件夹 5、将dist文件夹压缩并上传到挂载目录中:/usr/local/nginx/ 6、进入挂载目录,并解压出dist目录,我们的index.html则在dist目录下: 7、在与dist同目录下,创建Dockerfile文件,vim Dockerfile: FROMnginxCOPY./dist/ /usr/share/nginx/html/COPY./default...
本文主要是使用docker来部署vue项目,那vue项目是必不可少了。 创建测试vue项目 根据使用vue的版本不同,创建的命令不同,这个自行去了解,本文使用vue2来创建,创建及编译命令如下 # 使用vue2创建应用 vue init webpack "vue-docker" # 初始化依赖包 npm install # 运行 npm run dev # 打包 npm run build 构建...
这样一来,当运行npm run serve的时候,就会运行.env和.env.development文件,process.env.VUE_APP_baseUrl就会被赋值为"http://localhost:8080/dcxt/shop/",(这里有个坑,就是这几个baseurl必须用双引号,不能用单引号,不然部署到测试环境的时候会直接把这个当字符拼接在当前路劲之后。) 而当运行npm run test 就...
1.安装好 nginx 。 2. 把 vue 项目的源码克隆到确定目录下。用 git 管理,所以直接 git clone 到既定目录就行了。 如我的目录是:/root/jiangyu/projects/gentle_vue/gentle_vue_code 。 3. 项目打包: 代码语言:javascript 复制 npm run build 会自动生成 dist 文件夹 。 4. 在任意目录下新建文件 dockerf...
一. Vue项目打包 这里说下,我服务器本身就有Nginx服务,所以我只需要将Vue项目进行打包然后上传到服务器,Nginx能访问到即可,并未使用到Docker进行构建 1.1 通过命令打包 进到项目根目录然后执行打包命令 代码语言:javascript 复制 cd 项目根目录 npm run build:prod ...
部署步骤: 安装docker 拉取java:8镜像,后端项目使用maven打包,上传jar包到服务器指定目录/mydata,编写Dockerfile文件,将后端项目打成镜像文件。 拉取mysql:8.0.19、redis:6.0.8、nginx:1.18.0镜像。 编写docker-compose.yml文件,使用docker-compose容器编排管理容器运行。
用vue cli 创建一个vue项目,修改一下创建出来的项目,在页面上写一个前端接口请求,构建一版线上资源 ,基于nginx docker镜像构建成一个前端工程镜像,然后基于这个前端工程镜像,启动一个容器 vuenginxcontainer。 启动一个基于 node 镜像的容器 nodewebserver,提供后端接口。
在使用docker-compose之前先执行该命令开启docker服务:sudo systemctl start docker * docker-compose.yml version:"3" services:#指定服务名称 web-service: container_name:front-lib-web#指定容器名称 ports: -"6888:6888"# 左侧为docker暴露端口 右侧为nginx端口(服务器端口) ...
docker network inspect my-net 一、前端部署 核心步骤——在运行容器时,将宿主机配置文件、网页文件挂接到docker容器的响应目录。 1、宿主机创建目录,用于存放build之后的前端文件,以及nginx配置文件。 创建文件,如果父目录不存在,同样会创建其父目录 mkdir -p /home/haben/mtms/nginx/conf ...
一、准备工作 1. 首先在项目根目录创建Dockerfile文件 文件内容为: 2. 在项目根目录创建 nginx.conf 文件 文件内容为: 二、打包镜像并上传阿里云私有...