1. Add custom.d.ts to ./scr

   declare module '*.svg' {
     import React = require('react')
     export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>
     const src: string
     export default src
   }

2. Import svg on your page

   import { ReactComponent as IconLogo } from '../assets/images/logo.svg'

3. Usage

   <IconLogo height='10' />

前端在调用别人 api 时经常遇到跨域或者 https 无法调用 http 的问题，通过反代即可解决
deno.com 提供免费的 NodeJS 环境，在其官网后台新建应用，在 playground 粘贴代码：

import { serve } from "https://deno.land/[email protected]/http/server.ts"
serve(async (req: Request) => {
  const url = new URL(req.url)
  const targetUrl = url.href.replace(`${url.origin}/`, '')
  let urlObj: any
  try {
    urlObj = new URL(targetUrl)
  } catch (e) {
    console.error(e.message)
  }
  if (['http:', 'https:'].indexOf(urlObj?.protocol) > -1) {
    let res = await fetch(targetUrl, {
      headers: req.headers,
      method: req.method,
      body: req.body,
    })
    let headers = {}
    res.headers.forEach((value, key) => {
      headers[key] = value
    })
    if ('*' !== headers['Access-Control-Allow-Origin']?.trim()
      && '*' !== headers['access-control-allow-origin']?.trim()) {
      headers['Access-Control-Allow-Origin'] = '*'
    }
    return new Response(res.body, { headers, status: res.status })
  }
  return new Response(
    `Usage: ${url.origin}/https://deno.com/deploy/docs/pricing-and-limits`)
})

优势：跟cloudflare worker相比，这个支持带端口的url

1. install packages

   yarn add mobx mobx-react-lite

2. in ./tsconfig.json

   1. set compilerOptions.experimentalDecorators = true
   2. sometimes you need to close project and reopenit, otherwise, it might keep waring: Set the 'experimentalDecorators' option in your 'tsconfig' or 'jsconfig' to remove this warning.ts(1219)

3. create file src/stores/CounterStore.ts

   import { action, makeObservable, observable } from "mobx";
   
   export class CounterStore {
     constructor() {
       makeObservable(this)
     }
     @observable
     value: number = 0;
   
     @action
     increment() {
       this.value += 1;
     }
   
     @action
     decrement() {
       this.value -= 1;
     }
   }

4. create file src/stores/index.ts

   import React from "react";
   import { CounterStore } from "./CounterStore"
   
   export const stores = Object.freeze({
     counterStore: new CounterStore()
   })
   
   export const storesContext = React.createContext(stores);
   export const StoresProvider = storesContext.Provider;

5. create file src/stores/hooks.ts

   import React from 'react'
   import { stores, storesContext } from "./";
   
   export const useStores = () => React.useContext(storesContext);
   
   export const useStore = <T extends keyof typeof stores>(
     store: T
   ): typeof stores[T] => React.useContext(storesContext)[store];

6. in pages

   import { useEffect } from "react"
   import { useStore } from "../../stores/hooks"
   import { observer } from "mobx-react-lite"
   
   const MyPage = observer(() => {
     const counterStore = useStore('counterStore')
     useEffect(()=>{
       console.log(counterStore?.value)
     }, [counterStore?.value])
     return (
       <div>
         <p><button onClick={()=>counterStore.increment()}>increment</button></p>
         <p><button onClick={()=>counterStore.decrement()}>decrement</button></p>
       </div>
     )
   })
   export default MyPage

   reference: javascript.plainenglish.io/all-you-need-is-mobx-react-lite-47ba0e95e9c8

在oracle服务器上运行：

curl http://169.254.169.254/opc/v1/instance/definedTags/

返回示例：

{
  "Oracle-Tags": {
    "CreatedBy": "default/[email protected]",
    "CreatedOn": "2022-07-31T07:51:25.197Z"
  }
}

CreatedBy字段就是你的oracle账号
官方出处：docs.oracle.com/en-us/iaas/Content/Compute/Tasks/gettingmetadata.htm

假设你要把 www.baidu.com 301 到 baidu.com，需要以下2步操作：

1. page rules里

• URL填写：www.nestjs.gay/*，开头不需要要http
• Pick a Setting选择forwarding URL
• destination URL填写 https://baidu.com/$1，填/$1的目的是为了保留转发的路径不变

2. DNS解析那里

• 将www.baidu.com cname到www.cloudflare.com，并且勾选Proxied，当然也可以用A解析到某个cloudflare的ip上，没这个解析的话，301无法生效，解析到非cloudflare ip也无效，这就是坑