巧用 VScode 网页版 IDE 搭建个人笔记知识库!

温馨提示：作者最近10年的工作学习笔记（涉及网络、安全、运维、开发、机器学习），需要学习实践笔记的看友，可添加作者账号[WeiyiGeeker]，目前价格￥199，除了获得从业笔记的同时还可进行问题答疑,相关工具以及每月远程技术支持，希望各位看友多多支持，收获定大于付出！下面大致看看作者笔记中的大纲内容。

操作步骤

Step 1.将个人笔记代码仓库克隆到本地，并进入/opt/code-server/project/目录中,  初次使用 SSH 协议进行代码克隆、推送等操作时，需按下述提示完成 SSH 配置，在Gitee上做公密钥认证（https://gitee.com/profile/sshkeys）就不在累述了。

# 安装 git
apt install git
 
# 生成获取 RSA 公密钥
ssh-keygen -t rsa
cat ~/.ssh/id_rsa.pub
 
# 拉取笔记
cd /opt/code-server/project/
git clone git@gitee.com:WeiyiGeek/blog.git
 
# 设置目录文件权限（只有root用户可读可写，其他用户只读）, 防止大家误修改笔记！
chown -R root:root /opt/code-server/project/blog
chown -R 754 /opt/code-server/project/blog

Step 2.创建一个docker-compose.yaml文件，并编写如下内容，其中DOCKER_USER=ubuntu表示容器内用户为ubuntu，TZ=Asia/Shanghai设置时区，并进行在线vscode的一些安全配置，禁用一部分功能以及禁止访问到外网（PS: com.docker.network.bridge.enable_ip_masquerade），最后将个人笔记代码仓库挂载到容器中。

tee /opt/code-server/docker-compose.yaml <
version: '3.9'
services:
  vscode-server:
    container_name: code-server
    image: registry.cn-hangzhou.aliyuncs.com/weiyigeek/code-server:latest
    command: --bind-addr 0.0.0.0:8080 --disable-update-check --disable-file-downloads --disable-file-uploads --disable-proxy --ignore-last-opened --disable-getting-started-override --welcome-text "欢迎访问，全栈工程师修炼必备笔记站点!"
    user: "1000:1000"
    ports:
      - 127.0.0.1:3002:8080
    environment:
      - TZ=Asia/Shanghai
      - DOCKER_USER=ubuntu
    volumes:
      - /opt/code-server/.local:/home/coder/.local
      - /opt/code-server/.config:/home/coder/.config
      - /opt/code-server/project/blog/source/_posts:/home/coder/project
    dns:
      - 127.0.0.1
      - 127.0.1.1
    networks:
      - private
 
networks:
  private:
    driver: bridge
    driver_opts:
      com.docker.network.bridge.enable_ip_masquerade: 'false'
EOF

Step 3.部署资源清单创建容器，并且验证容器状态是否正常。

$ docker-compose up -d
$ docker ps
  # CONTAINER ID   IMAGE                                                            COMMAND                  CREATED       STATUS       PORTS                                       NAMES
  # cd290e6326f5   registry.cn-hangzhou.aliyuncs.com/weiyigeek/code-server:latest   "/usr/bin/entrypoint…"   12 days ago   Up 12 days   127.0.0.1:3002->8080/tcp                    code-server
 
# 进入容器验证是否能访问外网（可以参考已经无法访问外网了）
$ docker exec -it code-server bash
ubuntu@cd290e6326f5:~$ curl -I  weiyigeek.top
curl: (6) Could not resolve host: weiyigeek.top

Step 4.然后访问作者前面搭建部署的1panle面板进行，通过使用Openresty中间件（若没有安装可参考此篇《部署OpenResty一个基于 Nginx 与 Lua 的高性能 Web 平台》文章），设置在线VScode的反向代理地址http://127.0.0.1:3002到443端口访问，并配置好域名解析到note.weiyigeek.top。

location ^~ / {
  proxy_pass http://127.0.0.1:3002; 
  proxy_set_header Host $host; 
  proxy_set_header X-Real-IP $remote_addr; 
  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
  proxy_set_header REMOTE-HOST $remote_addr; 
  proxy_set_header Upgrade $http_upgrade; 
  proxy_set_header Connection "upgrade"; 
  proxy_set_header X-Forwarded-Proto $scheme; 
  proxy_http_version 1.1; 
  add_header X-Cache $upstream_cache_status; 
  add_header Strict-Transport-Security "max-age=31536000"; 
}

Step 5.为了安全起见，还在 OpenResty 启用了 auth 远程身份认证，为每个购买我笔记的读者分配一个账号密码，在浏览器中输入https://note.weiyigeek.top/进行认证后，即可访问到在线 VScode 网页版中搭建的作者十年的学习工作笔记（PS: 作者通常会在每周五持续更新笔记哟！），最后若有需要笔记的小伙伴们可以添加作者【WeiyiGeeker】，说明来意。

至此，在线VScode IDE中搭建个人Markdown知识库实践完毕！

参考文档：https://coder.com/docs/code-server/FAQ

感觉文章不错的童鞋，请帮忙转发，点 👍、在看，若有疑问的小伙伴，可在评论区留言你想法哟💬！