背景

刚好2020着上班的时间的到来，且被困在了家里。除了手机外，就没其他的设备了，一边和同学开麦玩着吃鸡手游，一边被领导催着工作，真是冰火两重天。不知前往市里的公交什么时候才能开放，然后网购了一套主机，除了上大学前的买的一台笔记本外，还是自己入手的第一台主机。

戴尔品牌，主要觉得大品牌会好一点。Dell Inc. Inspiron 3670. 说实话，一点都不好用，装好系统后卡的要死，这已经是一年后了，因为我去公司上报，设备才到。父母没接触过也不明白，还是请高中同学上门弄好的。

父亲稍有文化，我以为他可以多用用电脑，浏览网页，练习打打字啥的，但这年头还是手机方便，沉浸在短视频的世界中。

2022年自己亲自买配件组装了一台电脑，所以直到2024年春节，才想着弄些配件给电脑升级下，结果翻车了。电脑开不了机，想着放家里也是吃灰，就寄来上班的地方了。后面买了工具才发现，自己折腾下，机械硬件和固态硬盘都烧了。最后一番折腾，重装了linux系统，当作自己服务器了。

奔着All in One而去，但底层用的都是Ubuntu系统，利用docker部署应用。“降本增效”这四个字，就像有魔力似的，在我脑袋中转来转去。看到自己的网页，就想到以前从来没考虑过的电费，究竟有多少，我也不清楚，也没有实测过。

每次拿起手机，就开始打开淘宝、拼多多，搜索起“低功耗CPU”、“NAS主板”之类的，看来看去都不合心意，想着成本低、功耗低、性能强、扩展方便。还是算了吧，重新审视起这个机器，i3-9100 CPU @ 3.60GHz，官网搜了下TDP也才65W，也还行。

还有一台老古董联想笔记本，在默默吃灰呢？

这一年，不知不觉就过了大半，吃瓜事件也不少。Inter 13代CPU出现状况，国内docker镜像下架，无人驾驶之萝卜快跑，经济下滑就业困难。以前不觉得，现在却是深深感觉，在时代的起起伏伏面前，不过在随波逐流。

节能

为了处理功耗问，安装一个powertop来安慰一波，总比没有要好一点，但是风险也是有的。

在优化”虚拟机写回超时“的设置种，由于会影响系统在将任何数据更改写入实际磁盘之前等待的时间，当系统失去所有电源时，您将面临丢失最后几秒钟内对数据所做的所有更改的风险。

考虑到断电只是偶尔情况，网站也仅限自己一个人使用，不像商城需要面对广大的消费者，所以在节能与保护数据之间，果断选择了节能。

//安装powertop
# sudo apt install powertop

//查看power状态
#sudo powertop

在powertop信息页面上，通过”tab“键切换。powertop可以参考链接：PowerTOP – 分析和管理 Linux 中的功耗 (linux-console.net)

添加守护进程，自动配置为”Good“状态实现节能。

//运行服务
# systmctl start powertop.service

//使能服务
# systemctl enable powertop.service

以下是启动服务后的注意事项：

使用守护程序服务时需要小心，因为某些可调参数会带来数据丢失或奇怪的系统硬件行为的风险。这一点在“虚拟机写回超时”设置中表现得很明显，该设置会影响系统在将任何数据更改写入实际磁盘之前等待的时间。

当系统失去所有电源时，您将面临丢失最后几秒钟内对数据所做的所有更改的风险。因此，您必须在节能和保护数据之间做出选择。

编辑器

之前工作一直用source insight作为编辑器，差不多从大学开始用。中途也找过试用过其他的编辑器，Atom、VS code、Sublime，用来用去，还是觉得source insight用的舒服，但是偶尔的卡顿，让人很不爽，同时它也不是一款免费的编辑器。被弃的VS Code，最终还是捡起来继续用，彻底把source insight删除了。主要使用它的人多，功能也丰富。

在平时工作时，必不可少和下面的人交流，工位空间有限，会议室中用其他电脑又不好将代码工程拷贝到其他电脑上再在一台性能很不好的笔记本上安装上一个编辑器。之前也一直在寻找可以通过浏览器浏览代码工程的工具。VS Code是可以支持服务器部署的，但一直没有去研究。

这次顺便把想做的事情做了。

推动力，主要还是个人需求上。按理说，个人文档上，我已经有了若干种方案了，在线笔记，基于wiki的文档，可道云，甚至网站文章和git仓库，我都可以用作充当个人文档的记录和同步，不需要类似功能的文档方案了。

开始，部署好这些还是蛮有成就感的，不用操心家里的笔记和在公司的笔记同步问题，但是麻烦也随之而来。

网站后台主要用着个人内容物的发表，但是在后台编辑文章，真是一件苦差事，使用起来很不流畅，还不如在记事本写好，粘贴上去。涉及到一些零散的内容是无法记录的。

在线笔记，开始一段时间用的比较勤劳，直到现在也有陆续在使用，作为自己的一个知识库来使用还是蛮不错了。但编辑文档时，如果内容过长（可能有某些bug吧，内容增多后会突然变成只读模式，需要重新设置为编辑模式，偶尔加载异常），跳转和查找起来就不是很灵活，特别是当屏幕小的时候，编辑区域的空间就比较受限了。

在线笔记是基于一个开源项目Trilium搭建的，它就像是obsidian的网页版，在搭建前，都是用obsidian在本地来管理文件和记录（obsidian没有网页版，不是开源的），现在电脑资料的存档目前还是通过obsiadian在管理，却已经不用它做记录了。

wiki在我的方案中，主要用于记录零散的内容，但是每次记录比较麻烦，需要创建页面，或者在原来的页面上开启编辑，如果内容带有附件或者图片，就很麻烦，图片和内容是分散开的（图片需要单独上传，后期无法移动，如果懒人操作的话，基本上所有图片都堆在root目录中了）。在平时工作时，推荐下面的人用wiki来做开发记录，基本上只有自己在使用。

可道云，提供了一个仿window桌面的页面，有文件系统，有很多小工具，在这里存档一些表格文件和word文件还挺不错，很方便后期修改。如果平时记录的话，还不如记在本地电脑的记事本中。

git仓库，主要用来同步文件使用，但是在不同设备操作的前提需要安装git，配置账户，加上git clone、git pull、git push这些命令，用来管理代码工程还行。

coder-server，是vs code的一个服务器版本，部署后与vs code是一样的操作，支持在浏览器上使用。添加插件后，可以支持markdown文件，可以直接粘贴图片自动创建存放图片的目录（而不是通过上传方式来插入图片）操作起来很方便。

试一波先，安装好后，把未整理的内容全往coder-server上移。

安装

环境：docker下部署网页版vscode( 即code-server )

下载

估计与docker镜像源被关闭有关，现在基本上下载不了docker镜像了，所以需要更换源。

当满怀希望敲下”docker pull codercom/code-server“后，漫长的几分钟等待换来的却是”timeout“。

error pulling image configuration: download failed after...

更换docker镜像源，vim工具编辑 ”/etc/docker/daemon.json“文件，替换为如下内容（本文更新与20240830，可能过段时间就不能用了）

{
     "max-concurrent-downloads": 10,
     "max-concurrent-uploads": 5,
     "default-shm-size": "1G",
     "debug": true,
     "experimental": false,
     "registry-mirrors":[
                "https://x9r52uz5.mirror.aliyuncs.com",
                "https://dockerhub.icu",
                "https://docker.chenby.cn",
                "https://docker.1panel.live",
                "https://docker.awsl9527.cn",
                "https://docker.anyhub.us.kg",
                "https://dhub.kubesre.xyz"
        ]
}

编辑并保存后，需要重启docker。其中出现过一个小插曲，换源地址后，不小心少了一个”[“，然后直接重启主机服务器，开始一段时间还能用，第二天docker就启动不了了（当然那次换的是其他的源，没有下载成功）。

//重新载入配置
# sudo systemctl daemon-reload

//重启启动docker
# sudo systemctl restart docker

//检查docker信息
# docker info

然后就是开始下载coder-server

//获取镜像
# docker pull codercom/code-server

挂载

安装前，网上也搜了一些命令示例，大差不差，如果使用过docker，基本上都知道命令的功能。主要差异还是体现在挂载数据的目录上，如果弄错了，容器直接就罢工了。为什么不直接去镜像官网查看资料，下载镜像就费些功夫，进官网更麻烦了。

所以还是按照老套路，先安装一个不挂载数据卷的测试，进入容器检查应用所在的目录，直接把目录拷贝到主机上，下次重新安装时挂载上去。其他的信息则是通过”docker inspect”命令检查一遍，确保按照自己的目录来挂载，方便管理。

//启动一个测试容器
# docker run -p xxx.xxx.xxx.xxx:xxx:8080  -e PASSWORD=xxx --name xxx --restart=always -d codercom/code-server

为了安全，这里将IP、端口、密码、容器名字隐去了。

进入容器检查code-server应用的位置，研究过后才发现，容器内有一个用户名coder，是root用户，应用文件存放在/home/coder目录下，该目录的内容是”.xxx“的隐藏文件，直接用”ls -l“是无法看到的。

直接将coder目录拷贝到主机，由于权限问题，需要用到sudo。

//拷贝容器目录到主机
# sudo docker cp 容器ID:/home/coder /xxx/coder

//更改目录权限
# sudo chmod -R 777 /xxx/coder

目录挂载

1、为了方便在容器后使用内网，而不直接走域名的公网IP，需要将hosts文件映射到容器内部：-v /xxx/hosts:/etc/hosts

2、为了保证容器内容时间与主机在同一时区：-v /xxx/Shanghai:/etc/localtime

3、应用所在目录（由于直接映射目录，里面包含了登录密码，所以后面重新创建容器后，密码还是按照原来的，而不是使用新的）：-v /xxx/coder:/home/coder

启动容器

创建并启动容器前，可以把原来创建测试的先删除

//停止容器运行
# docker stop 容器ID

//删除容器
# docker rm 容器ID

创建并启动code-server容器

//部署code-server
# docker run \
  -p xxx.xxx.xxx.xxx:xxx:8080 \
  -v /xxx/hosts:/etc/hosts \
  -v /xxx/Shanghai:/etc/localtime \
  -v /xxx/coder:/home/coder \
  -e PASSWORD=xxx \
  --name xxx \
  --restart=always \
  -d codercom/code-server

nginx反代理

location / {
  proxy_pass http://xxx.xxx.xxx.xxx:xxxx;
  proxy_set_header Host $host;
  proxy_set_header Upgrade $http_upgrade;
  proxy_set_header Connection upgrade;
  proxy_set_header Accept-Encoding gzip;
}

按照上面配置好nginx反代理后，在浏览器上输入域名即可访问。

拒绝访问

在安装md插件Office Viewer (Markdown Editor) 后，创建xxx.md测试文件，打开文件，发现无法显示。

页面显示“ xxx 拒绝连接”。

开始并没有往iframe网页嵌套的安全策略上去想，觉得可能是nginx配置缺少了什么东西，在网上看是查找起解决方法，一直没有结果。

最后打开浏览器的开发者工具侧栏页，然后一边试图访问xxx.md文件。

然后看到了几个警告，“An iframe whilc has…”的内容让我立刻想起，为了统一网页的风格，而在每个nginx配置文件添加的“add_header X-Frame-Options”和“add_header Content-Security-Policy”。是否将本域名添加到这两个配置上就可以呢？试过后确实可以正常显示xxx.md文件了。如下所示：

    add_header X-Frame-Options "ALLOW-FROM https://域名1/ https://域名2/";
    add_header Content-Security-Policy "frame-ancestors https://域名1/ https://域名2";

域名1，是为了域名1的网页可以嵌套这个coder-server的页面，域名2（也就是coder-sever所使用的域名）是为了处理打开coder-server部分内容显示“xxx拒绝连接”的问题。

终于松了口气，开始享受网页版的VS CODE编辑器吧。

code-server设置

1、显示Menu Bar：View -> Appearance -> Menu Bar

2、中文支持：搜索”Chinese – 汉化“插件，并安装。

• 打开显示（View）菜单，选择命令面板（Command Palette）菜单项或（Ctrl+Shift+P）快捷键 打开命令面板。
• 在命令面板中，输入Configure Display Language，选择Configure Display Language命令，显示已安装的语言包列表。
• 在已安装的语言包列表中选择需要切换的语言包。
• 根据提示重启VScode完成切换

3、修改主题颜色：设置 -> 主题 -> 颜色主题（我选的Quiet Light，比较好看）

4、设置不显示隐藏文件夹（开始使用时可以看到CODER下一堆”.xxx”的隐藏文件，这个就是coder的一些配置文件）：设置 -> 用户 文件 files:Exclude -> Add Pattern **/.*

5、git clone代码时，”=server certificate verification failed. CAfile: none CRLfile: none=“错误提示。

git config --global http.sslverify false
git config --global https.sslverify false

6、代码跳转（没有弄出来），参考：关于在Vscode安装clangd的教程（分别在linux和windows）[很详细，很细节，很全！]【Windows端：缺少 language enginee的解决方法】_vscode clangd-CSDN博客