深圳个人网站建设,dw个人网页模板,网店运营数据分析,外部调用wordpress站点文章基于dockerrancher部署Vue的教程
前段时间总有前端开发问我Vue如何通过docker生成镜像#xff0c;并用rancher上进行部署#xff1f;今天抽了2个小时研究了一下#xff0c;给大家记录一下这个过程。该部署教程适用于Vue、Vue2、Vue3等版本。 PS#xff1a;该教程基于有一定…基于dockerrancher部署Vue的教程
前段时间总有前端开发问我Vue如何通过docker生成镜像并用rancher上进行部署今天抽了2个小时研究了一下给大家记录一下这个过程。该部署教程适用于Vue、Vue2、Vue3等版本。 PS该教程基于有一定Vue、docker 、harbor 、rancher 的认知如果不知道的或者不具备环境的自行百度了解
1.根据自身项目先能正常跑起自身代码
PS运行下面指令前自身项目下的package.json必须是要有“dev”这个描述。
npm run dev2.Vue项目进行打包
PS与第1点同理。
npm run build成功打包后会在项目的根目录下生成dist文件夹并且有index.html的文件。
3.在项目根目录下添加nginx文件夹并添加default.conf的文件文件内容如下 server {listen 80;//该端口是监听的端口可以根据自己需要进行修改。#charset koi8-r;access_log /var/log/nginx/host.access.log;location / {root /usr/share/nginx/html;index index.html index.htm;try_files $uri $uri/ /index.html; # 这个非常重要采用vue-router的时候必须配置这个}#error_page 404 /404.html;# redirect server error pages to the static page /50x.html#error_page 500 502 503 504 /50x.html;location /50x.html {root /usr/share/nginx/html;}
}
4.在项目根目录下添加Dockerfile的文件文件内容如下 #设直基础镜像
FROM nginx
# 将dist文件中所有的内容复制到/usr/share/nginx/html/ 这个目录下面
COPY dist/ /usr/share/nginx/html/
# 用本地的 default.conf 配置来替换nginx镜像里的默认配置
COPY nginx/default.conf /etc/nginx/conf.d/default.conf5.在项目根目录下添加build.sh的文件文件内容如下
PSbuild.sh该脚本文件目的是能快速运行docker build的指令而设定的熟悉docker指令的也可以不用添加该文件。因为该文件是脚本文件所以需要添加运行权限文件添加权限的操作自行百度。
#!/usr/bin/env bash
echo start build
project_namevue;#定义自己镜像名称
app_namevue-test;#定义自己镜像名称app name 不要有下划线 _
app_version0.0.2;#定义自己镜像版本号#打印显示上述定义的参数
echo project_name:${project_name}
app_name:${app_name}
app_version:${app_version}# docker build 镜像的指令
# PS记得把【reg.quintinchen.com:5000】改为自己harbor服务器的地址推向我的服务器是没有用的echo docker build -t reg.quintinchen.com:5000/${project_name}/${app_name}:${app_version} .
docker build -t reg.quintinchen.com:5000/${project_name}/${app_name}:${app_version} .
echo docker push reg.quintinchen.com:5000/${project_name}/${app_name}:${app_version}
docker push reg.quintinchen.com:5000/${project_name}/${app_name}:${app_version}
6.运行build.sh的脚本文件后docker镜像生成、并成功推送到harbor仓库后打开自己的rancher页面进行配置 如上配置其余默认即可配置完成点击【升级】
