npm run serve 1. 3.将vue项目编译 编译项目得到dist文件夹 npm run build 1. 4.编写Dockerfile文件 直接在src同级目录下,新建名为Dockerfile的文件, 编写Dockerfile文件,Dockerfile文件,具体怎么写,参考Docker Dockerfile | 菜鸟教程,下面是例子 # Docker image for vue application # VERSION 1.0.0 # Author:...
2.1 使用Vue生成前端文件 2.2 创建Docker file文件 2.3 配置Nginx代理 2.4 Docker打包镜像并运行镜像 2.5 测试 3. 踩坑总结 1. 前言 由于项目使用的前后端分离结构,采用nginx作为服务器代理前端解决跨域问题。 阅读本文之前,需要有了解过Docker、Vue、Nginx、CORS内容。 文章之前,有必要介绍一下CORS:跨域资源共享(Cro...
一、打包vue项目 npm run build 二、docker网上拉取nginx镜像 docker pull nginx 三、vue项目打包文件放到服务器上,创建 dockerfile(参考第八点,将nginx配置文件放置在宿主机,通过dockerfile复制到镜像指定文件) [root@VM-12-13-centos vue]# mkdir dockerHRSass [root@VM-12-13-centos vue]# cd dockerHRSass...
二、Vue前端项目创建配置文件 我们需要在根目录下创建Dockerfile文件和default.conf文件。 其中default.conf文件的名称是什么无所谓,只要在配置文件中注意使用相同名称即可。 2.1 Dokcerfile文件 Dockerfile文件内容具体如下: FROMnginx:latest# 将项目根目录下dist文件夹下的所有文件复制到镜像中 /usr/share/nginx/html/...
1.在Vue项目文件下,输入npm run build进行打包,项目下生成dist文件。 2.将dist文件上传到服务器中,在同目录下创建Dockerfile文件。 3.Dockerfile内容: FROM nginx MAINTAINER jam #将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面 COPY dist/ /usr/share/nginx/html/ ...
用vue cli 创建一个vue项目,修改一下创建出来的项目,在页面上写一个前端接口请求,构建一版线上资源 ,基于nginx docker镜像构建成一个前端工程镜像,然后基于这个前端工程镜像,启动一个容器 vuenginxcontainer。 启动一个基于 node 镜像的容器 nodewebserver,提供后端接口。
在dist同级目录下创建Dockerfile文件进行写入: FROM nginx EXPOSE 80 COPY /dist /usr/share/nginx/html ENTRYPOINT nginx -g "daemon off;" 进入dict目录下的cmd中 使用root模式进行docker打包镜像操作 docker build -t docker_vue . 出现上图所示,证明打包完成 ...
1、vue_index/Dockerfile # 设置基础镜像FROMnginx# 将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面COPYdist//usr/share/nginx/html/#用本地的 default.conf 配置来替换nginx镜像里的默认配置COPYnginx/default.conf/etc/nginx/conf.d/default.conf ...
简述:Spring boot+Vue 前后端分离项目部署,主要采用docker容器部署方式。 Springboot项目部署:docker构建mysql环境+docker构建项目自身环境。 Vue项目:使用docker启动nginx服务器方式代理部署。 1.SpringBoot项目部署 项目使用mysql8.0作为数据源,所以部署时需要使用docker构建mysql环境及项目自身环境。
如我的目录是:/root/jiangyu/projects/gentle_vue/gentle_vue_code 。 3. 项目打包: 代码语言:javascript 复制 npm run build 会自动生成 dist 文件夹 。 4. 在任意目录下新建文件 dockerfile 。内容如下: 代码语言:javascript 复制 # 设置基础镜像FROMnginx ...