腾讯云服务器部署前后分离项目之前端部署

腾讯云服务器部署前后分离项目之前端部署使用XShell连接腾讯云远程服务器使用docker命令获取Nginx镜像这里使用Nginx来作为前端的开发环境docker pull nginx查看镜像是否获取成功docker images编写Dockerfile文件FROM nginxCOPY ./dist/ /usr/share/nginx/html/使用Xftp将Dockerfile和Vue等打包好的

班乃

3733人浏览 · 2022-03-12 18:30:37

班乃 · 2022-03-12 18:30:37 发布

腾讯云服务器部署前后分离项目之前端部署

使用XShell连接腾讯云远程服务器

在这里插入图片描述

使用docker命令获取Nginx镜像

这里使用Nginx来作为前端的开发环境

docker pull nginx

查看镜像是否获取成功

docker images

在这里插入图片描述

编写Dockerfile文件

FROM nginx
COPY ./dist/ /usr/share/nginx/html/

使用Xftp将Dockerfile和Vue等打包好的前端项目放到自己想要放置的位置

使用xftp连接远程腾讯云服务器同Xshell

使用Xshell进入到Xftp上传文件的根目录

在这里插入图片描述

使用Xshell执行docker命令制作docker镜像，注意后面还有个”空格+."

#iname是你给将要创建的镜像进行所命的名
docker build -t iname .

这里我的镜像名字叫hncj-web

使用Xshell执行docker命令用刚才创建的镜像映射出一个新的容器

#cname是给将要创建的容器的命名，iname是容器所映射的镜像名字
#8080是外部方位的接口，8081是容器内的接口
 docker run -d --restart=always --name cname -p 8080:8081 iname

这里我的容器名字叫hncj-web

使用你服务器的外网IP加你所设置的端口号访问

这是我自己的项目运行界面

在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^