关于docker:rustwasm写前端真香之请求数据md

sealer 是阿里巴巴开源的基于 kuberentes 的集群镜像开源技术，能够把整个集群整体打包。

Sealer Cloud 能够在线化帮忙用户进行集群打包分享和运行，Sealer cloud 前后端也应用了十分先进的
rust+wasm 技术实现。

sealer cloud 会与 docker registry 交互，将来你甚至能够把 sealer cloud 当作 docker hub 应用。

能够看到 registry 返回的数据：

curl http://localhost:5000/v2/_catalog
{"repositories":["centos","golang"]}

所以对应返回的数据咱们定义个数据结构：

#[derive(Deserialize, Debug, Clone)]
pub struct RegistryCatalog {pub repositories: Vec<String>,}

这个构造体用来接管后盾返回的数据，咱们还须要 Model 的构造体：

pub struct Images {
    // props: Props,
    pub repos: Option<Vec<String>>,
    pub error: Option<String>,
    pub link: ComponentLink<Self>,
    pub task: Option<FetchTask>
}

音讯枚举，通过不同的音讯在页面更新时判断应该做什么样的动作：

#[derive(Debug)]
pub enum Msg {GetRegistryCatelog(Result<RegistryCatalog, anyhow::Error>),
}

首次初始化的时候向后盾申请数据：

fn rendered(&mut self, first_render: bool) {
    if first_render {ConsoleService::info("view app");
        let request = Request::get("http://localhost:8001/v2/_catalog")
            .body(Nothing)
            .expect("could not build request.");
        let callback = self.link.callback(
            |response: Response<Json<Result<RegistryCatalog, anyhow::Error>>>| {let Json(data) = response.into_body();
                Msg::GetRegistryCatelog(data)
            },
        );
        let task = FetchService::fetch(request, callback).expect("failed to start request");
        self.task = Some(task);
    }
}

first_render 用于判断是不是第一次渲染，不写在这外面可能会导致页面渲染死循环。
ConsoleService::info 能够帮忙咱们往控制台打印调试信息
定义一个 request 和一个申请胜利后的回调函数 callback
callback 外部接管到数据后返回对应的音讯类型即可触发 update 函数 (前面介绍)
fetch 函数触发 http 申请调用，传入 request 与 callback
重中之重，肯定要把 task 存到 self.task 外面, 不然 task 立马被回收会触发一个 The user aborted a request 的谬误

在 first render 的时候咱们向后盾申请了数据，callback 函数会触发 update 的调用。
把音讯带过来交给 update 函数解决。

fn update(&mut self, msg: Self::Message) -> ShouldRender {
    use Msg::*;
    match msg {GetRegistryCatelog(response) => match response {Ok(repos) => {ConsoleService::info(&format!("info {:?}", repos)); 
                self.repos = Some(repos.repositories);
            }
            Err(error) => {ConsoleService::info(&format!("info {:?}", error.to_string())); 
            },
        },
    }
    true
}

msg 能够有多种音讯类型，此处就写一个

#[derive(Debug)]
pub enum Msg {GetRegistryCatelog(Result<RegistryCatalog, anyhow::Error>),
}

response 就是 Result<RegistryCatalog, anyhow::Error> 类型，Ok 时把它放到构造体中保留就好。

最初渲染到页面上：

fn view(&self) -> Html {
    html! {
        <div class="container column is-10">
        {self.image_list() }
        </div>
    }
}

fn image_list(&self) -> Html {
    match &self.repos {Some(images) => {
            html! {
             <div class="columns is-multiline">
               {for images.iter().map(|image|{self.image_info(image)
                   })
               }
             </div>
            }
        }
        None => {
            html! {<p> {"image not found"} </p>
            }
        }
    }
}

如此就实现了整个数据申请的绑定渲染。

因为申请 docker registry 会有跨域问题，所以整个 nginx 代理：

docker run -p 5000:5000 -d --name registry registry:2.7.1

nginx.conf:

user  nginx;
worker_processes  1;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;


events {worker_connections  1024;}


http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local]"$request"''$status $body_bytes_sent "$http_referer" ''"$http_user_agent""$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    server {
        listen       8000;  #监听 8000 端口，能够改成其余端口
        server_name  localhost; # 以后服务的域名

        location / {if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Allow-Origin' '*' always;
            add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS,PUT,DELETE' always;
            add_header 'Access-Control-Allow-Headers' '*' always;
            add_header 'Access-Control-Max-Age' 1728000 always;
            add_header 'Content-Length' 0;
            add_header 'Content-Type' 'text/plain; charset=utf-8';
            return 204;
          }

          if ($request_method ~* '(GET|POST|DELETE|PUT)') {add_header 'Access-Control-Allow-Origin' '*' always;}
          proxy_pass http://172.17.0.3:5000; # the registry IP or domain name
          proxy_http_version 1.1;
        }
    }

    #gzip  on;

    include /etc/nginx/conf.d/*.conf;
}

docker run -d --name registry-proxy -p 8001:8000 \
  -v /Users/fanghaitao/nginx/nginx.conf:/etc/nginx/nginx.conf nginx:1.19.0

测试 registry api 是否能通:

curl http://localhost:8001/v2/_catalog
{"repositories":["centos","golang"]}

而后代码外面拜访 nginx 代理的这个地址即可
kubernetes 一键装置

sealer 集群整体打包！

关于docker:rustwasm写前端真香之请求数据md

定义数据结构

页面首次初始化

页面更新接口

理论运行