Rainbond对前端项目Vue及React的持续部署

目录
  • 前言：
  • 部署前检查
    • 1.1 添加 nodestatic.json 文件
    • 1.2 添加 web.conf 文件
    • 1.3 源码部署Vue项目
  • 常见问题

前言：

以往我们在部署 Vue、React 前端项目有几种方法：

  • 项目打包好之后生成dist目录，将其放入nginx中，并进行相应的访问配置。
  • 将项目打包好放入tomcat中。
  • 将项目打包好的dist目录中的static和index.html文件放入springboot项目的resources目录下
  • 直接运行一个前端server，类似本地开发那种。

在Rainbond中部署Vue React 项目同样使用了第一种方法，根据源码自动build，打包完成后自动把静态文件放入nginx中。

在Rainbond中部署 Vue React 项目有以下三点规范：

1.Rainbond 会根据源代码根目录是否有 nodestatic.json 和 **package.json **文件，文件来识别为Vue React前端类项目。

2.源代码根目录下必须存在以下两个文件之一（不可以同时存在）：

package-lock.json 存在该文件时，Rainbond 默认使用 npm 包管理器构建。

yarn.lock 存在该文件时，Rainbond 使用 yarn 包管理器构建。

3.源代码根目录下需存在 web.conf 文件，这是nginx的配置文件。没有此文件时，Rainbond 会采用缺省配置。

部署前检查

在Rainbond部署自己的Vue、React项目之前需要检查项目是否可用：

清理本地node_modules所有依赖，是否可以使用npm run build或其他命令 打包成功。

接下来用此Vue项目 来演示，Fork开源项目 若依

1.1 添加 nodestatic.json 文件

在源代码根目录创建文件 nodestatic.json ,填写以下内容。

该文件指定静态文件编译后的输出目录，一般Vue项目默认都是打包后输出到项目根目录dist。

{
	"path": "dist"
}

如果你的项目打包后目录输出不是项目根目录，而是根目录下的某一个文件夹例如：project/dist，则需要修改nodestatic.json文件

{
	"path": "project/dist"
}

1.2 添加 web.conf 文件

项目编译完成后，Rainbond 会默认使用 Nginx（1.14.2） 将前端项目运行起来。用户可以在源代码根目录下加入 web.conf 文件来指定 Nginx 的配置，该文件的作用是定义运行时参数。没有此文件时，Rainbond 会采用缺省配置。参考配置用例如下：

默认会把打包出来的 dist目录下的所有文件放到容器的/app/www

server {
    listen       5000;
    location / {
        root   /app/www;
        try_files $uri $uri/ /index.html;
        index  index.html index.htm;
    }
}

有了以上文件可以在Rainbond中构建Vue、React项目了

1.3 源码部署Vue项目

本次使用Vue项目进行演示，React项目亦是如此。

本项目源码地址 Fork开源项目 若依

1.3.1 基于源码创建组件 参考基于源码构建官方文档

填写源码仓库地址，填写前端子目录 ruoyi-ui，构建Vue项目

确认创建组件，平台会自动识别语言为 Nodestatic.

创建，等待构建组件完成即可。

默认使用国内npm淘宝源，可在组件构建源中查看

此开源项目比较特殊，默认打包命令不是npm run build，而是npm run build:prod，需要在 组件 > 构建源修改构建命令为此命令。

Rainbond中默认打包命令是 npm run build 、yarn run build

修改后重新构建，直至完成，访问页面即可。

常见问题

部署完成后访问页面403，有以下几种原因：

1.打包没有成功，导致产物不完全。

仔细查看构建日志，确认错误原因。或在本地删除所有依赖包，重新验证项目是否可以正常构建。

2.打包路径定义错误，导致Rainbond构建过程无法获取到构建后的静态文件。

参考上文1.1环节，正确配置项目打包路径。

Rainbond 云原生应用管理平台，实现微服务架构不用改代码，管理 Kubernetes 不用学容器，帮企业实现应用上云，一站式将任何企业应用持续交付到 Kubernetes 集群、混合云、多云等基础设施。是 Rainstore 云原生应用商店的支撑平台。

1. Rainbond 官网

2. Rainbond 安装使用

3. Rainbond 参考手册全集

以上就是Rainbond对前端项目Vue及React的持续部署的详细内容，更多关于Rainbond部署Vue React前端项目的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • Rainbond云原生部署SpringCloud应用架构实践

    Rainbond云原生部署SpringCloud应用架构实践

    目录 示例项目详情 模块说明: 部署环境说明: 模块构建 部署 Mysql 部署 Redis 部署 pig-ui 依赖与端口梳理 最终成果 示例项目详情 本文档以Pig 快速开发框架为例,演示如何在Rainbond上部署一套完整的Spring Cloud项目. Pig Microservice Architecture V2.1.0: 基于 Spring Cloud Finchley .Spring Security OAuth2 的RBAC权限管理系统 基于数据驱动视图的理念封装 Elemen

  • Rainbond部署组件Statefulset的使用官方文档

    Rainbond部署组件Statefulset的使用官方文档

    目录 前言 组件部署类型 服务的“状态” 处理服务的 “状态” 前言 对于kubernetes老玩家而言,StatefulSet这种资源类型并不陌生.对于很多有状态服务而言,都可以使用 StatefulSet 这种资源类型来部署.那么问题来了:挖掘机技术哪家强?额,不对. 如何在 Rainbond 使用 StatefulSet 资源类型来部署服务呢? 组件部署类型 通过在服务组件的其他设置中,更改 组件部署类型 即可选择使用 StatefulSet 资源类型部署服务,操作之前要注意以下几点: 组

  • Rainbond云原生快捷部署生产可用的Gitlab步骤详解

    Rainbond云原生快捷部署生产可用的Gitlab步骤详解

    目录 Gitlab简介 准备工作 部署步骤 部署Postgresql组件 部署Redis组件 部署Gitlab-Server组件 配置网关访问策略 FAQ Gitlab简介 GitLab是利用 Ruby on Rails 一个开源的版本管理系统,实现一个自托管的Git项目仓库,可通过Web界面进行访问公开的或者私人项目.它拥有与Github类似的功能,能够浏览源代码,管理缺陷和注释.同时Gitlab集成了一系列的CI功能.不得不说,Gitlab在企业中是的使用率非常高. Rainbond非常推荐

  • Rainbond上部署API Gateway Kong及环境配置教程

    Rainbond上部署API Gateway Kong及环境配置教程

    目录 什么是Kong 从应用市场快速安装 注意事项 配置Kong 环境变量 注入Nginx配置 注入单个Nginx配置 通过注入的Nginx指令包含文件 Kong应用怎么制作 数据库自动初始化 部署Kong 部署Konga 发布应用 什么是Kong Kong是一个可扩展的开源API平台(也称为API网关,API中间件或微服务服务网格).Kong最初是由Kong Inc.(以前称为Mashape)实现的,用于为其API Marketplace维护.管理和扩展超过15,000个微服务,这些微服务每月

  • Rainbond配置组件自动构建部署官方文档讲解

    Rainbond配置组件自动构建部署官方文档讲解

    目录 前言 前提条件 基于源代码操作流程 1.开启组件 Git-Webhook 2.配置代码仓库 基于镜像仓库操作流程 1.开启镜像仓库 Webhook 自动构建 2.Tag 触发自动修改策略 3.配置镜像仓库 API 触发自动构建 前言 通过自动构建的功能,可以实现代码或镜像提交后组件自动触发构建和部署,Rainbond 提供了基于代码仓库 Webhooks.镜像仓库 Webhooks 和自定义 API 三种方式触发组件自动部署.自动构建的功能可以辅助开发者便捷的实现敏捷开发. 前提条件 组件

  • Rainbond云原生部署开源社区Discourse的配置过程

    Rainbond云原生部署开源社区Discourse的配置过程

    目录 概述 基于应用市场快速安装 Discourse应用如何制作 获取镜像 环境的要求 获取discourse_docker 配置模版 自定义配置 构建数据库镜像 redis 部署 postgresql部署 部署Discourse_web 建立依赖 访问 一些踩过的坑 邮件配置 数据恢复 概述 Discourse 是一个完全开源的论坛平台.具有丰富的插件库与主题库,适用于开源社区的构建.Rainbond官方社区就是基于Discourse搭建的实际案例. Rainbond官方社区建立之初就已经使用

  • Rainbond自动部署初始化Schema的数据库步骤教程

    Rainbond自动部署初始化Schema的数据库步骤教程

    目录 为什么使用Rainbond? Schema初始化在传统模式中一般有两种方案: 目录结构 Dockerfile文件 为什么使用Rainbond? 我们使用容器的方式部署数据库组件,特别是企业有大量的项目开发业务的,部署的开发.测试数据库组件较多时.经常会遇到以下问题: 业务需要使用数据库,但部署完数据库后,需要在数据库中执行创建schema的操作或者一些初始化数据的创建. 开发测试多套部署环境,需要多次重复1的步骤. 项目比较多,时间久了项目需要的数据库Schema不清楚. 项目交付时数据库

  • Rancher部署配置开源Rainbond云原生应用管理平台

    目录 前言 前提条件 开始安装 添加 Rainbond Operator 到应用商店 安装 Rainbond Operator 访问 Rainbond 安装 UI,完善集群配置 基于 Rancher 的 Rainbond 运维参考 查看 Rainbond 各组件运行状态与日志 按需扩容 Rainbond 各组件 Rancher用户使用Rainbond优势 参考视频 常见问题 前言 本文适用于正在使用 Rancher 或对 Rancher 有所了解的用户 Rancher,Kubernetes 生态

  • Rainbond对前端项目Vue及React的持续部署

    Rainbond对前端项目Vue及React的持续部署

    目录 前言: 部署前检查 1.1 添加 nodestatic.json 文件 1.2 添加 web.conf 文件 1.3 源码部署Vue项目 常见问题 前言: 以往我们在部署 Vue.React 前端项目有几种方法: 项目打包好之后生成dist目录,将其放入nginx中,并进行相应的访问配置. 将项目打包好放入tomcat中. 将项目打包好的dist目录中的static和index.html文件放入springboot项目的resources目录下 直接运行一个前端server,类似本地开发那

  • 前端项目中的Vue、React错误监听

    目录 一. Vue 错误监听 window.onerror errorCaptured 生命周期 errorHandler 异步错误 答案 扩展 二.React 错误监听 ErrorBoundary dev 和 build 事件报错 异步错误 答案 扩展 一. Vue 错误监听 题目: 如何统一监听 Vue 组件报错? 分析: 真实项目需要闭环,即考虑各个方面,除了基本的功能外,还要考虑性能优化.报错.统计等. 而个人项目.课程项目一般以实现功能为主,不会考虑这么全面.所以,没有实际工作经验的同

  • vue、react等单页面项目应该这样子部署到服务器

    vue、react等单页面项目应该这样子部署到服务器

    最近好多伙伴说,我用vue做的项目本地是可以的,但部署到服务器遇到好多问题:资源找不到,直接访问index.html页面空白,刷新当前路由404...现在我们一起讨论下单页面如何部署到服务器? 由于前端路由缘故,单页面应用应该放到nginx或者apache.tomcat等web代理服务器中,千万不要直接访问index.html,同时要根据自己服务器的项目路径更改react或vue的路由地址. 如果说项目是直接跟在域名后面的,比如:http://www.sosout.com ,根路由就是 '/'.

  • vue、react等单页面项目部署到服务器的方法及vue和react的区别

    vue、react等单页面项目部署到服务器的方法及vue和react的区别

    最近好多伙伴说,我用vue做的项目本地是可以的,但部署到服务器遇到好多问题:资源找不到,直接访问index.html页面空白,刷新当前路由404...用react做的项目也同样遇到类似问题.现在我们一起讨论下单页面如何部署到服务器? 由于前端路由缘故,单页面应用应该放到nginx或者apache.tomcat等web代理服务器中,千万不要直接访问index.html,同时要根据自己服务器的项目路径更改react或vue的路由地址. 如果说项目是直接跟在域名后面的,比如:http://www.so

  • Vue.js React与Angular流行前端框架优势对比

    目录 Vue.js.React和Angular对比 以下是Vue.js的代码示例: 以下是React的代码示例: 以下是Angular的代码示例: Vue.js.React和Angular对比 Vue.js.React和Angular都是流行的前端框架,它们都有自己的优势和劣势. 以下是它们的比较: Vue.js Vue.js是一个轻量级的前端框架,它的核心库只有18KB,因此整个框架的体积很小.Vue.js通过简单的API和组件化的架构,使得开发更加简单,易于上手和维护.Vue.js支持双向数

  • 记一次react前端项目打包优化的方法

    前文 之前一年多前接手的一个react项目,前段时间因为做业务中台项目,对公司现有的应用项目做中台化改造,这期间将项目部署到uat环境,测试期间,测试小妹妹和产品大叔都吐槽进入uat项目的时候要load很久,白屏时间超过30s,体验很差,生产不至于这么慢但也是白屏时间挺长的,所以减少白屏时间增加用户体验成为了当务之急.复制代码 分析 通过控制台判断加载资源时间还有资源大小 通过开发者工具可以看到白屏的主要原因在于bundle.js这个打包后的文件过大,达到3.6M加上uat环境带宽等问题的话,光

  • vue或react项目生产环境去掉console.log的操作

    在开发环境写了很多console.log/info/debug,在生产环境需要去掉这些console. 如果手动删除未免也太累了,再说以后想再开发还得重新写console. 事实上webpack提供了删除console的插件,在vue-cli3里面是这样用的: 首先安装terser-webpack-plugin npm install terser-webpack-plugin -D 然后在vue.config.js文件里写插件的配置: module.exports = { configureW

  • 关于怎么在vue项目里写react详情

    关于怎么在vue项目里写react详情

    我们可以直接创建jsx/tsx文件 这次的项目结构是这样的: 在vue文件里这么使用 // index.vue <template> <div class="wrapper"> <Common :opt="list" /> </div> </template> <script lang="ts"> import { Component, Vue } from "vu

  • IDEA中Debug调试VUE前端项目调试JS只需两步

    IDEA中Debug调试VUE前端项目调试JS只需两步

    目录 前言 第一步,找到jsdebug运行时 第二步.打断点.运行jsdubg项 结语 前言 有一个礼拜没发quarku+graalvm相关的内容了,因为博主在忙一个新的前端项目去了,从element-ui切换到antdv,也有很多新的东西需要一边啃文档一边输出,程序出现bug自是在所难免的,所以需要开发工具可以非常方便的debug程序. 在java开发中,debug就是一个debug启动按钮解决的事情,而在前端开发中,IDEA这个开发工具也提供了非常好用的jsdebug工具,博主的这个用法不是

  • jenkins+docker+nginx+nodejs持续集成部署vue前端项目

    jenkins+docker+nginx+nodejs持续集成部署vue前端项目

    目录 前提: 思路: 步骤: 配置nodejs工具 git代码文件目录如下 Dockerfile的文件内容 nginx.conf主配置文件的内容 最近比较闲,尝试了一下docker部署业务测试环境的前端vue项目,作此记录 这里我的环境是Jenkins+docker+harbor+nginx部署,但是由于此项目以节点形式加入jenkins,构建和部署都在一台,所以没有用到harbor,但是生产环境可能部署和构建不在一台,会需要先推送到harbor,也有详细步骤. 前提: 1安装好了jenkins

随机推荐