(超多图，超详细，全网唯一？)玩：搭建自己的图床服务器。借助免费一小时服务器，来将 nodejs 项目部署到真实公网服务器上！

已于 2024-02-19 10:43:36 修改
阅读量2.5k 收藏 24
点赞数 28
文章标签： 服务器 运维 前端 node.js express javascript
于 2024-02-19 00:44:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/linhieng/article/details/136160916
版权

曾几何时，我还是一个小小白（现在已经进步了——是小白了），一直想试试搭建一个自己的在线图床网站来玩一玩，但是又不想花钱买服务器（毕竟新用户资格的优惠是最大的，不能随便浪费），于是一番查找发现阿里云提供了免费服务器供学生学习。我现在还记得当初成功搭建线上图床时有多兴奋！

（最近整理笔记时才发现）当时专门写了一篇笔记来记录整个过程，于是专门分享出来。

准备免费服务器，并连接到云端

进入 场景体验——搭建Node.js编程环境

在这里插入图片描述

在这里插入图片描述

复制公网 IP 和密码

在这里插入图片描述

打开本机 powershell 运行下面命令。推荐使用 window ternimal（点击查看之前的文章，介绍了如何安装 wt）

ssh root@101.133.135.207

在这里插入图片描述

配置 node 环境

下载 node 12 版本。（高版本需要额外的处理，这里为了方便，直接使用 12 版本）

wget https://nodejs.org/download/release/v12.22.12/node-v12.22.12-linux-x64.tar.gz

在这里插入图片描述

解压安装。（使用 -xvf 则可以输出解压信息）

tar -xf node-v12.22.12-linux-x64.tar.gz

在这里插入图片描述

将解压后的内容移动到另外位置。

mv node-v12.22.12-linux-x64 /usr/local/node12

在这里插入图片描述

也可以使用 tar -xf node-v12.22.12-linux-x64.tar.gz -C /usr/local/node12 一步到位

配置环境变量

echo "export PATH=$PATH:/usr/local/node12/bin" >> /etc/profile

在这里插入图片描述

刷新配置文件以便生效

source /etc/profile

测试环境变量是否成功配置

node -v
npm -v

在这里插入图片描述

搭建简易图床项目

  1. 创建一个文件夹

    mkdir -p /usr/www/simple-gallery && cd "$_"

  2. 初始化环境

    npm init -y

  3. 使用淘宝 npm 镜像源，不然网络太慢难以下载

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

  4. 安装 express 搭建服务器，安装 multer 上传文件，安装 nodemon 热更新（如果你运行顺利的话，并不需要这个）

    npm i --save express multer nodemon

在这里插入图片描述

在这里插入图片描述

搭建好环境后，你们可以选择自己敲代码，我这里为了方便，直接提供了案例代码。一共只有两个文件 index.js 和 index.html

index.html 内容

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简易在线图床</title>

    <style>
        #preview-box {
            display: flex;
            flex-wrap: wrap;
        }

        img {
            max-width: 200px;
            margin: 20px;
            border-radius: 10px;
            box-shadow: 0 0 5px #666;
        }

        button {
            margin: 20px;
            width: 80px;
            height: 40px;
            border-radius: 10px;
        }
    </style>
</head>

<body>

    <form action="upload" method="post" enctype="multipart/form-data">
        <button type="submit">上传</button>
        <input type="file" name="files" required multiple accept="image/*">
    </form>

    <div id="preview-box"> </div>

    <script>
        const previewBox = document.getElementById('preview-box')
        const form = document.querySelector('form')

        form.onsubmit = formSubmit

        function formSubmit(e) {
            try {
                /** @type {HTMLFormElement} */
                const form = e.currentTarget
                const req = new Request(form.action, {
                    method: form.method,
                    body: new FormData(form)
                })

                fetch(req).then(res => {
                    if (!res.ok) {
                        throw new Error(`HTTP error! Status: ${res.status}`);
                    }
                    return res.json()
                }).then((data) => {
                    data.forEach(url => {
                        previewImg(url)
                    });
                })
            } catch (error) {

            }
            return false
        }

        function previewImg(path) {
            const a = document.createElement('a')
            a.innerHTML = `<img src=${path} alt="预览的图片" />`
            a.href = path
            a.target = '_blank'
            previewBox.prepend(a)
        }

    </script>

</body>

</html>

index.js 内容

const express = require('express')
const multer = require('multer')
const fs = require('fs')
const path = require('path')
//const { randomUUID } = require('crypto') node 版本太低不支持

const app = express()
const upload = multer()

const PORT = 80 // 本地运行时推荐修改此端口
const IMG_RELATIVE_PATH = 'img'
const __IMG_PATH = path.resolve(IMG_RELATIVE_PATH)
const __ROOT_PATH = path.resolve('./index.html')


initFolder(__IMG_PATH)
app.use(express.json())

app.get('/', (req, res) => {
    res.sendFile(__ROOT_PATH)
})

app.get(`/${IMG_RELATIVE_PATH}/:img`, (req, res) => {
    res.sendFile(`${__IMG_PATH}/${req.params.img}`)
})

app.post('/upload', upload.any(), (req, res) => {
    const imgs = []
    req.files.forEach(file => {
        const filename = generateName(file.mimetype)
        const filepath = path.join(__IMG_PATH, filename)
        fs.writeFileSync(filepath, file.buffer)
        imgs.push(`/${IMG_RELATIVE_PATH}/${filename}`)
    })

    res.send(imgs)
})

app.use((err, req, res, next) => {
    res.status(500).send('Something broke!')
    console.log(err);
})


app.listen(PORT, () => {
  console.log(`Example app listening on port ${PORT}`)
})


// ------------------

function initFolder(img_path) {
    if (!fs.existsSync(img_path)) {
        fs.mkdirSync(img_path)
    }
}

// 替代 crypto.randomUUID
function randomUUID() {
    return Math.random().toString().substring(2)
}

function generateName(minetype) {

    // const ext = minetype.split('/').at(-1) 不支持 split 函数
    const ext = minetype.substring(6) // 由于我们确信时 image/xxx 所以直接通过字符串定位获取后缀名
    return randomUUID() + (
        ext ? `.${ext}` : ''
    )
}

上传文件内容

为了方便，我们不借助 xftp 等工具上传文件，而是直接将文件内容发送到服务器。新建终端，执行下面命令

get-content "D:\draft\all-code-tmp\index.html" | ssh root@101.133.135.207 "cat > /usr/www/simple-gallery/index.html"
# 路径需改成你自己的本机 index.html 路径，IP 也要改成你自己的 IP

get-content "D:\draft\all-code-tmp\index.js" | ssh root@101.133.135.207 "cat > /usr/www/simple-gallery/index.js"
# 路径需改成你自己的本机 index.js 路径，IP 也要改成你自己的 IP

在这里插入图片描述

然后回到服务器终端，查看文件是否成功上传

ls -al

在这里插入图片描述

然后启动项目

node_modules/.bin/nodemon index.js
# 这里就不在 package.json 的 scrip 中配置命令 nodemon index.js 了

# 或者

node index.js &
# & 符号表示后台运行，这是可选的。

在这里插入图片描述

测试图床功能

打开公网 ip （由于是阿里云提供的用于学习的服务器，所有不需要考虑防火墙等内容）

在这里插入图片描述

在这里插入图片描述

可以看到，虽然只给了免费一小时，但这是完全够用的（而且在这过程中我还遇到了一些 bug 耽搁了一些时间）

在这里插入图片描述
如果你看到这里，那你还不赶紧试试😁。这篇文章可能具有时效性，因为旧笔记中的很多内容就是过时了。

我是怎么找到 node12 版本链接的

如果有人是跟着实验手册走的，那么可能会发现实验手册中的 node 版本链接是无法下载的，原因是淘宝已经换源了。

在这里插入图片描述

在这里插入图片描述

有些初学者可能不知道官网的 node 链接应该如何找，这里我就专门提一下：

进入 node官方 点击下载

在这里插入图片描述

在这里插入图片描述

其中的 Linux Binaries (x64) 链接就是我们需要的了

如何想要找旧版本，可以点击以前的发行版本

在这里插入图片描述

选择你想要的版本，

在这里插入图片描述

然后选择 node-xxx-linux-arm64.tar.gz 就可以了

在这里插入图片描述

linhieng
关注
教程：使用华为云服务器搭建自己的网站（vue+nodejs+mysql）
陆克成长记
05-24 2513
使用云服务器搭建属于自己的网站，从服务器、前端、后端、数据库一步到位
Nodejs项目服务器部署
热门推荐
yangyang的专栏
11-03 2万+
根据慕课网课程《Nodejs最后一公里》记的笔记 1.项目准备 1.购买自己的域名 2.购买自己的服务器 3.域名备案 4.配置服务器应用环境（用户的权限、无密码的登陆、Nodejs环境、包和组件的安装、端口的转发、SSH证书生成和配置、Nginx的安装和配置、防火墙、数据库、自动备份的机制等等） 5.安装配置数据库（有本地数据库和云数据库）（数据库涉及到数据库的角色、数据库的读写权限、自动备...
使用gitee搭建图床，并解决防盗链问题
我认不到你的博客
02-27 3243
防盗链不是一根链条，正确的停顿应该是防、盗链——防止其他网站盗用我的链接。 我把图片上传到gitee的服务器，得到了图片的链接，然后拿着这个链接在第三方编辑器中使用，这就是在“盗用”——因为这张图片占用了gitee的服务器资源，却为第三方编辑器工作，gitee得不到好处，还得多花钱。
Node.js应用的常见部署方法是什么？
最新发布
有我更精彩的博客
09-21 978
Node.js应用的部署方法多样，可以根据应用的需求和团队的偏好选择合适的部署策略。PM2适合简单的生产部署，Docker提供了容器化部署的灵活性，Nginx可以作为反向代理提高性能和安全性，云服务平台简化了部署流程，而CI/CD工具则可以实现自动化部署。选择适合你的部署方法，可以确保你的Node.js应用在生产环境中稳定运行。最后问候亲爱的朋友们，并邀请你们阅读我的全新著作书籍详情。
服务器+宝塔+Chevereto 搭建个人图床
01-20
服务器+宝塔+Chevereto 搭建个人图床 先附上我的demo： http://img.xubean.top/ 步骤: 前去github下载压缩包。 在宝塔面板新建网站，并且创建一个数据库。 将下载的压缩包解压至你新建的网站的目录。注意这里需要更改一个东西。 打开新建的网站，跟着提示一步步配置。 1. 下载压缩包 你可以点这里去github下载，也就4MB，一会就下载完了。 2. 在宝塔新建一个网站这个就不用多说了吧。 然后创建一个数据库。记住数据库名、用户名、密码等 3. 把下载好的压缩包上传到你新建的网站的目录里面然后解压。 4. 注意这里需要更改一个东西 首先找到网站的设置
图床服务器
Annx
08-12 273
使用nodejs搭建图片服务器(一)
weixin_30565199的博客
06-05 1403
背景 　　当我们开发一个Web项目的时候，为了将图片管理与web服务分离开，通常都会搭建一个图片服务器。 　　之所以选择nodejs是因为使用nodejs来搭建web项目相当简单而且快速，虽然这个图片服务器很简单，也有很多人会认为使用nodejs来当图片服务器不合适，但是当我们的应用没有达到非常大的程度的情况下，其实nodejs还是够用的。 　　会使用到的工具如下： nodejs e...
Nodejs 项目的线上服务器部署与发布
04-21
Node.js线上服务器部署与发布，阿里云部署Node.js+MongoDB的应用项目，跨越成功的最后一步。百度云盘下载地址。百度云盘下载地址。百度云盘下载地址。
NodeJS基础API搭建服务器详细过程记录
01-01
本文将以一个超小型web项目，来详细介绍如何使用NodeJS基础的http, fs, path, url等模块提供的API来搭建一个简单的web服务器。当做对NodeJS的一次复习，也为初学NodeJS的开发者提供一个参考。本文所搭建的项目将不会...
NodeJS之搭建Web服务器
weixin_45732235的博客
11-01 4228
学习笔记
使用Nodejs搭建本地静态服务器
Sun_blog
06-10 1814
在日常开发中，我们经常会在本地文件夹中直接打开HTML页面，一般都是file协议但当代码中存在http或https等外部资源时，HTML页面就无法正常打开，为了解决这个问题就需要搭建本地静态服务器。如果你知道怎么搭建本地静态服务器，自己用任何方式搭建都可以。如果不了解的话，建议使用nodejs去快速搭建一个本地静态服务器，因为它比较简单快捷。使用Nodejs搭建本地静态服务器，首先,查看Nodejs是否安装。在项目目录下，进入命令行窗口，输入 查看Nodejs的安装情况： 返回正确的版本号，说明这台机器已
NodeJs: 上传图片到服务器
少东的博客
05-02 1万+
信息爆炸的时代，获取到信息的门槛大大降低，但同时也加大了我们理解信息的难度。针对某一个问题，网上会有关于这个问题的好多篇博客或文章。但是翻过一遍后会发现，这些文章中去掉全文都是代码、什么解释也没有的，复制粘贴的，使用各种不必要的框架解决问题的，描述逻辑混乱的，再去掉排版不好看着不舒服的，之后也没几篇能看的了。每个人似乎都在想要提供一个解决方案，但是描述问题的时候能否按逻辑来，一步步走，代码加点注释...
部署一个nodejs项目+配置server
weixin_70752007的博客
07-31 1297
c:/windown/system32/drivers/etc/host/ ：取消只读，设置权限，如果还不行，就直接创建。注意：public专门用来保存图片，视频等，我们需要搭建一台nfs服务器向以下目录同步图片，视频，音乐等。npm和rpm一样的，都是包管理器，npm是nodejs包管理器，npm用于管理nodejs开发的软件。默认npm的下载文件的链接在国家域外，下载很慢，所有使用淘宝的镜像。3.负载均衡，使用nginx管理后端服务器，分配后端服务器压力。单独创建一个文件保存，在主配置文件使用。
nodejs 项目部署到 服务器
weixin_48295713的博客
01-25 2601
实现如下效果： 本机： http://localhost:3003/WebApi/myapp/login 服务器（通过IIS管理器）： http://域名/WebApi/myapp/login nodejs通过本机运行访问 nodejs在云服务器（IIS）运行访问 有需要的可在下方评论，@博主写教程！！没同志需要懒就局域懒得写！！！！！ ...
node.js项目部署
weixin_46560512的博客
02-26 3294
node.js项目部署 1.引言 ​ 本次node.js本来寒假断断续续学了20多天，本来没有实战，心里觉得有点虚，刚好返校之后遇到了实习，纠结了很久才决定暂缓复习考研，node.js简直比thinkphp6还容易上手，项目接口非常清晰，主要是需要记录一下特殊的第三方依赖。如果把这个写完，我可能觉得成就感其实是不足的，于是我决定试试node.js项目的部署，因为node.js直接挂ip实在是太丑了。 2.niginx配置 ​ 首先，在宝塔面板和阿里云上面开端口，阿里云上面配置二级域名，获取niginx证书就
搭建个人服务器图床最速の传说（docker+minio+picgo）
qq_59622162的博客
08-27 3330
快速搭建个人服务器图床
搭建图床
Harrytsz的博客
07-22 393
harrytszBlogPics 介绍 本仓库为 harrytsz 多个博客系统提供图床服务 软件架构 可能很多小伙伴苦恼于 Github 搭建的图床访问速度过慢，同时受累于租赁七牛云、阿里云服务器搭建图床步骤的繁琐。为了解决这个痛点，本文提供一套操作流程简洁明了的解决方案：PicGo + Gitee PicGo + Gitee 图床 只需要将图片上传至指定图床，就可以获取图片链接，适用于支持 Markdown 的各种文档。 安装教程 安装 gitee 插件 选择左边栏 “插件设置”，输入"gitee
win10 uwp 使用 asp dotnet core 做图床服务器客户端
lindexi
10-31 2640
本文告诉大家如何在 UWP 做客户端和 asp dotnet core 做服务器端来做一个图床工具
nodejs搭建服务器
07-27
Node.js可以用来搭建服务器，以下是一些步骤和代码示例： 1. 首先，你需要安装Node.js和Express框架。可以使用npm命令来安装它们。 2. 创建一个service.js文件，并在其中导入Express模块和创建一个Express应用程序的实例。 3. 使用app.listen方法来配置服务器的端口号，并启动服务器。 4. 可以使用app.get方法来定义GET请求的路由和处理函数。例如，可以创建一个'/api/list'的路由，当收到GET请求时，返回一个包含数据的JSON对象。 5. 可以使用app.post方法来定义POST请求的路由和处理函数。例如，可以创建一个'/api/setList'的路由，当收到POST请求时，将请求体中的数据存储起来，并返回一个包含存储数据的JSON对象。 6. 可以使用app.use方法来配置中间件。例如，可以使用express.static中间件来将静态文件部署到服务器上。 7. 最后，通过运行node service.js命令来启动服务器。 下面是一个示例代码： ```javascript const express = require('express'); const app = express(); app.use(express.static('img')); app.use(express.urlencoded({ extended: false })); app.get('/api/list', (req, res) => { res.send({ code: 200, data: \[{ name: 1 }, { name: 2 }, { name: 3 }\] }); }); app.post('/api/setList', (req, res) => { const newList = req.body; console.log(newList); res.send({ newList }); }); app.listen(9588, () => { console.log('服务器启动成功'); }); ``` 通过以上步骤和代码示例，你可以使用Node.js搭建一个简单的服务器，并处理GET和POST请求。 #### 引用[.reference_title] - *1* *2* [nodejs如何搭建服务器](https://blog.csdn.net/weixin_41472455/article/details/110274100)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [如何通过nodejs快速搭建一个服务器](https://blog.csdn.net/ct5211314/article/details/128282738)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值