实战：完美解决md图床问题-nginx图床-2024.4.16(测试成功)

图床
linux
发布日期:   2024-04-16
更新日期:   2024-04-16
文章字数:   2.9k
阅读时长:   11 分

实战：完美解决md图床问题-nginx图床-2024.4.16(测试成功)

image-20240416055013558

目录

[toc]

1、前言

图床简介

对于写博客的朋友们来讲，图床这个东西一定不会陌生，而且在一定程度上也给大家造成过一定困扰。

对于不清楚这个东西的朋友，我就在这儿大概说一下图床是个啥东西。所谓图床，其实可以就相当于我们手机上的相册，不过他是在线的，而且是对大家开放的，大家都可以访问查看，但是编辑删除这些功能仅限于拥有者，就相当于用百度云分享的公开照片，你可以查看，也可以下载下来编辑，但是拥有权还是属于分享者。

那你可能会疑惑，那这个东西和写博客的我们有啥关系呢？

你想想，我们写博客，是不是有很多图片需要插入，我们这些博客要保留在本地的时候你可以预览到图片，但一旦你要把它发布到网上，这时候问题来了！发现图片上传失败，那是因为你本地的图片都是存在本地的，平台不会自动给你上传，那这个时候就凸显出图床的重要性了。当然了，如果你是直接在平台进行编辑，那着一点就不用担心了，基本平台都会自动给你上传到它自己的服务器。

有了图床，我们在本地写好博客之后，就能够任意复制到其他平台，不用担心图片丢失问题了。

  • md的核心就是解决图床问题，如果解决了图床问题，不管用typora还是ob来维护笔记核心数据，就会特别香；
  • 还是那句话，核心笔记数据必须自主可控，不绑定任何一家笔记应用。

搭建方式

==1.云端图床==

  1. 对象存储(oos/cos/七牛云等)搭建图床
    • 问题：如果自己后续md图床数据量增大，那么oss计费也是比较贵的；
    • 问题：要解决oss被恶意刷流量问题？（鉴权？防盗链？refer？……，图片压缩？等等）
  2. 云服务器搭建图床
    1. 云服务器
      • 问题：如果更换云服务器失效后，重新购买服务器，此时公网ip会改变，因此自己本地Md数据里图片路径也需要改变，但可以通过vscode批量替换（vscode批量替换公网ip还是很快的）。–>==通过使用域名来访问图片，即可解决次问题，完美。==
      • 问题：云服务器的访问带宽如何？（个人用，应该没问题；作为博客，自己网站访问流量很小，也问题不大）
    2. 个人服务器+frp
      • 利用frp搭建的个人图床，感觉应该还可以，图床数据完全存放在本地，然后通过云盘备份。（即使公网ip改变，自己md里的数据也不需要改变）
      • 问题：本地pc要一直开机，切本次pc会存在网络瓶颈；
      • 问题：内网frp，是否会存在数据安全风险？
      • 问题：又得学习frp技术（……）
      • 问题：如果使用群辉搭建图床（硬件成本+学习成本，巨大）
  3. gitee/github搭建图床：
    • 问题：当gitee/github里的图片数据量很大时，无法pull/push数据，并且网速也很慢，不推荐这种方法；

==2.本地图床==

存放图床的目录可用坚果云或百度云同步空间来同步数据，以保证其数据安全性。

D:\我的坚果云\LocalImages
D:\BaiduSyncdisk\LocalImgs

1.typora+相对路径

1、优点

相对路径的md文件可以方便进行传播；

方便静态站点工具渲染md（例如docusaurus支持相对路径的md文档的渲染）；

2、缺点

不是很利于md文件的维护；

且会造成某些文件的重复使用，导致存储空间增大；

2.typora+绝对路径

  • 个人更推荐使用typora+绝对路径方式，例如自己就是将本地图床路径设置为D:\BaiduSyncdisk\LocalImgs\图片，这样的话，更利于维护自己的笔记数据；

  • 使用绝对路径的话，就可以轻松修改md文件名称了；（这个还是非常方便的）如果使用相对路径，每次修改md文件名称后，还需要修改存放图片目录的名称，然后再批量替换md文件中图片的路径。

https://bucket-hg.oss-cn-shanghai.aliyuncs.com/img/
D:\BaiduSyncdisk\LocalImgs\image-20220530200627632.png

注意：不管是坚果云还是百度网盘同步空间，如果使用其本地图床，那么在手机端是无法正常显示md里图片的……，因此后面才需要配置公网图床。

需求背景

1、解决自己typora md图床问题

2、解决自己博客文章图床问题

解决方案

购买一台云服务器和一个域名，部署Nginx，然后利用云服务器的nginx提供md图床服务。

云服务器：部署nginx服务(提供图床服务)
typora：作为本地md编辑软件（当然用ob也行哦）
picgo：作为md里图片上传工具

本方案优点：

  1. 图床使用域名做解析，即使以后换ecs的公网ip后，我们只需要迁移图片数据就行，md元数据是不用动的，很丝滑。
  2. 自己也利用rsync会每天定时从linux同步数据到本地windows PC，简直nice。==（rsync服务、nginx服务部署很简单，请放心）==
  3. 解决了md图床问题，那么使用typora/ob维护笔记数据，体验真的飞起哦。另外，也一起解决了博客图床问题哦，完美。

2、配置过程

==前提==

已经提前购买好云服务器，域名（域名备案也是很方便的哈），https证书。

1.部署nginx服务

  • 云服务器上部署nginx服务

参考文章：

https://onedayxyy.cn/docs/ngnix-install-yum 《实战：yum方式部署nginx-2024.4.16(测试成功)》

image-20240416063333164

  • 这里使用https证书配置

参考如下链接：

https://onedayxyy.cn/docs/nginx-https 《实战：在Nginx服务器安装SSL证书并配置强制跳转https-2023.10.16(测试成功)》

image-20240416063705836

  • 自己本次nginx全量配置:cat /etc/nginx/nginx.conf

2024年4月16日

[root@docusaurus-wiki ~]#cat /etc/nginx/nginx.conf 
# For more information on configuration, see:
#   * Official English Documentation: http://nginx.org/en/docs/
#   * Official Russian Documentation: http://nginx.org/ru/docs/

user root;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;

# Load dynamic modules. See /usr/share/doc/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;

events {
    worker_connections 1024;
}

http {
    gzip on; # 启用 gzip 压缩
    gzip_vary on; # 根据请求中的 `Accept-Encoding` 响应头决定是否启用 gzip
    gzip_proxied any; # 在所有代理请求中启用压缩
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript; # 指定哪些类型的响应需要压缩
    gzip_comp_level 5; # 压缩等级（范围是 1-9，高级别意味着更好的压缩但会消耗更多 CPU 资源）
    gzip_min_length 256; # 只对超过给定长度的响应启用压缩
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile            on;
    tcp_nopush          on;
    tcp_nodelay         on;
    keepalive_timeout   65;
    types_hash_max_size 4096;

    include             /etc/nginx/mime.types;
    default_type        application/octet-stream;

    # Load modular configuration files from the /etc/nginx/conf.d directory.
    # See http://nginx.org/en/docs/ngx_core_module.html#include
    # for more information.
    include /etc/nginx/conf.d/*.conf;
    charset utf-8;

    # Settings for a TLS enabled server.
    #
    server {
        listen 80;
        server_name onedayxyy.cn www.onedayxyy.cn;
        return 301 https://$server_name$request_uri;
    }    

      
    server {
        listen       443 ssl http2;
        listen       [::]:443 ssl http2;
        server_name onedayxyy.cn www.onedayxyy.cn;
        root         /root/rsync/rsync-docusaurus/build;

        location / {
            index index.html;
        }


        location /hexoblog {
            alias /root/rsync/rsync-hexo/public;
            index index.html;
        }

        location /images {
            alias /images;
            index index.html;

        #    if ( $invalid_referer ) {
        #           # 如不满足，指定访问如下资源
        #         rewrite ^/ https://onedayxyy.cn/error/1.png;
        #         return 403;
        #    }
        }


        location /music {
            autoindex on; # 启用目录索引
            alias /musics-data;
            index index.html;   # 默认显示index.html文件，如果没有则列出目录内容
        }


        location /scripts {
            autoindex on; # 启用目录索引
            alias /root/shell/public_shell;
            index index.html;   # 默认显示index.html文件，如果没有则列出目录内容
        }

        location /musics {
            alias /root/musics;
            index index.html;
        }

        ssl_certificate "cert/www.onedayxyy.cn.pem";
        ssl_certificate_key "cert/www.onedayxyy.cn.key";

        ssl_session_cache shared:SSL:1m;
        ssl_session_timeout  10m;
        #ssl_ciphers HIGH:!aNULL:!MD5;
        #自定义设置使用的TLS协议的类型以及加密套件（以下为配置示例，请您自行评估是否需要配置）
        #TLS协议版本越高，HTTPS通信的安全性越高，但是相较于低版本TLS协议，高版本TLS协议对浏览器的兼容性较差。
        ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
        ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3;

        ssl_prefer_server_ciphers on;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        error_page 404 /404.html;
            location = /40x.html {
        }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }

}

image-20240416064326518

2.配置picgo

==方法：配置picgo上传图片到云服务器-2023.12.4（测试成功）==

  • 环境
picgo v2.3.1
typora v1.7.6
win10
  • 提出问题（肯定是可以的）

picgo软件是否可以支持上传图片到自己的云服务器呢？

  • 寻找官网插件

https://github.com/PicGo/Awesome-PicGo

  • 文档地址

https://github.com/imba97/picgo-plugin-sftp-uploader

  • 自己本次配置

D:/docusaurus/resource/shell/sftpUploader.json

{
    "sftpUploader": {
        "url": "https://onedayxyy.cn",
        "path": "/images/{fullName}",
        "uploadPath": "/images/{fullName}",
        "host": "ecsip",
        "port": 22,
        "username": "root",
        "password": "123456"
    }
}

image-20240404075625491

自己云服务器ecs地址：

自己域名：onedayxyy.cn
nginx图床配置路径：/images
图片url地址：http://onedayxyy.cn/images/image-20231123144421591.png
  • 测试：（符合预期）

image-20231204145705306

  • 自己typora配置

测试结束。😘

注意：经测试，这里的网站标识 要填内容一定得是 json文件里的 “xx”名称才行的，不然就会报如下错误。🤣

3.配置rsync服务(可选)

  • 配置rsync服务，主要是可以定期拉取图床数据，方便后期如果更换云服务器，可以更快速迁移数据，也是为了备份数据。（建议配置）
  • 配置rsync服务，很简单的，可按如下文档配置。
  • 参考文档

https://onedayxyy.cn/docs/rsync-windows-to-linux 《实战：从windows同步数据到linux(增量定时同步)-2023.11.30(测试成功)》

https://onedayxyy.cn/docs/rsync-linux-to-winodws 《实战：从linux同步数据到winodws(增量定时同步)-2023.11.30(测试成功)》

image-20240416061941427

image-20240416062012160

  • 自己云服务器rsyncd服务配置截图

[root@docusaurus-wiki ~]#vim /etc/rsyncd.conf

image-20240416062337098

  • winodws本地同步数据截图
echo backupmd图床数据……
rsync.exe -avPzruh  --port 8730 --password-file=/cygdrive/D/docusaurus/resource/shell/password.txt  root@47.100.215.163::cmi-MdImages/ /cygdrive/D/BaiduSyncdisk/backup/rsync_local/cmi-MdImages-local

image-20240416062456003

  • 图床数据量汇总：

本次更换图床为ecs nginx提供的图床，体验nice。

##本地docusaurus配置
Administrator@DESKTOP-LJJNG21 MINGW64 /d/docusaurus (master)
$ du -shc docs/
10M     docs/
10M     total

##ecs
[root@docusaurus-wiki ~]#ll /images/ |wc -l
13026
[root@docusaurus-wiki ~]#du -shc /images/
3.8G    /images/
3.8G    total
[root@docusaurus-wiki ~]#

image-20240416062624907

3、测试验证

  • 使用测试

https://onedayxyy.cn/images/image-20240416055013558.png

image-20240416061201293

image-20240416061236382

关于我

我的博客主旨：

  • 排版美观，语言精炼；
  • 文档即手册，步骤明细，拒绝埋坑，提供源码；
  • 本人实战文档都是亲测成功的，各位小伙伴在实际操作过程中如有什么疑问，可随时联系本人帮您解决问题，让我们一起进步！

🍀 微信二维码

x2675263825 （舍得）， qq：2675263825。

image-20230107215114763

🍀 微信公众号

《云原生架构师实战》

image-20230107215126971

🍀 个人博客站点

https://onedayxyy.cn/

🍀 语雀

https://www.yuque.com/xyy-onlyone

🍀 csdn

https://blog.csdn.net/weixin_39246554?spm=1010.2135.3001.5421

image-20230107215149885

🍀 知乎

https://www.zhihu.com/people/foryouone

image-20230107215203185

最后

好了，关于本次就到这里了，感谢大家阅读，最后祝大家生活快乐，每天都过的有意义哦，我们下期见！

图床
赏
  目录