Several methods to implement static resource access

What are static resources?

Static resources refer to files that do not change and are stored on the server side, such as HTML, CSS, JavaScript, pictures, audio, video and other files. These files generally do not contain dynamic content, and the content returned is fixed for each request.

Why use static resources?

• Improve website performance: Static resources can be cached on the client, reducing server load and response time, and improving website loading speed and performance.
• Reduce network traffic: Since static resources can be cached, the client only needs to download them on the first request, and subsequent requests can directly use the cache, reducing the consumption of network traffic.
• Improved user experience: Fast-loading web pages can provide a better user experience, reduce user waiting time, and increase user satisfaction.
• Convenient management and maintenance: Static resources can be managed and maintained independently of the server, and it is relatively simple to update and replace static resources.

There are many ways to store static resources. We generally have the following solutions for how to store static resources:

Edit directly and put it on the server

This is the simplest method, edit the static resources directly and place them in the specified directory of the server. When users access the server, they can directly access these static resources through the URL. This method is suitable for small projects or scenarios where access speed is not high.

Place it on resource servers such as Nginx

Nginx is a high-performance HTTP and reverse proxy server that can be used to access static resources. Placing static resources on the Nginx server can improve access speed and concurrent processing capabilities. By configuring Nginx's static resource directory, these resources can be accessed directly through URLs.

1. Download and install nginx
2. Configure nginx

bash复制代码location /images {
    root /usr/local/nginx/html;
}

If you change root to alias, the configuration needs to be modified accordingly.

bash复制代码location /images {
    alias /usr/local/nginx/html/images;
}

The difference between root and alias is that 1. root will add the following location to the access address. 2. If the location path ends with /, the alias must also end with /, but root has no requirement.

1. Start nginx

sql复制代码start nginx 

4. To access resources, create an images directory in the /usr/local/nginx/html directory, and put a picture demo.png in the directory. The path to access the picture is http://[ip]/images/demo.png.

Use express, koa and other back-end services

In the backend server, specific routes can be set up to handle access requests for static resources. For example, the Express framework using Node.js can use the express.static middleware to handle requests for static resources.

Taking koa as an example, you can use the koa-static plug-in to directly access static resources through URLs.

1. Install koa and koa-static dependencies
2. Use koa to start a server and configure the corresponding static resource address

javascript复制代码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}`);
});

Put demo.png in the public folder and you can directly access the image through http://localhost:8082/demo.png

Resources are stored in CDN

CDN (Content Distribution Network) is a distributed network architecture that can cache static resources to the node closest to the user, thereby improving the access speed of resources and allowing users to download resource files faster.

Basic principles of CDN

Caching content to nodes closer to users enables users to obtain required resources from nearby nodes, thereby reducing network latency and bandwidth consumption. The following is the basic workflow of CDN:

• The user sends a request to the target website, requesting resources such as images or static files.
• The CDN node checks to see if there is a cached copy. If there is, the CDN node returns the cached resources to the user; if not, go to the next step.
• The CDN node initiates a request to the origin server to obtain resources on the origin server.
• The origin server transfers the resources to the CDN node.
• The CDN node caches the resources to the local node and returns the resources to the user. By caching resources to nodes closest to users, CDNs are able to provide faster and more reliable content delivery, reducing delays and congestion across long-distance networks.

Advantages of CDN

• CDN can share the load of the origin server. When a website is visited by a large number of users, CDN nodes can cache and provide static resources, reducing the pressure on the origin server and improving the stability and scalability of the website.
• CDN can speed up the loading of static resources. Host commonly used CSS and JavaScript files on CDN. When users visit the website, they can load these files from the CDN node closest to them, speeding up web page loading and improving user experience.

Here are several common ways to synchronize files to a CDN:

Manual sync

Upload the static resources to the CDN provider's console and manually trigger the synchronization operation. This method is suitable for situations where static resources are updated less frequently.

Automatic synchronization

Automatically synchronize static resources to CDN through scripts or tools. You can use tools such as FTP and Rsync, or write scripts for scheduled synchronization. This method is suitable for scenarios where static resources are updated frequently. 1. Use the rsync tool for synchronization. rsync is a powerful file synchronization tool that can be used to synchronize files between local and remote servers.

The basic syntax is as follows:

css复制代码rsync [OPTION]... SRC [SRC]... DEST

Among them, SRC is the path of the source file or directory, and DEST is the path of the target file or directory.

Here are some commonly used rsync options:

• -a: Archive mode, keep all attributes of the file, including permissions, owner and group, timestamp, etc.
• -v: Display detailed output, you can view the progress and results of file synchronization.
• -z: Enable compressed transmission, which can speed up network transmission.
• --delete: Delete files in the target directory that do not exist in the source directory.
• --exclude: Exclude specified files or directories, wildcards can be used.

Here are some example usages:

• Synchronize the local directory /path/to/source to the remote server's /path/to/destination directory:

ruby复制代码rsync -avz /path/to/source remoteuser@remotehost:/path/to/destination

• Exclude certain files or directories when syncing files:

ruby复制代码rsync -avz --exclude 'file.txt' /path/to/source remoteuser@remotehost:/path/to/destination

rsync needs to be installed and available on both the local and remote servers. Also, make sure you have sufficient permissions to access the source and destination files when using rsync.

1. Use the scp command for synchronization. SCP (Secure Copy) is a command line tool for secure file transfer between local host and remote host. It is based on the SSH protocol and provides encrypted data transmission.

The basic syntax for file transfer using SCP is as follows:

css复制代码scp [选项] [源文件路径] [目标路径]

Among them, [Option] is optional and can be used to specify some parameters, such as connection port, specified key, etc. [Source file path] is the path of the file or directory to be transferred, which can be a local path or a remote path. [Destination path] is the destination path for file transfer, which can be a local path or a remote path.

Here are some examples of commonly used SCP commands:

• Copy files from local host to remote host:

ruby复制代码scp /path/to/local/file username@remote:/path/to/remote/directory

• Copy the entire directory from the local host to the remote host:

ruby复制代码scp -r /path/to/local/directory username@remote:/path/to/remote/directory

When executing SCP commands, you may be required to enter a password or provide a key for authentication. If the remote host uses a non-default SSH port, you can use the -P option to specify the port number.

Synchronization based on version control system

Place static resources in a version control system (such as Gitlab) and automatically synchronize them to CDN through hook scripts. Each time the code is submitted, the synchronization operation is automatically triggered. This method is suitable for team collaboration and development where static resources and code need to be synchronized.

Use ci to synchronize files in Gitlab:

1. Install GitLab Runner
2. Execute Runner registration and enter token and other content according to the prompts. The relevant content can be seen on the gitlab website.

arduino复制代码gitlab-runner register

 

1. Create a file named .gitlab-ci.yml in the GitLab repository and define a task named job. For example:

yaml复制代码job:
  script:
    - sh script.sh

Files can be synchronized in script.sh

ruby复制代码rsync -av -e ssh ./ root@ip:/data/

4. Submit and push the .gitlab-ci.yml file to your GitLab repository. 5. When you submit the code, GitLab will automatically perform the defined tasks and execute your shell script.

Note that you need to ensure that your GitLab repository has CI/CD enabled and that your GitLab Runner is properly configured and connected to your repository.

API sync

Some CDN providers provide API interfaces, which can be used to synchronize static resources by writing programs to call the API. More flexible and refined resource synchronization operations can be achieved through API. For example, in Alibaba Cloud, CDN is used to accelerate OSS access, and the oss API is used to synchronize files.

main.ts

javascript复制代码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

typescript复制代码

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;

The above are several ways to achieve static resource access, including direct editing and placing on the server, building a static server with koa, placing it separately on the Nginx server, and placing it on a CDN and synchronizing files. Each method has its applicable scenarios and advantages, and readers can choose the appropriate method according to the needs of their own projects. In practical applications, the most appropriate static resource access method can be selected based on comprehensive considerations such as the scale of the project, the number of visits, and the frequency of resource updates.