经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » 程序设计 » Rust » 查看文章
48从零开始用Rust编写nginx，搭建一个简单又好看官方网站
来源：cnblogs　　作者：问蒙服务框架　　时间：2024/2/7 9:54:14　　对本文有异议

wmproxy

wmproxy已用Rust实现http/https代理, socks5代理, 反向代理, 负载均衡, 静态文件服务器，websocket代理，四层TCP/UDP转发，内网穿透等，会将实现过程分享出来，感兴趣的可以一起造个轮子

项目地址

国内: https://gitee.com/tickbh/wmproxy

github: https://github.com/tickbh/wmproxy

设计目标

设计高可用的自定义的官网，可在自定义的情况下又可以快速的创建好官网。在官网文档的同时可能会夹杂博客功能等。

平台选型

一开始选择的是博客平台，VanBlog，平台部署也非常的的简单。
仅仅运行一行脚本即可以完成安装：

  1. curl -L https://vanblog.mereith.com/vanblog.sh -o vanblog.sh && chmod +x vanblog.sh && ./vanblog.sh

如果博客的内容也非常的丰富，功能也很强大，如果用来搭建个人的博客平台完全ok。
但是如果用来弄官网主页，博客类型的不太适合，还得重新做选择平台。

后续继续寻找合适平台：

ekyll：一个非常流行的静态网站生成器，特别适合用于个人博客。它与GitHub Pages紧密集成，可以轻松托管。许多现成的Jekyll主题包含文档页面。

Hugo：一个用Go语言编写的快速静态网站生成器。它有一个活跃的社区，提供大量的主题和模板，其中一些专为文档和博客设计。
Hexo：一个快速、简单且强大的博客框架，使用Node.js编写。Hexo拥有丰富的插件和主题，易于集成文档页面。
Docusaurus：由Facebook维护，专为文档网站设计，但也可以用作博客。Docusaurus支持Markdown，易于撰写内容，并提供版本控制功能。
Gatsby：一个现代网站框架，使用React构建。Gatsby不仅适用于博客，还适用于更复杂的网站。很多Gatsby模板都包含了文档页面。
VuePress：VuePress是以Vue驱动的静态网站生成器，非常适合编写技术文档，并可以用于创建个人博客。
Pelican：使用Python编写的静态网站生成器，适用于博客和个人网站。支持Markdown和reStructuredText格式。
MkDocs：一个用Python编写的静态网站生成器，专注于项目文档创建，但也可以用于构建个人博客。

最终选型

最终在选择的时候选择了由vue开发的VuePress，且选择的是他的V2版本，但是目前V2还没有进入到非常的完整的阶段。

他的官方文档地址为docs。

通常会设置淘宝的国内源新地址

  1. http://www.npmmirror.com/

此处我们不想用cnpm，仅仅只设置了代理

  1. npm config set registry https://registry.npmmirror.com

这样子就可以在不改变npm命令的情况下拥有相当快的下载速度。

通过命令行创建示例项目

  1. npm init vuepress vuepress-starter

通过npm install安装依赖项目

通过run docs:dev启动本地开发环境

  1. npm run docs:dev

通过run docs:build启动本地打包，打包后的文件默认在.vuepress/dist中

  1. npm run docs:build

添加mermaid支持

项目中因存在许多流程图文件，需添加mermaid支持，通过查询插件市场，寻找支持的插件发现vuepress-plugin-md-enhance支持v2版本的md扩展支持，安装依赖

  1. npm i vuepress-plugin-md-enhance
  2. npm i mermaid

然后在配置中添加

  1. import { mdEnhancePlugin } from "vuepress-plugin-md-enhance";
  3. export default defineUserConfig({
  4.   plugins: [
  5.     mdEnhancePlugin({
  6.       // 启用 mermaid
  7.       mermaid: true,
  8.     }),
  9.   ],
  10. };

即可启用mermaid支持，我们在任意的md中添加如下代码

  2. flowchart LR
  3.     我 -->|尝试| 使用wmproxy -->|简单易用| 喝杯咖啡
  4.

image.png

本地搜索功能

相对我们的文档相对简单，且数据量不会太大，可以用本地化的搜索插件来完成。这里我们选择plugin-search-pro来进行支持。
添加支持：

  1. npm i -D plugin-search-pro

然后在配置里添加

  1. import { searchProPlugin } from "vuepress-plugin-search-pro";
  2. export default defineUserConfig({
  3.   plugins: [
  4.     searchProPlugin({
  5.       customFields: [
  6.         {
  7.           name: "author",
  8.           getter: (page) => page.frontmatter.author,
  9.           formatter: "作者：$content",
  10.         },
  11.       ],
  12.     }),
  13.   ],
  14. });

点右上角的搜索即可索引相关的路径：

image.png

添加统一的页眉页脚文件

我们可能在每个文章页统一引入前缀和后缀，那么我们不可能重复的书写相同的文字，此时我们需要用引入文件的形式来进行处理。此时我们用的也是md插件：

  1. mdEnhancePlugin({
  2.   // 启用导入支持
  3.   include: true,
  4. }),

我们就可以在任意的md文件中引入<!-- @include: ./../common/footer.md -->就可以导入该文件内容在我们的文章页插入了。方便重复内容的引用。

其它功能

其它功能如添加导航条，logo，显示，内容，多语言等可以参考官方文档。

打包发布

我们已经构建完文档的内容，我们开始着手打包项目。
我们使用npm run docs:build，运行完后就可以在dist目录下找到打包好的文件。
image.png
接下来我们需要一个文件服务系统在web进行部署即可完成官网的布置。

布置文件服务器

安装docker服务

  1. curl -fsSL https://get.docker.com -o get-docker.sh
  2. sudo sh get-docker.sh --mirror Aliyun

利用docker pull dreamwhat/wmproxy获取镜像。

我们利用wmproxy服务来进行文件服务器，利用file-server的子命令

  1. Usage: wmproxy.exe file-server [-r=ARG] [-l=ARG] [--listen-ssl=ARG] [--cert=ARG] [--key=ARG] [-d=ARG]
  2. [-b] [--robots=ARG] [--path404=ARG] [-c=ARG] [-e=ARG]... [--cors] [-H=ARG]... [--access-log=ARG] [--control
  3. =ARG] [--disable-stdout] [--disable-control] [--daemon] [--forever] [-v] [--default-level=ARG] [--pidfile
  4. =ARG]
  6. Available options:
  7.     -r, --root=ARG           静态文件根目录路径
  8.     -l, --listen=ARG         监听地址
  9.                              [default: 127.0.0.1:8869]
  10.         --listen-ssl=ARG     监听地址
  11.         --cert=ARG           ssl证书cert
  12.         --key=ARG            ssl证书key
  13.     -d, --domain=ARG         域名地址
  14.     -b, --browse             是否支持目录
  15.         --robots=ARG         设置robots.txt返回
  16.         --path404=ARG        设置404文件返回
  17.     -c, --cache-time=ARG     设置robots.txt返回
  18.     -e, --ext-mimetype=ARG   设置robots.txt返回
  19.         --cors               通过"Access-Control-Allow-Origin"标头启用 CORS
  20.     -H, --header=ARG         头部信息修改如 "proxy x-forward-for {client_ip}"
  21.         --access-log=ARG     访问日志放的位置如"logs/access.log trace"
  22.         --control=ARG        输入控制台的监听地址
  23.                              [default: 127.0.0.1:8837]
  24.         --disable-stdout     禁用默认输出
  25.         --disable-control    禁用控制微端
  26.         --daemon             后台运行
  27.         --forever            守护程序运行，正常退出结束
  28.     -v, --verbose            是否显示更多日志
  29.         --default-level=ARG  设置默认等级
  30.         --pidfile=ARG        写入进程id文件
  31.     -h, --help               Prints help information

我们将同时支持http及https的支持，且我们将配置404出错时的文件，那么我们的命令将是：

  1. wmproxy file-server -r /source/dist --listen 0.0.0.0:80 --listen-ssl 0.0.0.0:443 --path404 /source/dist/404.html --cert /source/key/wmproxy.net.pem --key /source/key/wmproxy.net.key

完整的docker-compose文件如下

  1. version: '3.5'
  2. services:
  4.   wmproxy_client:
  5.     container_name: wmproxy_client_docker        # 指定容器的名称
  6.     image: dreamwhat/wmproxy:latest
  7.     command:
  8.       - sh
  9.       - -c
  10.       - |
  11.         wmproxy file-server -r /source/dist --listen 0.0.0.0:80 --listen-ssl 0.0.0.0:443 --path404 /source/dist/404.html --cert /source/key/wmproxy.net.pem --key /source/key/wmproxy.net.key
  12.     ports:
  13.       - "80:80"
  14.       - "443:443"
  15.     volumes:
  16.       - ./key/:/source/key:rw
  17.       - ./dist/:/source/dist:rw
  19. networks:
  20.   default:
  21.     name: wmproxy-network

然后我们就可以访问我们的美美的官网啦。

image.png

image.png
完美适配小屏幕大屏幕，官网网址当然现在还是粗糙版本。

总结

一个项目总该配一个官网，从现在开始配一个可以自定义的官网，vuepress可以帮助我们搞一个好看的官网。

点击 [关注]，[在看]，[点赞] 是对作者最大的支持

原文链接：https://www.cnblogs.com/wmproxy/p/18009122

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

Rust热门文章

  • Rust GUI库 egui 的简单应用
  • 36. 干货系列从零用Rust编写负载均衡及代理，内网穿透中内网代理的实现
  • 用Rust手把手编写一个Proxy(代理), TLS加密通讯
  • 简明快速配置 Rust 工具链
  • 9. 用Rust手把手编写一个wmproxy(代理，内网穿透等), HTTP2改造篇之HPACK示例, 了解http2头信息如何处理
  • rust 过程宏
  • 45从零开始用Rust编写nginx，静态文件服务器竟然还有这些细节
  • 37. 干货系列从零用Rust编写负载均衡及代理，负载均衡中try_files实现
  • 26. 干货系列从零用Rust编写正反向代理，如何发布Rust项目到Docker
  • 折腾 Quickwit，Rust 编写的分布式搜索引擎-官方教程

    • Rust推荐文章

  • 折腾 Quickwit，Rust 编写的分布式搜索引擎-官方教程
  • 折腾 Quickwit，Rust 编写的分布式搜索引擎(专为从对象存储中实现亚秒级搜索而设计)
  • Rust使用Sauron实现Web界面交互
  • Rust GUI库 egui 的简单应用
  • 50从零开始用Rust编写nginx，原来TLS证书还可以这么申请
  • 48从零开始用Rust编写nginx，搭建一个简单又好看官方网站
  • 45从零开始用Rust编写nginx，静态文件服务器竟然还有这些细节
  • 44从零开始用Rust编写nginx，命令行参数的设计与解析及说明
  • 43 干货系列从零用Rust编写负载均衡及代理，内网穿透方案完整部署
  • rust angular 自签名证书 wss

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号