[!summary]+
Web 前端开发者路线学习，基本的目的是能够为自己想做的项目搭建前端界面，从 web 开始再到各个移动设备的前端 UI，基于 Mdn 课程，Roadmap 具体项目逐步推进对各个知识点的学习。

根据下面的课程、Roadmap、搭建自己的知识架构，在搭建过程中结合具体的项目，包括自己部署的界面去逐步实践，完善和熟悉整个知识体系和技术栈，并通过和现代 AI 辅助工具的合作，建立自己独立的前端开发流。

• Roadmap For Beginner
• Roadmap For All
• Mdn Web Tutor

Be Ready 准备以及基础了解

• 基础：开发环境准备、页面设计、文件架构规划（由于网站需要包含多种代码、文本、素材、因此如何组织文件是相当重要的）
• 语言：HTML 、CSS、JS 三驾马车为一个网页必不可少的要素，通过结合各自不同的功能来实现多样化的页面设计。

What’s WEB

What’s WEB? 通过 URL 统一资源定位符向服务器请求 HTML，HTML 通过包含的信息告诉 Browse 需要额外的信息来呈现该页面，因此基于 HTML 提供的信息 web browser 继续请求资源、CSS、JS 等文件，并将这些文件按照 HTML 的描述进行组合最终呈现完整的页面。

[!summary]+
有一些希望能在后台运行的任务，例如 nohup,tmux,screen 可实现的一些功能，简单介绍以下 powershell 中的类似用法和功能。

To run a Command Prompt (cmd.exe) command in the background from PowerShell and retrieve it later, similar to sessions in tmux, you can use PowerShell Jobs. PowerShell Jobs allow you to start a command or script in the background and then retrieve the results later. Here’s how you can do it:

从 PowerShell 在后台运行命令提示符 (cmd.exe) 命令并稍后检索它（与 tmux 中的会话类似），可以使用 PowerShell Jobs。 PowerShell Jobs 允许在后台启动命令或脚本，然后稍后检索结果。

具体的一些操作如下：

Start a Job in the background

使用 Start-Job 和 ScriptBlock 参数执行选定的命令

1

$job = Start-Job -ScriptBlock { pwsh.exe /c "your_command_here" }

这里将 your_command_here 改为自己需要执行的命令，例如启动局域网内可访问的 Stable-Diffusion Webui：

1

$job = Start-Job -ScriptBlock { pwsh.exe /c ".\webui.bat --xformers --listen" }

如果需要同时执行多条命令（例如执行 python 命令之前需要切换环境，默认为 base 环境）可以使用 &&

1

$job = Start-Job -ScriptBlock { pwsh.exe /c "conda activate flask && python .\app.py" }

[> [!summary]+

this article purpose is to build an authority page for stable diffusion webui using nginx & python/js. Which can publish my personal stable diffusion server. Wrote by GPT(try).

Introduction

In the digital age, the security and user-friendliness of web services are not just conveniences; they are necessities. Balancing robust security protocols with an engaging user experience is key to maintaining both the integrity and popularity of any online service. This blog post dives into the intricacies of securing web services using Nginx for authentication, coupled with designing an appealing frontend. Our journey begins with a practical scenario:

publishing a stable diffusion webUI service, accessible only to an authenticated audience.

Setting Up Nginx for Secure Authentication

Nginx excels in serving web pages and as a reverse proxy, providing enhanced security through authentication mechanisms. Let’s explore a typical Nginx configuration for secure authentication:

• /verify_token: This block forwards authentication requests to a dedicated server. By excluding the request body and focusing on essential headers, it ensures that only valid, authenticated requests proceed.

1
2
3
4
5
6
7
8

location = /verify_token {
    proxy_pass http://{your_auth_server}:2424;
    proxy_pass_request_body off;
    proxy_set_header Content-Length "";
    proxy_set_header X-Original-URI $request_uri;
    proxy_set_header X-Original-Remote-Addr $remote_addr;
    proxy_set_header X-Original-Host $host;
}

• /login: Catering to login requests, this configuration forwards the necessary details to the authentication server, preserving crucial information about the request’s origin.

1
2
3
4
5
6
7

location /login {
    proxy_pass http://{your_auth_server}:2424;
    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 X-Forwarded-Proto $scheme;
}

• Error Handling (@error401): A clever redirect mechanism that guides unauthenticated users to the login page, keeping the original URL intact.

1
2
3

location @error401 {
    return 302 {your_domain}/login;
}

• Root Location (/): The gateway to your service, which rigorously checks each request for authentication, granting access only to verified users.

1
2
3
4
5
6
7
8
9
10

location / {
    auth_request /verify_token;
    error_page 401 = @error401;
    proxy_pass http://{your_server}:2323/;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
}

This setup not only fortifies your service against unauthorized access but also maintains a seamless user experience, redirecting unauthenticated users without hassle.

[!summary]+
在搭建了 Immich 服务之后，考虑到数据本身的重要性，又对硬盘本身的寿命和各种数据安全的场景有所顾虑，对加密备份的需求就浮出水面了，希望能有一个备份的预案来对抗各种数据风险，因此有本篇文章，对各种备份工具做简单调研和选择。

👾Intro 调研对象介绍

👍出场选手介绍，节选来自以下网站的备份方案：awesome-sysadmin-backup

• kopia
• urBackUp
• restic
• rclone
• duplicity
• Duplicati
• Duplicacy
• 脚本实现简单的备份和上传：Crontab+自动 tar 加密+Webdav 接口进行上传

为了备份大量包含隐私的图像信息，这里最基础的需求有以下几点：加密，支持云端存储服务/Webdav，增量备份，免费；

额外如果能够支持以下的需求则额外加分：压缩，去重，平台一致性，用户界面友好（备份状态检查等）

🏓Compare 特性对比

[!summary]+
本文主要介绍笔者的家庭服务器设计方案 V1。该方案中中涵盖影视、图像、图书&文献、博客、智能家居管理、密码管理服务，以及公网上内容分发的初步设计和选择的考量。

整体架构

整个服务中心在设计的时候主要考虑以下的几个方面：

• 💻操作设备&系统(OS)和内容存储方案：如何经济实惠的选择合适的设备和系统
• 🌦️服务需求：需要搭建哪些服务，应该选择哪个服务进行自托管
• 🌍部署方案：如何保证在局域网+公网都能顺利且安全的访问
• 📱访问策略：各个平台上的访问方式的选择

此外，并非所有服务都需要在公网上进行部署，这里的部分服务可以仅用于局域网，由于仅开放了 Nginx 端口，因此从公网中访问不到未分发的内容，因此，部分存储与敏感信息相关的服务可以仅保留在局域网中进行访问。

[!note]+
在这种情况下如果希望能够使用一致的域名访问方式，是否可以考虑使用 Nginx 鉴权限制访问 ip 为内网 ip，其他公网访问直接丢弃？

初版家庭服务中心的架构图如下，(这里并非列出所有的服务组件)，该架构图中所有的应用都是为了方便日常生活中的各项活动，下面会对架构图自底向上的做一些简单的说明。

禁止屏幕休眠显示作为 Dashboard 显示

树莓派官方的 Raspbian 系统使用的是 lightdm 桌面显示管理器，可以设置 xservice 桌面交互显示来达到屏幕常亮的目的，也就是修改桌面配置文件 lightdm.Conf

参考资料：树莓派设置禁止让屏幕休眠，显示器保持常亮状态-树莓派基础学习入门-树莓派极客,raspi.cc - Powered by raspi

1

sudo vim /etc/lightdm/lightdm.conf

找到 x-server-command 取消注释并在后面加 -s 0-dpms，添加完后重启即可。

参数里的：-s 参数：设置屏幕保护不启动，0 数字零，-dpms 参数：关闭电源节能管理。

Intro 问题描述

以 emby 为例，学习如何对这种自托管的服务，请求验证网站的软件进行破解，破解的整体思路分为以下的两类：

一种是改客户端，一种是改服务端。两种方式的最终原理一样，都是搭建仿冒认证服务器，客户端访问伪服务器拿到授权信息；【3】

因此无论是那种方法我们都需要搭建伪验证服务器：所以以下的操作是必须的：

1. 抓取定位到验证服务器的地址，并获取验证服务器返回的验证信息格式；
2. 使用 Nginx 搭建虚拟的验证服务器，使其返回激活/验证信息；

如果是修改客户端，则在搭建完验证站后需要：

• 修改 Host 文件，将请求验证服务器的请求劫持到本地搭建的服务上；
• 需要伪服务器和客户端都要安装自签名证书

如果是修改服务端，则后续需要：

• 修改服务端源文件，将默认的认证服务器 mb3admin.com 地址直接改成伪服务器
• 这样就不需要安装自签名证书

如果是使用 Docker 进行部署的 emby 可以使用别人修改好的服务端的镜像进行部署安装（like 开心版）

本文主要介绍验证服务器的搭建、修改客户端的方法，以及一些其他的注意事项；

本系列主要介绍通过公网的 ipv6 访问局域网设备并部署自己的服务供公网访问；本篇是其中的第三篇，以 DDNS-go 开源项目为例，部署动态域名解析服务，自动更新主机记录值。

jeessy2/ddns-go: 简单好用的DDNS。自动更新域名解析到公网IP(支持阿里云、腾讯云、Dnspod、Cloudflare、Callback、华为云、百度云、Porkbun、GoDaddy、Google Domain) (github.com)

该工具使用起来非常简单，推荐需要动态域名解析的可以尝试使用该工具，简单介绍工具的使用如下：

配置 DDNS-GO

前往 release 页面下载对应系统的版本：

解压后双击打开 ddns-go.exe 会自动弹出配置的界面：locahost:9876,选择需要解析域名的 DNS 服务商，选择创建密钥并填入对应的密钥。

选择需要启用的 ipv4或者 ipv6解析服务,填写需要解析的域名（每个域名单独另起一行）

其他的保持默认即可，在这里完成了基础配置以后，记得点击保存，之后便可以安装对应的服务，使其后台自动更新，windows 使用管理员打开 powershell 或者 cmd，到对应目录下执行命令如下

1

.\ddns.go.exe -s install -f 10 -cacheTimes 360

通过合理的配置 -f 和 -cacheTimes 可以实现 IP 变化即时触发更新且不会被 DDNS 服务商限流, 例如 -f 10 -cacheTimes 360 效果为每 10 秒检查一次本地 IP 变化, 每小时去公网对比一下 IP 变化

详细的配置可参考置顶的官网连接。

Fi

本系列主要介绍通过公网的 ipv6 访问局域网设备并部署自己的服务供公网访问；本篇是其中的第二篇，以腾讯云和 Nginx 为例，介绍如何将服务部署到 https://域名 。

需要以下的事前准备：

• 腾讯云/阿里云/Cloudflare 等随便一个地方购买一个自己的域名
• 公网 ipv4/ipv6 地址
• 本地部署一个服务以供测试

Nginx(Docker) 安装

这里选择 Docker 来分离安装 Nginx 服务，Docker 部署的优势这里就不再赘述，这里建议使用 portainer 进行容器管理和运行状态查看。

首先创建存放 Nginx 配置文件和证书文件的目录，后续挂载给 Nginx Contrainer 使用：

1
2

mkdir -p /home/username/docker-file/nginx/conf.d
mkdir -p /home/username/docker-file/nginx/cert

配置文件存放到 conf.d 中，各种 SSL 证书则存放到 cert 文件夹中；

接着部署 Nginx，这次先不挂载目录，将 Nginx 中一些默认配置拷贝出来，以供后续使用和修改：

1
2
3

# run会自己执行镜像拉取，pull可以不执行
# docker pull nginx
sudo docker run --name nginx -p 80:80 -d nginx 

将配置文件复制出来：

1
2
3

sudo docker cp nginx:/etc/nginx/conf.d/default.conf /home/username/docker-file/nginx/conf.d/default.conf
sudo docker cp nginx:/etc/nginx/nginx.conf /home/username/docker-file/nginx/conf.d/nginx.conf
sudo docker cp nginx:/etc/nginx/mime.types /home/username/docker-file/nginx/conf.d/mime.types

基于原始的配置文件挂载后查看 nginx 是否正常运行：

1
2

sudo docker rm -f nginx
sudo docker run --name nginx -p 80:80 -p 443:443 -v /home/username/docker-file/nginx/conf.d/nginx.conf:/etc/nginx/nginx.conf -v /home/username/docker-file/nginx/conf.d/default.conf:/etc/nginx/conf.d/default.conf -v /home/username/docker-file/nginx/conf.d/mime.types:/etc/nginx/mime.types -v /home/username/docker-file/nginx/cert:/etc/nginx/cert -d nginx

参考资料：使用docker部署nginx并配置https - 逊老头 - 博客园 (cnblogs.com)

Windows11基于 WSL2启动 docker 后报错如下（需要注意有时候使用启动命令会报错，但是 restart 命令 docker 可以运行，对应服务无法访问）

Bind: An attempt was made to access a socket in a way forbidden by its access permissions.

观察错误发现占用的信息为2345，从 windows 和 wsl 中分别查看端口是否被占用：

1

netstat -aon|findstr "2345"

1

netstat -tunlp | grep 2345

均显示没有被占用，这可能是由于协议 tcp 使用的动态端口问题导致，可以使用管理员权限在 powershell 或者 cmd 中执行下列命令查看端口是否在动态范围中：

动态范围可能是由于 hyper-v 的原因修改过起始端口，所以可能会发现关闭 hyper-v 后没有占用的情况的现

1

netsh int ipv4 show dynamicport tcp

如在，修改动态范围，之后使用的时候避开这些端口即可。

1

netsh int ipv4 set dynamicport tcp start=49152 num=16384

重启电脑即可生效。