
**其实就是我一顿搜索，找到 2 篇文章（[1](https://stackoverflow.com/questions/53133005/how-to-install-xdebug-on-ubuntu), [2](https://www.volcengine.com/theme/8409351-X-7-1)），我按着配，配得还挺快，想分享出来**

# 1

https://stackoverflow.com/questions/53133005/how-to-install-xdebug-on-ubuntu 的排名第一的问答的 JuanP. 2024年 update 的内容的那一段配置 + ...

# 2

https://www.volcengine.com/theme/8409351-X-7-1


# 2.5

注意第 2 步中 launch.json 的 port 端口号应与第 1 步设置的一样。

# 3
🥲没有找到更好的形式分享这个知识。。。先这样吧

# 参考链接：

* [How to install Xdebug on Ubuntu?](https://stackoverflow.com/questions/53133005/how-to-install-xdebug-on-ubuntu)
* [想要使用Win10 WSL Ubuntu 20，vscode和Laravel进行调试](https://www.volcengine.com/theme/8409351-X-7-1)

在 WSL 中打开 VS Code 用 xdebug3 单步调试 PHP


Update 2024-05-14

```
前几天凑巧看了 Google Podcast 的内容政策，似乎播客 APP 搜集播客的逻辑参照了搜索引擎。只搜集不储存。
```


前些天，用喜马拉雅听播客给我灵感，那个 APP 用 AI 给播客添加字幕。我意识到可以给英文播客添加字幕，一边听一边看，又汲取了知识又学习外语，一举两得不是挺好的吗。于是我着手开始开发，开发首页的一个组件，播客 APP（名字叫 Script Podcast）雏形已成，基本播客功能已具备（PocastScreen, PodcastCard, Playbar components, Play RssFeed utils）后，我突然意识到如果做成播客形态，会有版权问题。因为很多新闻机构、热门播客会设置 CopyRight 为保留权利。

而且 Play Store 已有类似的应用，我可能把这个项目先封存，以后开发出来自用吧。

### 技术选型

用了 react-native，因为我觉得 react 库比较多、新。这个技术又能一套代码生成多端代码，我最近又写了一些 next.js，所以对 react 熟一点点，就选了这个。

播放功能选择库：react-native-track-player

UI库选择：react-native-elements

### rss例子

播客更新推送一般都是靠订阅 RSS，这个 RSS 有些网站专门收集，比如 https://www.listennotes.com/ 。这个网站还提供 API，不过怪贵的。

这个网站还提供一些 filter 功能，我找到一些 public domain （公有领域）的播客，在： https://www.listennotes.com/latest-podcasts/public-domain/

### 开发过程

基本上是在画 UI 和调 react-native-track-player 提供的 API 中度过开发时间。有些 UI 上的操作很多是异步的（比如 TrackPlayer.add 之类的 API），导致代码很多 async/await，我一开始不熟，后来慢慢熟悉了。

记录下最后是这个样子：

![screenshot](https://imagecdn.fengrin.me/2024-04-27-a-podcast-app-not-finished-1.jpg)

### 继续怀疑人生了

...

一个未开发完成的播客APP


现在网络上各种简历模板都收费，其实你还可以选择使用免费 Latex 模板创建简历。下面就介绍几种方法。

B站视频版🔗: [https://www.bilibili.com/video/BV1Mj411m7XR/](https://www.bilibili.com/video/BV1Mj411m7XR/)

## 灵感来源

🔗：[一个简洁优雅的 XeLaTeX 简历模板](https://tiankuizhang.github.io/files/00CV_CN/)

## 1，在 overleaf 在线生成 PDF 简历并下载	

🔗：[Bill Ryan's Elegant LaTeX Résumé](https://www.overleaf.com/latex/templates/bill-ryans-elegant-latex-resume/xcqmhktmzmsw)

#### 1.1 注册登陆	

如果你有谷歌账号，可以直接用谷歌账号注册登陆。

没有谷歌账号的，或者用你的邮箱注册登陆也可。

#### 1.2 overleaf 编辑器使用方法

![使用方法](https://cdn.fengrin.me/2023/latex-sample.png "overleaf 编辑器使用方法")

## 2 更多overleaf模板	

🔗：
* https://www.overleaf.com/latex/templates/chinese-resume-template-zhong-wen-jian-li-mo-ban/fbdypsjmgwbb
* https://www.overleaf.com/latex/templates/zhong-wen-jian-li-mo-ban-chinese-resume-template/jgdzmymxmpfc
* https://www.overleaf.com/latex/templates/resume-jian-li-mo-ban-latex/vpkwtrhybspj
* https://www.overleaf.com/latex/templates/simple-resume-template-for-new-graduate-ying-jie-sheng-jian-li-mo-ban/hxrntvmmvnqt

## 3 自己从overleaf模板库中选择简历模板创建简历	

1. 点击 https://www.overleaf.com/project
2. 点击 new project
3. 选择 Templates – Résumé / CV
4. 在众多 模板 中选择你喜欢的
5. 点击模板图片，之后点击 Open as Template，之后就跟之前讲的一样，修改 Latex 源码然后下载 Pdf 即可。

## 最后希望大家支持我的小简历制作网站

🔗: https://starbour.com

傻瓜式操作（比上面介绍的修改Latex源码简单），生成、下载 PDF 简历。


如何用简单方法用模板创建 Latex 简历


docker hub 第一个仓库免费，无限 image storage，circleci 简单使用免费，github 免费。

## 目录

* 注册登录 docker hub，创建一个 image repo
* 在 git repo 里创建 circleci yml 文件，使用 github 登录 circleci，连接 github 仓库，进行第一次自动 build
* push docker image 到 docker hub
* ssh 登录服务器，然后 pull image，run image

### Step 1 - 注册登录 docker hub，创建一个 image repo

可以看官方文档： [Create repositories - Docker Documentaion](https://docs.docker.com/docker-hub/repos/create/)

alternatives: [Create Docker Images for Docker Hub](https://www.pluralsight.com/guides/create-docker-images-docker-hub)

注意⚠️：选择时，注意选择 Public / Private，如果不想在互联网公开 image，请选择 Private。

### Step 2 - 在 git repo 里创建 circleci yml 文件，使用 github 登录 circleci，连接 github 仓库，进行第一次自动 build

circleci yml 文件的写法实在是玄，我也是找了找搜索到的代码片段，抄了一段，然后运行-报错-看报错信息-找到那一行，修改-运行-报错-修改。。。这样循环最后运行成功的。所以我在这里就不给出具体 yml 文件了，我在文末 Step 5.2 放出我的 npm 项目的 config.yml 文件供参考。

circleci官方网站： https://circleci.com/

### Step 3 - push docker image 到 docker hub

这个步骤是在 yml 文件里写好，然后在 circleci 里 build 时，一起 push 了到 image repo 的（也就是第一步的 docker hub）

example：

```
docker tag $IMAGE_NAME:latest $IMAGE_NAME:$IMAGE_TAG
docker push $IMAGE_NAME:latest
docker push $IMAGE_NAME:$IMAGE_TAG
```

### Step 4 - ssh 登录服务器，然后 pull image，run image

```
docker login -u username -p passwd
docker pull xxx
docker run xxx
```

### Step 5 - Something more

一些后记

##### Step 5.1 - Docker Hub 只能免费用一个 repo，如何免费的多个项目都用 Docker Hub

你可以用 image tag 区分不同项目的 image。

```
# one project's .circleci/config.yml

echo mypassword | docker login -u username --password-stdin
IMAGE_TAG="fen-0.0.${CIRCLE_BUILD_NUM}"
docker tag $IMAGE_NAME:latest $IMAGE_NAME:$IMAGE_TAG
docker push $IMAGE_NAME:latest
docker push $IMAGE_NAME:$IMAGE_TAG
```

例如上面推送到 Docker Hub，image的名字就如：fen-0.0.17。

别的项目的 .circleci/config.yml 可以写 IMAGE_TAG="yyy-0.0.${CIRCLE_BUILD_NUM}"，那么别的项目到 Docker Hub image 的名字就是类似 yyy-0.0.2。

```
# another project's circleci/config.yml

echo mypassword | docker login -u username --password-stdin
IMAGE_TAG="yyy-0.0.${CIRCLE_BUILD_NUM}"
docker tag $IMAGE_NAME:latest $IMAGE_NAME:$IMAGE_TAG
docker push $IMAGE_NAME:latest
docker push $IMAGE_NAME:$IMAGE_TAG
```

到时候你 ssh 到服务器上，docker login，然后 docker run 就可以了。

```
docker login -u username -p mypassword
docker run -p 9000:9000 --name="projectname" username/repo.name:fen-0.0.17
```

##### Step 5.2 - next.js npm 项目的 .circleci/config.yml 文件

```yaml
# This config is equivalent to both the '.circleci/extended/orb-free.yml' and the base '.circleci/config.yml'
version: 2.1

executors:
  docker-publisher:
    environment:
      IMAGE_NAME: docker-hub-username/docker-hub-repo-name
    docker:
      - image: cimg/node:16.19.0

# Orbs are reusable packages of CircleCI configuration that you may share across projects, enabling you to create encapsulated, parameterized commands, jobs, and executors that can be used across multiple projects.
# See: https://circleci.com/docs/2.0/orb-intro/
orbs:
  node: circleci/node@5.0.3

# filters used to make sure only main branch will be automatically built.
build-tags:
  jobs:
    - build:
        filters:
          tags:
            only: /^v.*/
          branches:
            ignore: /.*/
    - publish-tag:
        requires:
          - build
        filters:
          tags:
            only: /^v.*/
          branches:
            ignore: /.*/

jobs:
  build_and_test: # this can be any name you choose
    executor: docker-publisher
    docker: 
     - image: cimg/node:16.19.0 # use the default executor defined within the orb
    resource_class: large
    steps:
      - checkout
      - node/install-packages:
          pkg-manager: npm
      - run:
          command: npm install
          name: Run install
      #- run:
      #    command: npm run test
      #    name: Run tests
      - run:
          command: npm run build
          name: Build app
      - setup_remote_docker:
          version: 20.10.18
      - run:
          name: Build Docker image
          command: |
            docker build -t $IMAGE_NAME:latest .
      - run:
            name: Build&Push Success
            when: on_success
            command: |
              docker --version
              # login docker hub, use the username and password you set up previous in web browser.
              echo mypassword | docker login -u myusername --password-stdin
              IMAGE_TAG="my-projectname-0.0.${CIRCLE_BUILD_NUM}"
              docker tag $IMAGE_NAME:latest $IMAGE_NAME:$IMAGE_TAG
              docker push $IMAGE_NAME:latest
              docker push $IMAGE_NAME:$IMAGE_TAG
            
      - run:
          name: Build Failure
          when: on_fail
          command: |
            echo "ERROR building <application_name> $CIRCLE_PR_NUMBER-$CIRCLE_BUILD_NUM-$CIRCLE_NODE_INDEX"
      # no need to persist workspace, this is the only job in workflow
      #- persist_to_workspace:
      #    root: ~/project
      #    paths:
      #      - .
# Invoke jobs via workflows
# See: https://circleci.com/docs/2.0/configuration-reference/#workflows
workflows:
  test_my_app:
    jobs:
      - build_and_test
```



CICD持续集成持续部署尝鲜：docker hub + github + circleci


最近家里办了移动宽带商务快线，自带固定 IP，所以家里的服务器能派上用场了。但是我有可能有时会出门，这时就需要能远程登录放在家里的 Windows server。

### 前提条件

* 需要家里的宽带有固定 IP，或者自己设置动态 DNS
* 买一个带有端口转发功能的路由器

### Step 1 - Windows server 打开远程登录功能

[[How-to] Enable Remote Desktop on Windows Server 2022 (anyviewer.com)](https://www.anyviewer.com/kb/enable-remote-desktop-windows-server-2022.html)

### Step 2 - 改光猫为桥接模式

如果是移动宽带，可以参考：[移动光猫之桥接教程 - 简书 (jianshu.com)](https://www.jianshu.com/p/6a16bfc54c75)

这里需要注意的是移动宽带从网上搜的光猫的超级管理员密码一旦联网后会改变，需要打电话问安装师傅。

### Step 3 - 路由器做端口转发

* [如何在ASUS路由器设置端口转发规则？](https://www.asus.com.cn/support/FAQ/1037906)
* [How to Set Up Port Forwarding on a Router: Open Ports Easily (wikihow.com)](https://www.wikihow.com/Set-Up-Port-Forwarding-on-a-Router)


### Step 4 - 修改RDP（remote desktop）的端口号

如果 Windows server remote desktop 的默认端口号 3389 端口无法打开，运营商那里被封住了。那就需要修改为数字更大的端口号

修改RDP（remote desktop）的端口号（从3389改为更高的9990）：[Change the listening port in Remote Desktop | Microsoft Learn](https://learn.microsoft.com/en-us/windows-server/remote/remote-desktop-services/clients/change-listening-port)

### Step 5 - 增加入站规则

开始--服务器管理器--本地服务器--miscrosoft denfender防火墙--高级设置--入站规则--增加入站规则。然后打开9990端口

注意，这时不需要再做增加出站规则，原因见这里：[关于防火墙入站（inbound）出站（outbound）方式的解释 - 知乎 (zhihu.com)](https://zhuanlan.zhihu.com/p/98899148)

### Step 6 - 用工具连接 Windows server

* windows：[使用Windows系统远程连接Windows server服务器_after_you的博客-CSDN博客_windows 连接服务器](https://blog.csdn.net/after_you/article/details/71192215)
* mac：[Mac使用Microsoft-Remote-Desktop远程桌面控制Windows_柠檬社群微营销运营工具网 (aiergy.com)](https://www.aiergy.com/826.html)

注意，修改默认端口号后，比如现在端口号为9990，连接时需要显式把端口号加到 IP 的后面，比如：12.220.1.119:9990。

把服务器放家里，如何远程登录家里的windows server


### 0 Preparation

* 1 注册 GitHub 账号
* 2 用 GitHub 账号登陆 CircleCI
* 注册腾讯云账号

### Step 1 - Add dockerfile and CI yaml Config

dockerfile: Dockerfile.dev

```
FROM node:alpine
RUN mkdir /app
WORKDIR /app
COPY . /app
CMD ["npm", "run dev"]
```

```
# This config is equivalent to both the '.circleci/extended/orb-free.yml' and the base '.circleci/config.yml'
version: 2.1

# Orbs are reusable packages of CircleCI configuration that you may share across projects, enabling you to create encapsulated, parameterized commands, jobs, and executors that can be used across multiple projects.
# See: https://circleci.com/docs/2.0/orb-intro/
orbs:
  node: circleci/node@5.0.3

jobs:
  build_and_test: # this can be any name you choose
    docker: 
     - image: cimg/node:16.19.0 # use the default executor defined within the orb
    resource_class: large
    steps:
      - checkout
      - node/install-packages:
          pkg-manager: npm
      - run:
          command: npm install
          name: Run install
      # now i have not got any test, so i commented out them.
      #- run:
      #    command: npm run test
      #    name: Run tests
      - run:
          command: npm run build
          name: Build app
      - setup_remote_docker:
          version: 20.10.18
      - run:
            name: Build&Push Success
            when: on_success
            command: |
              docker --version
              # login your tencent cloud docker image repo service, use the username and password you set up in tencent control panel.
              docker login --username=yourusername --password=yourpassword ccr.ccs.tencentyun.com/your-name-space/your-repo
              # build using the dockerfile named "Dockerfile.dev" in root of project folder, and tag the image.
              docker build -f Dockerfile.dev -t ccr.ccs.tencentyun.com/starbour/instease-dev:$CIRCLE_PR_NUMBER-$CIRCLE_BUILD_NUM-$CIRCLE_NODE_INDEX --build-arg MACHINE_NAME=instease-$CIRCLE_PR_NUMBER-$CIRCLE_BUILD_NUM-$CIRCLE_NODE_INDEX .
              # upload the image to certain repo of your tencent cloud.
              docker push ccr.ccs.tencentyun.com/starbour/instease-dev:$CIRCLE_PR_NUMBER-$CIRCLE_BUILD_NUM-$CIRCLE_NODE_INDEX
              echo "Docker build and push sucessfully!! for instease-dev $CIRCLE_PR_NUMBER-$CIRCLE_BUILD_NUM-$CIRCLE_NODE_INDEX"
      - run:
          name: Build Failure
          when: on_fail
          command: |
            echo "ERROR building <application_name> $CIRCLE_BRANCH"
      - persist_to_workspace:
          root: ~/project
          paths:
            - .
# Invoke jobs via workflows
# See: https://circleci.com/docs/2.0/configuration-reference/#workflows
workflows:
  test_my_app:
    jobs:
      - build_and_test

```

### Step 2 - Push to GitHub and Push to tencent cloud docker repo

**在添加了 CircleCI 的 config 并合并到主分支之后，然后我们的开发流程就是下面这样**

* 1 提交代码到 GitHub，然后CircleCI 会自动运行，把代码 build, test, package to docker image。
* 2 我们登陆到部署服务器，docker login 我们的腾讯云 docker image 仓库服务，然后 pull 下来打包好的 image。
* 3 docker run 这个 image 即可。

或者我们也可以利用 CircleCI 的 deploy 文档，把 deploy 的逻辑写到 ./circleci/config.yml 文件里，实现自动部署。
* 如果用的是 aws、Google cloud、azure、heroku、firebase 等，可以看[相应文档](https://circleci.com/docs/deployment-overview/)
* 如果用的是其他主机，可以看 [Deploy over SSH](https://circleci.com/docs/deploy-over-ssh/)，这种方式是通过 SSH 登陆到主机运行命令，实现 deploy。


2023 CI/CD的一种实践：circleci + github + 腾讯云docker镜像服务


Hello，大家好，今天向大家介绍，如何免费用 Obsidian + GitHub + Netlify 发布自己的网站。简单的说，Obsidian 是一个 markdown 笔记软件，GitHub 是一个代码托管网站，Netlify 是一个静态网站部署工具。

本文的视频版：[https://www.bilibili.com/video/BV13V4y1c76b/](https://www.bilibili.com/video/BV13V4y1c76b/)

建好之后，流程大致是，在 Obsidian 编辑文章，然后通过命令一键发布，然后就可以通过网址访问了，这里有其他人建好的，大致是这个样子：

* 1: ![image](https://cdn.fengrin.me/2022/2022-12-19-publish-your-website-free-use-your-local-note-obsidian-gitHub-netlify-2.png)
* 2: ![image](https://cdn.fengrin.me/2022/2022-12-19-publish-your-website-free-use-your-local-note-obsidian-gitHub-netlify-3.png)

0,

准备：

* 下载 Obsidian 笔记软件
* 注册 GitHub 账号

1,

首先，我们需要用到 Obsidian 的一个插件 Digital Garden，下载安装[Digital Garden](obsidian://show-plugin?id=digitalgarden)。

2，

打开这个 [repo](https://github.com/oleeskild/digitalgarden)，点击绿色的 deploy to netlify

这样会打开 Netlify，在你的 GitHub 创建一个这个 repo 的 copy。然后新建一个名字，然后按步骤在 Netlify 发布你的网站到 internet。

3，

下一步，你需要获取你 GitHub 账户的 access token，这个 token 用于你的 Obsidian 笔记软件的设置，相当于一个 password。去[这个网址](https://github.com/settings/tokens/new?scopes=repo)，点击 generate token 按钮，复制 token，下一步需要用到。

4，
打开 Obsidian - Digital Garden 的 settings。填入 GitHub 用户名，repo 的名字（在 step3 设置好的），还有上一步复制好的 token。

5，

现在可以发布你的第一个笔记了。在 Obsidian 创建一个新的笔记，并且把下面字符加到笔记的开头。

```
---
dg-publish: true
dg-home: true
---
```

笔记现在它应该是这样的：
![image](https://cdn.fengrin.me/2022/2022-12-19-publish-your-website-free-use-your-local-note-obsidian-gitHub-netlify-1.png)


* dg-home 代表这个笔记应该作为网站首页
* dg-publish 设置代表这个笔记是否需要被发布到互联网上。

6，
按 CTRL+P 打开命令面板，找到 Digital Garden: Publish Single Note 命令，按回车。

或者，点击侧边栏的小树苗 🌱 的图标，然后点击发布按钮：
![image](https://cdn.fengrin.me/2022/2022-12-19-publish-your-website-free-use-your-local-note-obsidian-gitHub-netlify-4.png)

7,
在 Netlify 找到你网站的网址，打开，大功告成：
![image](https://cdn.fengrin.me/2022/2022-12-19-publish-your-website-free-use-your-local-note-obsidian-gitHub-netlify-5.png)

### 如何添加 Connnected Pages 图表
0,
例子：

![example](https://cdn.fengrin.me/2022/2022-12-19-publish-your-website-free-use-your-local-note-obsidian-gitHub-netlify-6.png)


1 点击 Obsidian - settings：

![obsidian - settings](https://cdn.fengrin.me/2022/2022-12-19-publish-your-website-free-use-your-local-note-obsidian-gitHub-netlify-7.png)

2 点击 settings - Appearance - Manage：

![obsidian - settings](https://cdn.fengrin.me/2022/2022-12-19-publish-your-website-free-use-your-local-note-obsidian-gitHub-netlify-8.png)

3 选择支持图表的 Theme，如 Wikipedia

![obsidian - settings](https://cdn.fengrin.me/2022/2022-12-19-publish-your-website-free-use-your-local-note-obsidian-gitHub-netlify-9.png)

4 点击 settings - Note Settings - Edit

5 开启：Show local graph for notes:

![obsidian - settings](https://cdn.fengrin.me/2022/2022-12-19-publish-your-website-free-use-your-local-note-obsidian-gitHub-netlify-10.png)

6 添加 [Internal link](https://help.obsidian.md/How+to/Internal+link)

创建一个 Note，名为 hi i am Refo Zhang

创建一个 Note，名为 digital garden

在 Obsidian 中，编辑 digital garden note，按键盘上的 `[` 两次，然后输入 hi，选择弹出的 hi i am Refo Zhang。最终效果是：

```
[[hi i am Refo Zhang]]
```

这样就会在第二个 note 中，创建一个第一个 note 的 internal link。

7 Publish 所有的改变，即可得到一个含有所有 Notes 关系的图表

### 下面还值得折腾的点：

* 网站 CSS 样式定制
* 购入一个顶级域名，这样网站就不再是用 xxx.netlify.app 这样别人的 2 级域名了。

相关链接：
* [本文的B站视频版](https://www.bilibili.com/video/BV13V4y1c76b/)
* [Obsidian 官网](https://obsidian.md)
* [Digital Garden 插件官网](https://dg-docs.ole.dev)
* [Digital Garden Github repo](https://github.com/oleeskild/digitalgarden)
* [Nelify](https://netlify.com)
* [GitHub](https://github.com)

免费直接把笔记发布成网站:Obsidian + GitHub + Netlify


### 目录
```
1 简介
2 Backblaze b2 设置
2.1 Backblaze b2 创建 bucket
2.2 设置 bucket cors
2.2.1 测试 cors 设置
2.3 上传文件到 b2
3 Cloudflare 设置
3.1 Cloudflare cdn 子域名
3.2 Cloudflare page rule（使用 edge 网络缓存图片）
3.3 Cloudflare transform rule（Rewrite url，去掉 url 里的 bucket name）
4 检查 CDN 设置成功
```
### 1 简介
cloudflare 是大名鼎鼎的一家 cdn 提供商。
backblaze 是一个云存储公司，除了 b2，还提供个人电脑文件备份服务。b2 类似于 amazon 的 s3，是一种对象存储，可以存储图片，视频等。类似的服务还有 wasabi、cloudflare R2 等。

### 2 backblaze b2 设置
在 backblaze 创建账号后，现在（2022）backblaze 有一定的免费额度，使用不用预先绑定信用卡，免费额度用完如果没有支付方式会自动停止服务。

##### 2.1 backblaze b2 创建 bucket
在后台点击侧边栏 bucket，然后点击 Create a Bucket
![image](https://cdn.fengrin.me/2022/2022-11-09-caching-images-storage-using-cloudflare-and-backblaze-b2-1.png)

Bucket name 可以自选自己喜欢的名字，这里需要设置 File in Bucket are 为 public，因为我们想让互联网上其他用户可以访问。其他设置可以保持默认设置。
![image](https://cdn.fengrin.me/2022/2022-11-09-caching-images-storage-using-cloudflare-and-backblaze-b2-2.png)

##### 2.2设置 bucket cors
所谓 cors 意为跨域访问，即资源被所属 host 之外的 host 访问的话，就是跨域。比如你打开一个域名为 https://example.com 的网页，这个网页里嵌了一张 https://cdn.s3.com/image.png 的图片，这个图片就被跨域访问了。

简单的跨域访问我们可以通过网页设置，点击 CORS rules：
![image](https://cdn.fengrin.me/2022/2022-11-09-caching-images-storage-using-cloudflare-and-backblaze-b2-3.png)

这里可以设置为我们不久以后要为图片存储开通的子域名：https://cdn.example.com。

如果想要设置多个host，可以安装 [b2 命令行工具](https://backblaze.com/b2/docs/quick_command_line.html)，然后运行 [cors 命令](https://help.backblaze.com/hc/en-us/articles/360010522673-B2-CLI-CORS-rules-in-the-command-line)：
```
b2 update-bucket --corsRules '[{"corsRuleName":"downloadFromAnyOrigin", "allowedOrigins": ["https://*.instease.com","http://localhost:3000"], "allowedHeaders": ["range"], "allowedOperations": ["b2_download_file_by_id", "b2_download_file_by_name"], "exposeHeaders": ["x-bz-content-sha1"], "maxAgeSeconds": 3600}]' bucketname allPublic
```

需要把 downloadFromAnyOrigin，["https://*.instease.com","http://localhost:3000"]，bucketname 替换为你的相应内容。

###### 2.2.1 测试 cors 设置
在chrome console运行代码测试 cors：
```
fetch(  
'https://f000.backblazeb2.com/file/cors-allow-none/bucket_info.txt',  
{  
method: 'GET'  
}  
).then(resp => resp.text()).then(console.log)
```

![image](https://cdn.fengrin.me/2022/2022-11-09-caching-images-storage-using-cloudflare-and-backblaze-b2-11.png)

##### 2.3 上传文件到 b2
点击 Browse Files，再选择 bucket，然后点击 Upload，可以拖动上传也可以点击按钮打开文件浏览器。
![image](https://cdn.fengrin.me/2022/2022-11-09-caching-images-storage-using-cloudflare-and-backblaze-b2-4.png)


### 3 cloudflare 设置
cloudflare 有限使用不收费。

首先需要把域名解析到 cloudflare，点击 cloudflare 管理界面的 add sites，这里假设已经把网站添加到 cloudflare 了。
![image](https://cdn.fengrin.me/2022/2022-11-09-caching-images-storage-using-cloudflare-and-backblaze-b2-5.png)

##### 3.1 cloudflare cdn 子域名
进入所使用域名，点击 DNS，增加一条 CNAME 解析，设置一个别名，一个子域名是 backblaze 上传的文件的 url 的 host 的别名。
![image](https://cdn.fengrin.me/2022/2022-11-09-caching-images-storage-using-cloudflare-and-backblaze-b2-6.png))

等十几分钟后，可以试着把 backblaze 上传的文件的 url 的 fxxx.backblazeb2.com 替换成 cdn.example.com，访问。如果能访问成功，说明子域名设置成功。

##### 3.2 cloudflare page rule（使用 edge 网络缓存图片）
点击 Rule -- Page rule--Create page rule：
![image](https://cdn.fengrin.me/2022/2022-11-09-caching-images-storage-using-cloudflare-and-backblaze-b2-7.png)

URL部分输入我们的 cdn 子域名：
![image](https://cdn.fengrin.me/2022/2022-11-09-caching-images-storage-using-cloudflare-and-backblaze-b2-8.png)

##### 3.3 cloudflare transform rule（Rewrite url，去掉 url 里的 bucket name）

点击 Transform Rules - Create transform rule
![image](https://cdn.fengrin.me/2022/2022-11-09-caching-images-storage-using-cloudflare-and-backblaze-b2-9.png)

这样做之后，在网页里写 https://cdn.example.com/image.png ，实际上请求的 url（Rewrite之后的）是  https://cdn.example.com/files/bucketname/image.png ，再次替换子域名的别名后就是： https://fxxx.backblazeb2.com/files/bucketname/image.png ，也即你在 backblaze 管理上传文件界面看到的文件 url。 
![image](https://cdn.fengrin.me/2022/2022-11-09-caching-images-storage-using-cloudflare-and-backblaze-b2-10.png)


### 4 检查 CDN 设置成功

![image](https://cdn.fengrin.me/2022/2022-11-09-caching-images-storage-using-cloudflare-and-backblaze-b2-12.png)

cf-cache-status: HIT 这个 Header 说明 CDN 缓存命中了（生效了）。


### 参考链接

[Creating a CDN with Backblaze B2 and Cloudflare for Free](https://medium.com/@danrovito/creating-a-cdn-with-backblaze-b2-and-cloudflare-for-free-2f7a3efa0c1)

[Free Image Hosting With Cloudflare Transform Rules and Backblaze B2](https://www.backblaze.com/blog/free-image-hosting-with-cloudflare-transform-rules-and-backblaze-b2/)

