实现静态资源访问的几种方法

什么是静态资源？

静态资源是指在服务器端存储的不会变化的文件，如HTML、CSS、JavaScript、图片、音频、视频等文件。这些文件一般不包含动态内容，每次请求时返回的内容都是固定的。

为什么要使用静态资源？

  • 提升网站性能：静态资源可以被缓存到客户端，减少了服务器的负载和响应时间，提升了网站的加载速度和性能。

  • 减少网络流量：由于静态资源可以被缓存，客户端只需要在初次请求时下载，后续的请求可以直接使用缓存，减少了网络流量的消耗。

  • 改善用户体验：快速加载的网页能够提供更好的用户体验，降低了用户的等待时间，增加了用户的满意度。

  • 方便管理和维护：静态资源可以独立于服务器端进行管理和维护，更新和替换静态资源也相对简单。

静态资源如何进行存放也有很多中方式，对于如何存放静态资源我们一般会有以下的一些解决方案：

直接编辑放到服务器

这是最简单的一种方法，将静态资源直接编辑放到服务器的指定目录下。当用户访问该服务器时，可以通过URL直接访问到这些静态资源。这种方法适用于小型项目或者对访问速度要求不高的场景。

放置到Nginx等资源服务器

Nginx是一个高性能的HTTP和反向代理服务器，可以用于静态资源的访问。将静态资源放在Nginx服务器上，可以提高访问速度和并发处理能力。通过配置Nginx的静态资源目录，可以直接通过URL访问这些资源。

  1. 下载安装nginx

  2. 配置nginx

location /images {root /usr/local/nginx/html;
}

如果把root改为alias，配置需要修改相应配置

location /images {alias /usr/local/nginx/html/images;
}

root和alias的区别是
1.root会把location 后面的也会加到访问地址里。
2.如果location路径是以/结尾,则alias也必须是以/结尾，而root没有要求

  1. 启动nginx
start nginx
  1. 访问资源
    在/usr/local/nginx/html目录下创建一个 images目录,并在目录下放入一张图片demo.png
    访问图片路径为http://[ip]/images/demo.png

使用express、koa等后端服务

在后端服务器中，可以设置特定的路由来处理静态资源的访问请求。例如，使用Node.js的Express框架可以使用express.static中间件来处理静态资源的请求。

以koa为例，使用koa-static插件可以通过url直接访问静态资源

  1. 安装koa以及koa-static依赖

  2. 使用koa启动一个服务器，配置相应静态资源地址

import Koa from 'koa';
import KoaStatic from 'koa-static';
import path from 'path';const app = new Koa();// public 目录下内容作为静态文件输出
const staticPath = './public'// 注册KoaStatic
app.use(KoaStatic(path.join(__dirname, staticPath)));const port = process.env.PORT || '8082';
app.listen(port, function () {console.log(`服务器运行在http://127.0.0.1:${port}`);
});

在public文件夹中放入demo.png 就可以通过http://localhost:8082/demo.png直接访问图片

资源存放在CDN

CDN（内容分发网络）是一种分布式网络架构，可以将静态资源缓存到离用户最近的节点上，从而提高资源的访问速度，让用户可以更快的下载资源文件。

CDN的基本原理

将内容缓存到离用户更近的节点上，使用户能够从就近的节点获取所需的资源，从而减少网络延迟和带宽消耗。下面是CDN的基本工作流程：

  • 用户发送请求到目标网站，请求的资源如图片或静态文件。
  • CDN节点会检查是否有缓存的副本。如果有，CDN节点将缓存的资源返回给用户；如果没有，进入下一步。
  • CDN节点向源服务器发起请求，获取源服务器上的资源。
  • 源服务器将资源传输给CDN节点。
  • CDN节点将资源缓存到本地节点，并返回资源给用户。
    通过将资源缓存到离用户最近的节点，CDN能够提供更快速和可靠的内容交付，减少了跨越长距离网络的延迟和拥塞。

CDN的优势

  • CDN可以分担源服务器的负载。当网站有大量用户访问时，CDN节点可以缓存并提供静态资源，减轻源服务器的压力，提高网站的稳定性和可扩展性。
  • CDN可以加速静态资源的加载。将常用的CSS和JavaScript文件托管到CDN上，用户在访问网站时可以从离他们最近的CDN节点加载这些文件，加快网页加载速度，提升用户的体验。

以下是几种常见的同步文件到CDN的方式：

手动同步

将静态资源上传到CDN提供商的控制台，并手动触发同步操作。这种方式适用于静态资源更新频率较低的情况。

自动同步

通过脚本或工具实现自动同步静态资源到CDN。可以使用FTP、Rsync等工具，或者编写脚本进行定时同步。这种方式适用于静态资源更新频率较高的场景。
1.使用rsync工具进行同步，rsync是一个强大的文件同步工具，可以用于在本地和远程服务器之间同步文件。

基本语法如下：

rsync [OPTION]... SRC [SRC]... DEST

其中，SRC是源文件或目录的路径，DEST是目标文件或目录的路径。

以下是一些常用的rsync选项：

  • -a：归档模式，保持文件的所有属性，包括权限、所有者和组、时间戳等。
  • -v：显示详细输出，可以查看文件同步的进度和结果。
  • -z：启用压缩传输，可以加快网络传输速度。
  • --delete：删除目标目录中不存在于源目录中的文件。
  • --exclude：排除指定的文件或目录，可以使用通配符。

以下是一些示例用法：

  • 将本地目录/path/to/source同步到远程服务器的/path/to/destination目录：
rsync -avz /path/to/source remoteuser@remotehost:/path/to/destination
  • 同步文件时排除某些文件或目录：
rsync -avz --exclude 'file.txt' /path/to/source remoteuser@remotehost:/path/to/destination

rsync需要在本地和远程服务器上都安装并可用。另外，确保在使用rsync时，你有足够的权限来访问源和目标文件。

  1. 使用scp命令进行同步，SCP（Secure Copy）是一种在本地主机和远程主机之间进行安全文件传输的命令行工具。它基于SSH协议，提供了加密的数据传输。

使用SCP进行文件传输的基本语法如下：

scp [选项] [源文件路径] [目标路径]

其中，[选项]是可选的，可以用于指定一些参数，如连接端口、指定密钥等。[源文件路径]是要传输的文件或目录的路径，可以是本地路径或远程路径。[目标路径]是文件传输的目标路径，可以是本地路径或远程路径。

以下是一些常用的SCP命令示例：

  • 从本地主机拷贝文件到远程主机：
scp /path/to/local/file username@remote:/path/to/remote/directory
  • 从本地主机拷贝整个目录到远程主机：
scp -r /path/to/local/directory username@remote:/path/to/remote/directory

在执行SCP命令时，可能需要输入密码或提供密钥进行身份验证。如果远程主机使用非默认的SSH端口，可以使用-P选项指定端口号。

基于版本控制系统的同步

将静态资源放在版本控制系统（如Gitlab）中，并通过钩子脚本实现自动同步到CDN。每次提交代码时，自动触发同步操作。这种方式适用于团队协作开发，需要保持静态资源与代码同步的情况。

在Gitlab中使用ci同步文件：

  1. 安装Gitlab Runner

  2. 执行注册Runner注册，根据提示输入token等内容，相关内容在gitlab网站中可以看到

gitlab-runner register

  1. 在GitLab仓库中创建一个名为.gitlab-ci.yml的文件，定义一个名为job的任务。例如：
job:script:- sh script.sh

script.sh 中可以进行同步文件

rsync -av -e ssh ./ root@ip:/data/
  1. 提交并推送.gitlab-ci.yml文件到你的GitLab仓库。
  2. 当你提交代码时，GitLab将会自动执行定义的任务，并执行你的shell脚本。

注意，你需要确保你的GitLab仓库已经启用了CI/CD功能，并且你的GitLab Runner已经正确配置和连接到你的仓库。

API同步

一些CDN提供商提供API接口，可以通过编写程序调用API实现静态资源的同步。通过API可以实现更加灵活和精细化的资源同步操作。
比如在阿里云使用CDN加速OSS访问，使用oss的api进行文件的同步

main.ts

import fs from 'fs';
import path from 'path';
import OSSClient from './OSSClient';const ProjectName = require('./package.json').name;// bucket 需要替换为自己的oss
const ossClient = new OSSClient('bucket');function main() {const dir = './lib';const list = [];getIndexOfPathByDeep(list, dir, '');const promiseList = list.map(url => {const file = fs.readFileSync(url);return ossClient.client.put(ProjectName + '/' +url, file, {'Content-Encoding': 'gzip'});});Promise.all(promiseList).then(list => {console.log('async oss complate');}, err => {console.log('error=====');console.log(err);})
}function getIndexOfPathByDeep(dirList, dir, curDir) {let curPath = path.join(dir, curDir);// 搜索到文件，停止if(fs.statSync(curPath).isDirectory()) {let lists = fs.readdirSync(curPath);lists.forEach(childDir => getIndexOfPathByDeep(dirList, curPath, childDir));} else {dirList.push(curPath);}
}main();

OSSClient.ts

import OSS from 'ali-oss';//默认配置
const DEFAULT = {region: 'oss-cn-beijing',accessKeyId: 'accessKeyId',accessKeySecret: 'accessKeySecret',secure: true,
};
/*** 文件上传下载类，使用的是OSS的SDK*/
class OSSClient {constructor(bucket: string, opts: OSS.Options = DEFAULT) {this.Options = Object.assign({ bucket }, opts);this.Host = bucket;//初始化this.client = new OSS(this.Options);}client: OSS;Options: OSS.Options;Host: string;async getFileName(file: File) {const mime = file.name.substring(file.name.lastIndexOf('.'));const filename = Date.now() + Math.round(Math.random() * 1000);return `file/${filename}${mime}`;}/*** 简单的上传文件，小于100MB* @param file 文件对象* @param opts 参数* @returns 文件结果对象*/async upload(file: File, opts: OSS.PutObjectOptions = {}) {const fileName = await this.getFileName(file);opts.mime = file.type.includes('image') ? 'image/jpg' : file.type;const result = await this.client.put(fileName, file, opts);return {uid: result.name,key: result.name,url: this.Host + fileName,downloadUrl: this.client.signatureUrl(result.name),name: result.name,textUrl: this.Host + fileName,};}
}
export default OSSClient;

以上是实现静态资源访问的几种方法，包括直接编辑放到服务器、koa搭建静态服务器、单独放在Nginx服务器以及放在CDN并同步文件的几种方式。每种方法都有其适用的场景和优势，读者可以根据自己项目的需求选择合适的方法。在实际应用中，可以根据项目的规模、访问量和资源更新频率等因素综合考虑，选择最合适的静态资源访问方式

参考

阿里云oss文档
Koa文档

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/83015.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Docker学习（二十四）报错速查手册

Docker学习（二十四）报错速查手册

目录 一、This error may indicate that the docker daemon is not running 报错docker login 报错截图：原因分析：解决方案： 二、Get "https://harbor.xxx.cn/v2/": EOF 报错docker login 报错截图：原因分析&#xff1a…
阅读更多...
谷歌推出AI模型机器人RT2 将文本和图像输出为机器人动作

谷歌推出AI模型机器人RT2 将文本和图像输出为机器人动作

去年年底，ChatGPT火遍全球，全世界都见识了大语言模型的强大力量。人们对大模型不再陌生，开始使用基于大模型的应用绘画、作图、搜索资料、设计剧情等，而妙用不止于此。谷歌推出了Robotics Transformer 2(RT2)，这是一个…
阅读更多...
计算机网络 数据链路层 媒体接入控制

计算机网络 数据链路层 媒体接入控制

阅读更多...
Python中enumerate用法详解

Python中enumerate用法详解

目录 1.简介 2.语法 3.参数 4.返回值 5.详解 6.实例 7.补充 1.简介 enumerate() 函数用于将一个可遍历的数据对象(如列表、元组或字符串)组合为一个索引序列，同时列出数据和数据下标，一般用在 for 循环当中。 2.语法 以下是 enumerate() 方法的语…
阅读更多...
Sencha Ext.NET Crack 快速应用程序的正确工具集

Sencha Ext.NET Crack 快速应用程序的正确工具集

Sencha Ext.NET Crack 快速应用程序的正确工具集 Sencha Ext.NET是一个高级的ASP.NET核心组件框架，它包含了强大的跨浏览器Sencha Ext JS库。通过140多个预构建和专业测试的UI组件实现企业级性能和生产效率。Sencha Ext.NET使用尖端的Web技术创建功能强大的Web应用程…
阅读更多...
Transformer理论学习

Transformer理论学习

Transformer出自于论文《attention is all you need》。 一些主流的序列模型主要依赖于复杂的循环结构或者CNN，这里面包含了编解码器等。而Transformer主要的结构是基于注意力机制，而且是用多头注意力机制去替换网络中的循环或者CNN(换言之就是transfor…
阅读更多...
可靠传输-选择重传协议SR

可靠传输-选择重传协议SR

一个数据分组的误码就会导致其后续多个数据分组不能被接收方按序接收而丢弃 (尽管它们无乱序和误码)。这必然会造成发送方对这些数据分组的超时重传，显然这是对通信资源的极大费。 为了进一步提高性能，可设法只重传出现误码的数据分组。因此，…
阅读更多...
Python基础--序列操作/函数

Python基础--序列操作/函数

Python基础 1.序列的操作 2.函数 1. 数据类型的具体操作 1.1 序列操作--列表具体操作： #定义列表 listA [] #定义一个空列表 listB [1,2.8,"你好",listA,[1,2,3]] # 访问列表 print(listB)#查看整个列表 print(listB[2])#查看单个…
阅读更多...
OpenLayers入门，OpenLayers实现地图原地旋转动画效果

OpenLayers入门，OpenLayers实现地图原地旋转动画效果

专栏目录： OpenLayers入门教程汇总目录 前言 OpenLayers实现地图原地旋转动画效果，顾名思义，就是站在原地转一圈。 二、依赖和使用 "ol": "^6.15.1"使用npm安装依赖npm install ol@6.15.1使用Yarn安装依赖yarn add olvue中如何使用： vue项目使用…
阅读更多...
nodejs登录生成token并验证

nodejs登录生成token并验证

目录 一、基础概念 二、JTW 三、实践 一、基础概念 "token"： 是一个通用的术语，指代一种用于表示身份、权限或访问凭证的数据结构。它可以是一个字符串、数字或其他形式的数据。 主要用途： 身份验证：在身份验证过程…
阅读更多...
(Python)Requests+Pytest+Allure接口自动化测试框架从0到1搭建

(Python)Requests+Pytest+Allure接口自动化测试框架从0到1搭建

前言：本文主要介绍在企业使用Python搭建接口自动化测试框架，数据驱动读取excel表里的数据，和数据库方面的交互，包括关系型数据库Mysql和非关系型数据库MongDB，连接数据库，读取数据库中数据，最后…
阅读更多...
云原生可观测框架 OpenTelemetry 基础知识(架构/分布式追踪/指标/日志/采样/收集器)...

云原生可观测框架 OpenTelemetry 基础知识(架构/分布式追踪/指标/日志/采样/收集器)...

什么是 OpenTelemetry？ OpenTelemetry 是一个开源的可观测性框架，由云原生基金会(CNCF)托管。它是 OpenCensus 和 OpenTracing 项目的合并。旨在为所有类型的可观测信号(如跟踪、指标和日志)提供单一标准。 https://opentelemetry.iohttps://www.cncf.io…
阅读更多...
Java课题笔记~ Servlet编程

Java课题笔记~ Servlet编程

1.Servlet编程基础 (1)什么是Servlet Servlet是基于Java语言的Web编程技术，部署在服务器端的Web容器里，获取客户端的访问请求，并根据请求生成响应信息返回给客户端。 创建Servlet的方式，有 如下图：一般创建Servlet都…
阅读更多...
交流有效值，峰值和平均值关系

交流有效值，峰值和平均值关系

1，交流有效值，峰值和平均值关系： 2，根据负载，确定变压器满载时的输出电压： 1），为了使稳压芯片MIC29302输出4V，LDO压差 0.4V，整流桥压降为1V， 则…
阅读更多...
web-初始前端

web-初始前端

不区分大小写&#xff0c;单双引号&#xff0c; <html><head><title>初识HTML</title></head><body><h1>Hello world!</h1><img src OIF-C.jfif/></body> </html> <!-- 文件格式 --> <!DOCTYPE h…
阅读更多...
第二课-一键安装SD-Stable Diffusion 教程

第二课-一键安装SD-Stable Diffusion 教程

前言 看完这篇文章并跟着操作，就可以在本地开始 SD 绘图了。 理论上来说，这篇课程结束，想要画什么图都可以画了。 启动器介绍 SD 是开源的，可以在 github 上找到。但直接下载源码安装，非常费劲，而且因为国内外差异，就是我这样的秃头程序员也难以应对。 所以，我们改…
阅读更多...
面试攻略，Java 基础面试 100 问（二）

面试攻略，Java 基础面试 100 问（二）

五大基本原则 单一职责原则SRP(Single Responsibility Principle) 是指一个类的功能要单一&#xff0c;不能包罗万象。如同一个人一样&#xff0c;分配的工作不能太多&#xff0c;否则一天到晚虽然忙忙碌碌的&#xff0c;但效率却高不起来。 开放封闭原则OCP(Open&#xff0…
阅读更多...
uniapp实现自定义导航内容高度居中（兼容APP端以及小程序端与胶囊对齐）

uniapp实现自定义导航内容高度居中（兼容APP端以及小程序端与胶囊对齐）

①效果图如下 1.小程序端与胶囊对齐 2.APP端内容区域居中 注意&#xff1a;上面使用的是colorui里面的自定义导航样式。 ②思路&#xff1a; 1.APP端和小程序端走不同的方法&#xff0c;因为小程序端要计算不同屏幕下右侧胶囊的高度。 2.其次最重要的要清晰App端和小程序端…
阅读更多...
Unity游戏源码分享-儿童益智数学大脑训练游戏

Unity游戏源码分享-儿童益智数学大脑训练游戏

Unity游戏源码分享-儿童益智数学大脑训练游戏 5秒内选择答案 项目下载地址&#xff1a;https://download.csdn.net/download/Highning0007/88198773
阅读更多...
[RoarCTF 2019Online Proxy]sql巧妙盲注

[RoarCTF 2019Online Proxy]sql巧妙盲注

文章目录 [RoarCTF 2019Online Proxy]sql巧妙盲注解题脚本脚本解析 [RoarCTF 2019Online Proxy]sql巧妙盲注 解题 在源代码界面发现&#xff1a;Current Ip 我们会联想到&#xff1a;X-Forwarded-For来修改ip&#xff1a; 结果我们发现&#xff0c;response会讲Last Ip回显出…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023