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

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

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。
【高效开发工具系列】云服务器+Nginx自定义图床,s0 常用工具,服务器,nginx,运维

  • 推荐:kwan 的首页,持续学习,不断总结,共同进步,活到老学到老
  • 导航
    • 檀越剑指大厂系列:全面总结 java 核心技术点,如集合,jvm,并发编程 redis,kafka,Spring,微服务,Netty 等
    • 常用开发工具系列:罗列常用的开发工具,如 IDEA,Mac,Alfred,electerm,Git,typora,apifox 等
    • 数据库系列:详细总结了常用数据库 mysql 技术点,以及工作中遇到的 mysql 问题等
    • 懒人运维系列:总结好用的命令,解放双手不香吗?能用一个命令完成绝不用两个操作
    • 数据结构与算法系列:总结数据结构和算法,不同类型针对性训练,提升编程思维,剑指大厂

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

一.基础介绍

1.涉及的软件

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

2.基本原理

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

二.实战步骤

1.指定目录

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

mkdir -p /kwan/blogimg

2.上传图片

  1. 通过代码上传
  2. 通过 ftp 上传
  3. 通过 scp 上传
  4. 上传图片到/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 为扩展名的文件,并在匹配成功时执行相应的指令。下面是对这个配置段的详细解析:

  1. location ~ .*\.(gif|jpg|jpeg|png|jfif|webp)$ {: 这是一个location块,用于匹配请求的 URL。~表示进行正则表达式匹配,而.*\.表示匹配任意字符(包括空字符)后面跟着一个点,最后(gif|jpg|jpeg|png|jfif|webp)是一个正则表达式组,匹配文件扩展名为 gif、jpg、jpeg、png、jfif 或 webp 的请求。$表示匹配字符串的结尾。

  2. root /kwan/;: 当请求匹配成功时,使用/kwan/作为文件根目录。这意味着 Nginx 将在/kwan/目录中寻找匹配请求的文件。

  3. 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 的主要功能包括:

  1. 支持多种图床: PicGo 支持多个图床的配置,包括但不限于七牛、腾讯云、GitHub 等。用户可以选择他们偏好的图床服务。

  2. 本地上传和截图上传: 用户可以通过 PicGo 界面直接选择本地图片上传,也可以使用截图工具进行截图后上传。

  3. 支持快捷键操作: PicGo 提供了一些快捷键,使用户可以更便捷地进行上传操作。

  4. 自定义命名规则: 用户可以根据自己的需求定义上传后图片的命名规则。

  5. 支持压缩: PicGo 还提供了图片压缩的功能,以减小图片文件大小。

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

3.插件下载

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

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

4.SFTP 上传配置

  1. 设置网站标识,Gbolg,自定义,但是最好跟 json 文件的 key 保持一致
  2. 在本地新建 blog_upload.json 文件,内容如下所示
  3. picgo 指定本地 json 配置文件所在路径
  4. 这样在上传图片的时候,会默认通过 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 来展示图片。

觉得有用的话点个赞 👍🏻 呗。
❤️❤️❤️本人水平有限,如有纰漏,欢迎各位大佬评论批评指正!😄😄😄

💘💘💘如果觉得这篇文对你有帮助的话,也请给个点赞、收藏下吧,非常感谢!👍 👍 👍

🔥🔥🔥Stay Hungry Stay Foolish 道阻且长,行则将至,让我们一起加油吧!🌙🌙🌙

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

欢迎加入 CSDN 红包通知群,红包了领到手软🎁🎁🎁。
【高效开发工具系列】云服务器+Nginx自定义图床,s0 常用工具,服务器,nginx,运维文章来源地址https://www.toymoban.com/news/detail-755845.html

到了这里,关于【高效开发工具系列】云服务器+Nginx自定义图床的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【高效开发工具系列】Postman

    💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kuan 的首页,持续学习,不断总结,共同进步,活到老学到老 导航 檀越剑指大厂系列:全面总

    2024年02月08日
    浏览(44)
  • 【高效开发工具系列】Hutool Http工具类

    💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学习,不断总结,共同进步,活到老学到老 导航 檀越剑指大厂系列:全面总

    2024年02月05日
    浏览(38)
  • Python IDE Pycharm服务器配置方法并结合内网穿透工具实现远程开发

    本文主要介绍如何使用Pycharm进行远程开发,并实现在家远程与公司服务器资源同步。 新版本 Jetbrains 系列开发IDE( IntelliJ IDEA , PyCharm , GoLand )等都支持远程使用服务器编译,并且可以 通过SFTP同步本地与服务器项目代码 。 这样做的好处是**我们只要连接上服务器就能开始

    2024年02月04日
    浏览(54)
  • 【高效开发工具系列】eclipse部署web项目

    💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学习,不断总结,共同进步,活到老学到老 导航 檀越剑指大厂系列:全面总

    2024年02月04日
    浏览(40)
  • 【高效开发工具系列】Mac删除启动台图标

    💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学习,不断总结,共同进步,活到老学到老 导航 檀越剑指大厂系列:全面总

    2024年02月05日
    浏览(43)
  • 【高效开发工具系列】Windows 系统下将 Windows 键盘的 ctrl 和 alt 互换

    💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学习,不断总结,共同进步,活到老学到老 导航 檀越剑指大厂系列:全面总

    2024年03月10日
    浏览(39)
  • 【STM32】高效开发工具CubeMonitor快速上手

    工欲善其事必先利其器。拥有一个辅助测试工具,能极大提高开发项目的效率。STM32CubeMonitor系列工具能够实时读取和呈现其变量,从而在运行时帮助微调和诊断STM32应用,类似于一个简单的示波器。它是一款基于流程的图形化编程工具,类似于LabView或者是Simulink。 通过此篇博

    2024年02月13日
    浏览(39)
  • 超高性能MCU发布,为开发人员提供了高效的工具链

    近日嵌入式开发软件和服务的全球领导者IAR与业界领先的半导体器件供应商兆易创新(GigaDevice)宣布,联合推出最新版本IAR Embedded Workbench for Arm 9.40已经全面支持兆易创新的GD32H737/757/759系列超高性能MCU微控制器,这为**ERP系统**开发人员提供了高效的工具链。 据了解,GD32H737/7

    2024年02月16日
    浏览(51)
  • IDEA常用高效开发工具—screw一键生成数据库文档(仅需三步)

    引入screw核心... 在自己设置的保存位置打开即可:

    2024年02月15日
    浏览(47)
  • 更强版本来袭,华为云耀云服务器L实例让小程序开发更高效更安全

    当今世界,百年未有之大变局加速演进,互联网日益成为推动发展的新动能、维护安全的新疆域、文明互鉴的新平台。2023年世界互联网大会乌镇峰会期间发布的《中国互联网发展报告2023》蓝皮书显示,当前,我国数字经济发展势头强劲,成为稳增长促转型的重要引擎。 数字

    2024年02月05日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包