帮别人做高仿产品网站 违法么,网站特殊字体,口碑好的江苏网站建设,工作总结写作[ 知识是人生的灯塔#xff0c;只有不断学习#xff0c;才能照亮前行的道路 ] 巧用 VScode 网页版 IDE 搭建个人笔记知识库! 描述#xff1a;最近自己在腾讯云轻量云服务器中部署了一个使用在线 VScode 搭建部署的个人Markdown在线笔记#xff0c;考虑到在线 VScode 支持终… [ 知识是人生的灯塔只有不断学习才能照亮前行的道路 ] 巧用 VScode 网页版 IDE 搭建个人笔记知识库! 描述最近自己在腾讯云轻量云服务器中部署了一个使用在线 VScode 搭建部署的个人Markdown在线笔记考虑到在线 VScode 支持终端模式可以用来做各种开发环境搭建以及代码运行调试等同时也为恶意攻击者提供了一个攻击入口所以考虑到安全性问题就打算将整个在线 VScode 容器进行离线不让访问互联网也能进一步保证无法调用外部接口进行反弹Shell以及避免其他一些必须联网攻击的手段下面请看整个实现过程。 原文链接巧用 VScode 网页版 IDE 搭建个人笔记知识库!最近自己在腾讯云轻量云服务器中部署了一个使用在线 VScode 搭建部署的个人Markdown在线笔记考虑到支持终端模式给恶意攻击者提供了一个攻击入口所以考虑到安全性问题就打算将整个在线 VScode 容器进行离线不让访问互联网。https://mp.weixin.qq.com/s/Mn1-o9Z6SY9L3UtH-SJCOA 前置说明 描述在上一章作者已经介绍了在线 VScode 搭建部署的整个过程这里就不再赘述了直接进入正题请按照《VS Code网页版IDE每个程序猿必备一套!》文章中的要求进行基础环境进行配置, 此处作者推荐一下vscode中常用的开发插件希望对各位开发者有帮助。 Chinese (Simplified) : 适用于 VS Code 的中文简体语言包 vscode-icons: Visual Studio 代码的图标 markdown All in One: 提供Markdown编辑的全方位支持包括实时预览、语法提示、目录生成、表格生成等多种功能。 Markdown Preview Enhanced: 支持实时预览 Markdown 文件效果并具备导出 PDF、支持数学公式、流程图等多种高级功能提供了丰富的定制选项和兼容性极大地提升了 Markdown 文档的编辑和预览体验。 Go : 对Visual Studio代码的Rich Go语言支持 Database ClientDatabase manager for MySQL/MariaDB, PostgreSQL, SQLite, Redis and ElasticSearch. SQLiteExplore and query SQLite databases. Live Server: 启动具有静态和动态页面实时重新加载功能的本地开发服务器 ESLint : 将ESLint JavaScript集成到VS代码中 wakatime记录每天coding的时间 :emojisense: 自动追加添加emoji表情符号 Surround: 用于在代码块周围添加包装代码片段JS前端必备。 CSS Peek它允许开发者直接从HTML文档中快速跳转到匹配的CSS样式定义并提供预览功能从而大大提高CSS样式的查找和编辑效率。 Regex Previewer可以实时预览正则表达式匹配结果并适用于多种前端框架和语言同时提供快捷键操作、全局和多行选项等便捷功能以提升开发效率。 Code Spell Checker 可以检查单词拼写是否出现错误检查的规则遵循 camelCase 驼峰拼写法 i18n Ally: 主要用于国际化多语言开发提供内联提示、快速修改key值对应的语言文件、统一管理翻译、自动翻译等功能。 Turbo Console Log : 一键生成有意义的 console.log 消息支持多语言、多光标操作提供可定制的日志类型和输出格式提高调试效率。 indent-rainbow: 一款代码缩进可视化插件它通过为文本前面的缩进着色使缩进更具可读性。 Remote-SSH: 允许开发者通过 SSH 协议连接到远程服务器或虚拟机直接在本地 VS Code 编辑器中操作远程服务器上的代码实现无缝的远程开发体验。 Vue - Official : Vue 官方扩展。 JavaScript (ES6) code snippets: 通过此插件可以使用预定义的 ES6 语法片段速记从而提高开发效率。 Import Cost: 在项目中导入多个包时可能会出现性能问题Import Cost 就用于查看将特定库导入项目的成本。 VS Code Counter: 插件用于统计项目代码的行数 Highlight Matching Tag : 用于实时高亮显示匹配的标签对方便用户在 HTML 或 XML 代码中快速找到配对的标签。 TODO Highlight: 实时高亮显示代码中的TODO、FIXME等标记支持自定义关键字和正则表达式匹配方便开发者快速识别、管理和追踪待办事项。 Better comments: 该插件对不同类型的注释会附加了不同的颜色更加方便区分帮助我们在代码中创建更人性化的注释。 Colorize: 给颜色代码增加一个当前匹配代码颜色的背景。它通过 CSS 变量、预处理器变量、hsl/hsla 颜色、跨浏览器颜色、exa、rgb、rgba和argb的彩色背景将 CSS 颜色可视化帮助开发者快速区分颜色。 Image preview: 通过此插件当鼠标悬浮在图片的链接上时可以实时预览该图片除此之外还可以看到图片的大小和分辨率。 CodeSnap: 用于对代码的进行截图和共享。屏幕截图可以用文本或形状进行注释并通过链接共享或包含在网站或文档中。只需使用 ctrl shift P 并输入 CodeSnap然后按回车键CodeSnap 窗口就会打开。 除此之外建议将 Markdown 笔记放在个人 Gitlab 或者 Gitee 、Github 等代码托管平台中这样方便进行版本管理以及备份。 weiyigeek.top-全栈工程师个人笔记知识图 温馨提示作者最近10年的工作学习笔记涉及网络、安全、运维、开发、机器学习需要学习实践笔记的看友可添加作者账号[WeiyiGeeker]目前价格199除了获得从业笔记的同时还可进行问题答疑,相关工具以及每月远程技术支持希望各位看友多多支持收获定大于付出下面大致看看作者笔记中的大纲内容。 weiyigeek.top-作者笔记1图 weiyigeek.top-作者笔记2图 weiyigeek.top-作者笔记3图 weiyigeek.top-作者笔记4图 weiyigeek.top-作者笔记5图 weiyigeek.top-作者笔记6图 操作步骤 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 gitgitee.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_USERubuntu表示容器内用户为ubuntuTZAsia/Shanghai设置时区并进行在线vscode的一些安全配置禁用一部分功能以及禁止访问到外网PS: com.docker.network.bridge.enable_ip_masquerade最后将个人笔记代码仓库挂载到容器中。
tee /opt/code-server/docker-compose.yaml EOF
version: 3.9
services:vscode-server:container_name: code-serverimage: registry.cn-hangzhou.aliyuncs.com/weiyigeek/code-server:latestcommand: --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:1000ports:- 127.0.0.1:3002:8080environment:- TZAsia/Shanghai- DOCKER_USERubuntuvolumes:- /opt/code-server/.local:/home/coder/.local- /opt/code-server/.config:/home/coder/.config- /opt/code-server/project/blog/source/_posts:/home/coder/projectdns:- 127.0.0.1- 127.0.1.1networks:- privatenetworks:private:driver: bridgedriver_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
ubuntucd290e6326f5:~$ 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-age31536000;
} weiyigeek.top-反向代理设置图 Step 5.为了安全起见还在 OpenResty 启用了 auth 远程身份认证为每个购买我笔记的读者分配一个账号密码在浏览器中输入https://note.weiyigeek.top/进行认证后即可访问到在线 VScode 网页版中搭建的作者十年的学习工作笔记PS: 作者通常会在每周五持续更新笔记哟最后若有需要笔记的小伙伴们可以添加作者【WeiyiGeeker】说明来意。 weiyigeek.top-作者十年的学习工作笔记图 至此在线VScode IDE中搭建个人Markdown知识库实践完毕
参考文档https://coder.com/docs/code-server/FAQ 感觉文章不错的童鞋请帮忙转发点 、在看若有疑问的小伙伴可在评论区留言你想法哟
