基于docker+rancher部署Vue项目的教程

基于docker+rancher部署Vue的教程

前段时间总有前端开发问我Vue如何通过docker生成镜像,并用rancher上进行部署?今天抽了2个小时研究了一下,给大家记录一下这个过程。该部署教程适用于Vue、Vue2、Vue3等版本。
PS:该教程基于有一定Vue、docker 、harbor 、rancher 的认知,如果不知道的,或者不具备环境的自行百度了解!

1.根据自身项目,先能正常跑起自身代码

PS:运行下面指令前,自身项目下的package.json必须是要有“dev”这个描述。
在这里插入图片描述

npm run dev

2.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.conf

5.在项目根目录下添加build.sh的文件,文件内容如下:

PS:build.sh该脚本文件目的是能快速运行docker build的指令而设定的,熟悉docker指令的也可以不用添加该文件。因为该文件是脚本文件,所以需要添加运行权限,文件添加权限的操作自行百度。
在这里插入图片描述

#!/usr/bin/env bash
echo 'start build'
project_name="vue";#定义自己镜像名称;
app_name="vue-test";#定义自己镜像名称:app name  不要有下划线 _
app_version="0.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页面,进行配置

在这里插入图片描述
在这里插入图片描述
如上配置,其余默认即可,配置完成,点击【升级】

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/756902.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Android 项目实战,APP开发,含源码

Android 项目实战,APP开发,含源码 源码项目详情 源码项目详情 切鱼达人,Android休闲游戏开发 打砖块,Android休闲小游戏开发 “牛弹琴”,Android 弹钢琴 app 开发 2048 数字合成大作战,Android小游戏开…

Flink中JobManager与TaskManage的运行架构以及原理详解

Flink中JobManager与TaskManage的运行架构详解 整体架构 Flink的运行时架构中,最重要的就是两大组件:作业管理器(JobManger)和任务管理器(TaskManager)。对于一个提交执行的作业,JobManager是真…

lang-segment-anything使用介绍

Language Segment-Anything 是一个开源项目,它结合了实例分割和文本提示的强大功能,为图像中的特定对象生成蒙版。它建立在最近发布的 Meta 模型、segment-anything 和 GroundingDINO 检测模型之上,是一款易于使用且有效的对象检测和图像分割…

软件工程-第8章 软件测试

8.1 软件测试目标域软件测试过程模型 8.2 软件测试技术 8.3 静态分析技术-程序正确性证明 8.4 软件测试步骤 8.5 本章小结

基于支持向量机(SVM)的数据时序预测(单输入输出)

代码原理 支持向量机(SVM)通常被用于处理分类问题,而对于数据时序预测(单输入输出),可以采用以下步骤使用SVM进行建模: 1. 数据准备:准备时间序列数据集,包括历史观测值和对应的目标值,按照时间顺序排列。 2. 特征提取:将时间序列数据转换为模型可接受的特征表示…

卷积神经网络五:GoogleNet

在2014年的ImageNet图像识别大赛中,一个名叫GoogleNet的网络架构大放异彩。GoogleNet使用了一种叫作Inception的结构。其实GoogleNet本质上就是一种Inception网络,而一个Inception网络又是由多个Inception模块和少量的汇聚层堆叠而成。 Inception模块 …

FPGA通过I2C控制AT24C64

文章目录 前言一、代码设计框图二、IIC_drive模块设计2.1、模块接口:2.2、代码功能描述:2.3、IIC协议实现过程: 三、EEPROM_ctrl模块设计3.1、模块接口:3.2、代码功能描述 四、EEPROM_drive模块五、iic_top模块 前言 继上一篇FPG…

Harvester基于 Kubernetes 构建的开源超融合基础架构 (HCI) 软件

Harvester 是基于 Kubernetes 构建的开源超融合基础架构 (HCI) 软件。它是使用专有 HCI 堆栈的一种开放替代方案,该堆栈结合了 Cloud Native Computing 的设计和精神。 Harvester 功能​ Harvester 支持在裸机服务器上实施 HCI。Harvester 使用本地、直接连接的存…

【Python】Miniconda+Vscode+Jupyter 环境搭建

1.安装 Miniconda Conda 是一个开源的包管理和环境管理系统,可在 Windows、macOS 和 Linux 上运行,它可以快速安装、运行和更新软件包及其依赖项。使用 Conda,我们可以轻松在本地计算机上创建、保存、加载和切换不同的环境 Conda 分为 Anaco…

Mysql数据库概念与安装

目录 一、数据库概述 1、数据库的基本概念 2、数据库管理系统(DBMS) 2.1 数据库管理系统概念 2.2 数据库管理系统工作模式 3、数据库系统(DBS) 3.1 数据库系统概念 3.2 数据库系统发展史 4、关系型数据库与非关系型数据库…

10-项目部署_持续集成-黑马头条

项目部署_持续集成 1 今日内容介绍 1.1 什么是持续集成 持续集成( Continuous integration , 简称 CI )指的是,频繁地(一天多次)将代码集成到主干 持续集成的组成要素 一个自动构建过程, 从…

极验滑块O参数获取

详细技术链接:JS逆向---极验三代系列详解-最全流程(三)分析JS, w值参数生成最终值_极验的w参数-CSDN博客 windowglobal ct[prototype] {"\u0024\u005f\u0048\u0042\u0077": function(t) {var $_BFCES mwbxQ.$_Cg, $_…

【 React 】React JSX 转换成真实DOM的过程?

1. 是什么 react通过将组件编写的JSX映射到屏幕&#xff0c;以及组件中的状态发生了变化之后React会将这些「变化」更新到屏幕上 在前面文章了解中&#xff0c;JSX通过babel最终转化成React.createElement这种形式&#xff0c;例如&#xff1a; <div>< img src"…

【ML】逻辑回归、生成式与判别式引出 3

【ML】逻辑回归、生成式与判别式引出 3 1. 逻辑回归的基本原理:2. 逻辑回归的关键点:3. 逻辑回归推导过程4. Discriminative(判别式)模型和Generative(生成式)4.1 Discriminative(判别式)模型:4.2 Generative(生成式)模型:4.3 总结差异:5. Multi-class Classific…

学习vue3第八节(自定义指令 directive)

1、自定义指令的作用&#xff1a; 自定义指令是用来操作底层DOM的&#xff0c;尽管vue推崇数据驱动视图的理念&#xff0c;但并非所有情况都适合数据驱动。自定义指令就是一种有效的补充和拓展&#xff0c;不仅仅可用于定义任何DOM操作&#xff0c;并且是可以重复使用。 自定义…

只需3步,使用Stable Diffusion无限生成AI数字人视频

基本方法 搞一张照片&#xff0c;搞一段语音&#xff0c;合成照片和语音&#xff0c;同时让照片中的人物动起来&#xff0c;特别是头、眼睛和嘴。 语音合成 语音合成的方法很多&#xff0c;也比较成熟了&#xff0c;大家可以选择自己方便的&#xff0c;直接录音也可以&#…

el-tree 设置默认展开指定层级

el-tree默认关闭所有选项&#xff0c;但是有添加或者编辑删除的情况下&#xff0c;需要刷新接口&#xff0c;此时会又要关闭所有选项&#xff1b; 需求&#xff1a;在编辑时、添加、删除 需要将该内容默认展开 <el-tree :default-expanded-keys"expandedkeys":da…

Redis 启动进程报错排查

在阿里云ECS安装了redis, systemctl 启动进程正常, redis-cli 链接正常, 准备远程链接发现无法链接上. 报错 Connection: ECS-redis > connection failed Connection: Disconnect on error: Connection error: Connection timed out 连接超时. 后来查别人的经验发现是…

递归——求阶乘

递归的基本概念 一个函数调用其自身&#xff0c;就是递归求n&#xff01;的阶乘 int Factorial(int n) {if(n0) return 1&#xff1b;return n*Factorial(n-1); } #include <iostream> using namespace std; int n; int Factorial(int n) {if(n0) return 1;return n*F…

开源模型应用落地-安全合规篇-模型输出合规性检测(三)

一、前言 为什么我们需要花大力气对用户输入的内容和模型生成的输出进行合规性检测,一方面是严格遵守各项法规要求,具体如下:互联网信息服务深度合成管理规定https://www.gov.cn/zhengce/zhengceku/2022-12/12/content_5731431.htm ​ 其次,受限于模型本身的一些缺陷,…