React Server Components 遇上 Kubernetes,官方 Demo 改造之上云试玩

简介: React Server Components 遇上 Kubernetes,官方 Demo 改造之上云试玩

背景



我在自己的 K8S 集群中已部署 demo:

这几天大家都在讨论 React Server Components,挺热闹的😂。

它是什么,有啥用,具体大家可以看掘友的这篇文章。

  • React RFC Server Components 是什么,有啥用

知乎也挺热闹的:

  • 如何看待 React Server Components?

为少始终认为,不管啥技术最终都是要落地业务的。

那还等什么呢?开撸~


改造官方 Demo



官方 Demo:https://github.com/reactjs/server-components-demo


微信图片_20220610233700.png

编写基本的 .drone.yml


kind: pipeline
type: kubernetes
name: ServerComponentsDemo
steps:
  - name: 更新 Chart.yaml appVersion
    image: busybox
    commands:
      - echo $DRONE_COMMIT
      - '[ -n "$DRONE_COMMIT" ] && (
          sed -i "s/APP_VERSION/${DRONE_COMMIT}/g" k8s-devops/helm-react-notes/react-notes/Chart.yaml;
        )'
      - cat k8s-devops/helm-react-notes/react-notes/Chart.yaml
  - name: 构建 Docker Image
    image: plugins/docker
    settings:
      debug: true
      dockerfile: Dockerfile.prod
      repo: hub.domain.com/library/react-notes
      tags: ${DRONE_COMMIT}
      registry: hub.domain.com
      username:
        from_secret: docker_user
      password:
        from_secret: docker_pass
  - name: 上云(HelmV3) -> K8S Cluster
    image: pelotech/drone-helm3
    settings:
      helm_command: upgrade
      chart: ./k8s-devops/helm-react-notes/react-notes
      release: react-notes
      vaules_yaml: ./k8s-devops/helm-react-notes/values.yaml
      namespace: react-notes
      api_server:
        from_secret: api_server
      kubernetes_token:
        from_secret: k8s_token
      skip_tls_verify: true
trigger:
  branch:
    - main


微信图片_20220610233714.png微信图片_20220610233716.png


Happy Helming!拥抱🤗云原生!!!

相关实践学习
通过Ingress进行灰度发布
本场景您将运行一个简单的应用,部署一个新的应用用于新的发布,并通过Ingress能力实现灰度发布。
容器应用与集群管理
欢迎来到《容器应用与集群管理》课程,本课程是“云原生容器Clouder认证“系列中的第二阶段。课程将向您介绍与容器集群相关的概念和技术,这些概念和技术可以帮助您了解阿里云容器服务ACK/ACK Serverless的使用。同时,本课程也会向您介绍可以采取的工具、方法和可操作步骤,以帮助您了解如何基于容器服务ACK Serverless构建和管理企业级应用。 学习完本课程后,您将能够: 掌握容器集群、容器编排的基本概念 掌握Kubernetes的基础概念及核心思想 掌握阿里云容器服务ACK/ACK Serverless概念及使用方法 基于容器服务ACK Serverless搭建和管理企业级网站应用
相关文章
|
1月前
|
前端开发 JavaScript 测试技术
React Server Side Rendering (SSR) 详解
【10月更文挑战第19天】React Server Side Rendering (SSR) 是一种在服务器端渲染 React 应用的技术,通过在服务器上预先生成 HTML 内容,提高首屏加载速度和 SEO。本文从概念入手,逐步探讨 SSR 的实现步骤、常见问题及解决方案,并通过代码示例进行说明。
105 3
|
2月前
|
Kubernetes 安全 Cloud Native
云上攻防-云原生篇&K8s安全-Kubelet未授权访问、API Server未授权访问
本文介绍了云原生环境下Kubernetes集群的安全问题及攻击方法。首先概述了云环境下的新型攻击路径,如通过虚拟机攻击云管理平台、容器逃逸控制宿主机等。接着详细解释了Kubernetes集群架构,并列举了常见组件的默认端口及其安全隐患。文章通过具体案例演示了API Server 8080和6443端口未授权访问的攻击过程,以及Kubelet 10250端口未授权访问的利用方法,展示了如何通过这些漏洞实现权限提升和横向渗透。
182 0
云上攻防-云原生篇&K8s安全-Kubelet未授权访问、API Server未授权访问
|
4月前
|
Kubernetes Serverless API
Kubernetes 的架构问题之利用不可变性来最小化对API Server的访问如何解决
Kubernetes 的架构问题之利用不可变性来最小化对API Server的访问如何解决
83 7
|
4月前
|
前端开发 JavaScript 算法
React Server Component 使用问题之想在路由切换时保持客户端状态,如何实现
React Server Component 使用问题之想在路由切换时保持客户端状态,如何实现
|
4月前
|
前端开发 JavaScript PHP
React Server Component 使用问题之路由的能力,如何实现
React Server Component 使用问题之路由的能力,如何实现
|
4月前
|
前端开发 JavaScript
React Server Component 使用问题之添加jsx的组件化能力,如何操作
React Server Component 使用问题之添加jsx的组件化能力,如何操作
|
4月前
|
前端开发 PHP 开发者
React Server Component 使用问题之怎么使用Docker运行PHP应用
React Server Component 使用问题之怎么使用Docker运行PHP应用
|
4月前
|
开发者
🔥揭秘JSF导航:如何轻松驾驭页面跳转与流程控制?🎯
【8月更文挑战第31天】在 JavaServer Faces(JSF)中,导航规则是控制页面跳转和流程的关键。本文详细介绍 JSF 的导航规则,包括转发和重定向等跳转方式,并通过 `faces-config.xml` 文件配置示例展示如何实现不同场景下的页面跳转及流程控制,帮助开发者有效管理应用程序的页面流和用户交互,提升应用质量。
50 0
|
4月前
|
前端开发 搜索推荐 UED
React Server Side Rendering的神奇之处:如何用SSR提升SEO与首屏加载速度,让你的项目一鸣惊人?
【8月更文挑战第31天】在现代Web开发中,React服务器端渲染(SSR)能显著提升SEO性能和首屏加载速度。通过在服务器端预渲染组件并发送HTML至客户端,SSR不仅优化了首屏加载时间,增强了用户体验,还生成了便于搜索引擎抓取的静态HTML文件,提升了页面排名。此外,SSR还具备提高安全性的优点,能够有效防范XSS攻击。虽然其开发复杂性和服务器负载是潜在劣势,但借助如Next.js等库、编写高效组件及定期维护等最佳实践,可以充分发挥SSR的优势,为未来Web开发注入更强动力。
60 0
|
4月前
|
Kubernetes 监控 API
在k8S中,各模块如何与API Server进行通信的?
在k8S中,各模块如何与API Server进行通信的?