【高效开发工具系列】云服务器+Nginx自定义图床-Toy模板网

这篇具有很好参考价值的文章主要介绍了【高效开发工具系列】云服务器+Nginx自定义图床。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

💝💝💝欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。

推荐:kwan 的首页,持续学习,不断总结,共同进步,活到老学到老

导航

檀越剑指大厂系列:全面总结 java 核心技术点,如集合,jvm,并发编程 redis,kafka,Spring,微服务,Netty 等

常用开发工具系列:罗列常用的开发工具,如 IDEA,Mac,Alfred,electerm,Git,typora,apifox 等

数据库系列:详细总结了常用数据库 mysql 技术点,以及工作中遇到的 mysql 问题等

懒人运维系列:总结好用的命令,解放双手不香吗?能用一个命令完成绝不用两个操作

数据结构与算法系列:总结数据结构和算法,不同类型针对性训练,提升编程思维,剑指大厂

非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。💝💝💝 ✨✨ 欢迎订阅本专栏 ✨✨

一.基础介绍

1.涉及的软件

云服务器必须
nginx 必须
Git 必须
picgo 非必须
typora 非必须

2.基本原理

将图片上传到云服务的某个目录
在 nginx 配置文件中,配置静态文件代理
直接访问服务器代理的静态文件路径可以直接访问上传的图片

二.实战步骤

1.指定目录

在服务器上创建了一个/kwan/img 的层级目录,并且这个目录是跟自己的 git 保存图片的仓库是挂钩的,方便图片持久化,定期同步到 git 仓库中。

mkdir -p /kwan/blogimg

2.上传图片

通过代码上传
通过 ftp 上传
通过 scp 上传
上传图片到/kwan/blogimg 目录下

3.nginx 配置

# For more information on configuration, see:
#   * Official English Documentation: http://nginx.org/en/docs/
#   * Official Russian Documentation: http://nginx.org/ru/docs/

user nginx;
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 {
    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 2048;

    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;

    server {
        listen       80;
	server_name  qinyingjie.top;
        root         /usr/share/nginx/html;
        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;
        location / {
	       root   html;
    	       index  index.html index.htm;
	       proxy_pass http://127.0.0.1:8080/;
       	}
	location ~ .*\.(gif|jpg|jpeg|png|jfif|webp)$ {
	         root  /kwan/;
                 autoindex    on ;
        }
        error_page 404 /404.html;
            location = /40x.html {
        }

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

# Settings for a TLS enabled server.
#
#    server {
#        listen       443 ssl http2 default_server;
#        listen       [::]:443 ssl http2 default_server;
#        server_name  _;
#        root         /usr/share/nginx/html;
#
#        ssl_certificate "/etc/pki/nginx/server.crt";
#        ssl_certificate_key "/etc/pki/nginx/private/server.key";
#        ssl_session_cache shared:SSL:1m;
#        ssl_session_timeout  10m;
#        ssl_ciphers PROFILE=SYSTEM;
#        ssl_prefer_server_ciphers on;
#
#        # Load configuration files for the default server block.
#        include /etc/nginx/default.d/*.conf;
#
#        location / {
#        }
#
#        error_page 404 /404.html;
#            location = /40x.html {
#        }
#
#        error_page 500 502 503 504 /50x.html;
#            location = /50x.html {
#        }
#    }

}

4.配置解析

location ~ .*\.(gif|jpg|jpeg|png|jfif|webp)$ {
   root  /kwan/;
         autoindex    on ;
}

这是一个 Nginx 配置段，它使用location指令来匹配以 gif、jpg、jpeg、png、jfif、webp 为扩展名的文件，并在匹配成功时执行相应的指令。下面是对这个配置段的详细解析：

location ~ .*\.(gif|jpg|jpeg|png|jfif|webp)$ {: 这是一个location块，用于匹配请求的 URL。~表示进行正则表达式匹配，而.*\.表示匹配任意字符（包括空字符）后面跟着一个点，最后(gif|jpg|jpeg|png|jfif|webp)是一个正则表达式组，匹配文件扩展名为 gif、jpg、jpeg、png、jfif 或 webp 的请求。$表示匹配字符串的结尾。
root /kwan/;: 当请求匹配成功时，使用/kwan/作为文件根目录。这意味着 Nginx 将在/kwan/目录中寻找匹配请求的文件。
autoindex on;: 启用目录列表功能。如果请求的是一个目录而不是具体的文件，Nginx 将显示该目录下的文件列表。

综合起来，这个配置段的作用是，当用户请求以 gif、jpg、jpeg、png、jfif 或 webp 为扩展名的文件时，Nginx 将在/kwan/目录中查找相应的文件。如果请求的是一个目录，Nginx 将显示该目录下的文件列表。

5.验证

中间省了 nginx 的启动,可以参考以往的 nginx 的安装与启动资料。

#访问图片的连接
http://ip:80/img/xxx.png

三.typora 配置

1.图片规则设置

【高效开发工具系列】云服务器+Nginx自定义图床,s0 常用工具,服务器,nginx,运维

2.原理解析

在 typora 贴入图片时,会自动上传图片,上传图片的功能由 picgo 软件提供,然后上传的图片优先使用相对路径并自动转义图片的 url。

四.PicGo 设置

1.什么是 PicGo?

PicGo 是一个开源的图片上传工具，它可以帮助用户将本地图片上传到各种图床（图像存储服务）。图床通常是云存储服务，用于存储和托管用户上传的图片，使其能够在互联网上访问。用户可以通过提供的图床配置，将图片上传到特定的云服务中，然后获取图片的外链地址，方便在网页、博客或社交媒体上分享图片。

2.主要功能

PicGo 的主要功能包括：

支持多种图床： PicGo 支持多个图床的配置，包括但不限于七牛、腾讯云、GitHub 等。用户可以选择他们偏好的图床服务。
本地上传和截图上传： 用户可以通过 PicGo 界面直接选择本地图片上传，也可以使用截图工具进行截图后上传。
支持快捷键操作： PicGo 提供了一些快捷键，使用户可以更便捷地进行上传操作。
自定义命名规则： 用户可以根据自己的需求定义上传后图片的命名规则。
支持压缩： PicGo 还提供了图片压缩的功能，以减小图片文件大小。

PicGo 的功能和特性可能会在不同版本中有所变化，而且截至我最后更新的时间，可能有新的版本发布。因此，为了获取最新信息，建议查阅 PicGo 的官方文档或相关社区。

3.插件下载

在插件市场中搜索 sftp-uploader 1.3.0,并安装此插件

【高效开发工具系列】云服务器+Nginx自定义图床,s0 常用工具,服务器,nginx,运维

4.SFTP 上传配置

设置网站标识,Gbolg,自定义,但是最好跟 json 文件的 key 保持一致
在本地新建 blog_upload.json 文件,内容如下所示
picgo 指定本地 json 配置文件所在路径
这样在上传图片的时候,会默认通过 sftp 的方式上传到服务器的指定目录

╰─➤   cat  /Users/qinyingjie/Documents/typora/blog_upload.json
{
  "Gblog": {
    "url": "https://www.qinyingjie.top",
    "path": "/blogimg/{fullName}",
    "uploadPath": "/kwan/blogimg/{fullName}",
    "host": "43.139.90.182",
    "port": "22",
    "username": "root",
    "password": "xxxx"
  }
}

【高效开发工具系列】云服务器+Nginx自定义图床,s0 常用工具,服务器,nginx,运维

5.blog_upload.json 详解

{
  "Gbolg": {
    "url": "https://www.qinyingjie.top",
    "path": "/blogimg/{fullName}",
    "uploadPath": "/kwan/blogimg/{fullName}",
    "host": "43.139.90.182",
    "port": "22",
    "username": "root",
    "password": "xxxx"
  }
}

这是一个用于配置图床（图像存储服务）的 JSON 格式配置文件。其中的字段含义如下：

**Gblog:**相当于一个名字

url: 图床的主要 URL，即图片上传后在云端访问的地址。在这里，是 https://www.qinyingjie.top。
path: 上传图片的路径模板，包含一个变量 {fullName} 用于替换为实际的文件名。在这里，是 “/blogimg/{fullName}”。
uploadPath: 图片在图床上保存的实际路径。在这里，是 “/kwan/blogimg/{fullName}”。
host: SSH（Secure Shell）连接的目标主机 IP 地址或主机名。在这里，是 “43.139.90.182”。
port: SSH 连接的端口号。在这里，是 “22”，这是 SSH 协议的默认端口。
username: 连接目标主机时使用的用户名。在这里，是 “root”。
password: 连接目标主机时使用的密码。在这里，是 “xxxx”。需要注意的是，明文密码在配置文件中是一种潜在的安全风险，更安全的做法是使用 SSH 密钥进行认证而非密码。

这个配置文件描述了如何将图片上传到指定的图床，并提供了与图床服务器的 SSH 连接所需的信息。在使用这个配置文件时，PicGo（或其他类似工具）会使用 SSH 协议将本地图片上传到远程服务器上指定的路径。上传后，图床会生成可公开访问的 URL，用户可以在网页、博客等地方使用这些 URL 来展示图片。