cdn原理分析-本地搭建cdn模拟访问过程

14 篇文章 0 订阅
订阅专栏

在这里插入图片描述

这一生听过许多道理,但还是过不好这一生,这是因为缺少真正的动手实践,光听道理,缺少动手实践的过程,学习难免会让人觉得味同嚼蜡,所以我的分享都比较倾向于实践,在一次次动手实践的过程中感受知识原本纯真的模样。

大家好,我是蓝胖子,往往从事互联网开发的同学都听过cdn这个词,不过对于刚入行的同学可能会对这个概念比较模糊,今天我们就来聊聊它,并且我会在原理的基础上在本地搭建一个cdn环境,模拟域名配置,回源,以及缓存的过程。

本节源码已经上传到github

https://github.com/HobbyBear/cdndemo

现在,让我们开始吧。

cdn原理介绍

首先,我们来看下为什么要用cdn,比如一个专注做视频播放或者图片阅览的网站,当用户浏览网站时,需要从网站拉取图片或者视频资源,这将产生流量费用,并且,如果用户里网站服务器越远,产生的流量费用将越高。而cdn的原理则是将视频或者图片资源缓存在离用户比较近的服务器上,这样既提升了响应速率,又节约了流量费。

来看下使用cdn后,用户访问网站的过程。

img.png

如上图所示,假设用户自己的想要加速的域名是web.cdn.test,如果用户想对这个域名进行加速,首先要去cdn服务商那里配置上这个加速域名源站服务地址,接着cdn服务商会生成一个域名地址,这里假设为web.cdn.test.c.lanpangzi,而用户自己需要去自己的dns服务商那里将加速域名web.cdn.test 指向这个新的域名地址,这种将一个域名指向另一个域名的记录被称作cname记录。

经过上述步骤后,对域名web.cdn.test的访问会被指向web.cdn.test.c.lanpangzi,但目前还有一个问题,新的域名web.cdn.test.c.lanpangzi应该由cdn服务商自己的dns调度系统去解析,这样cdn服务商才能将边缘节点的ip返回给用户,那本地dns服务器怎么知道web.cdn.test.c.lanpangzi这个域名要交给哪台机器去解析呢?

原因是这样的,cdn服务商在注册自己的主域名时(这里的主域名是langpangzi.) ,向dns服务器注册了一条ns记录,ns记录可以指定将某个域名的解析交给哪一台dns服务器解析,比如这里,cdn服务商就把c.langpangzi. 域名的解析指向了cdn服务商自己的dns服务器。

完成了这一步,用户自己的加速域名最终就会被cdn服务商的dns服务器去解析了,cdn服务商一般在全球各地都有自己的节点,所以它会根据用户的ip去筛选一个离用户比较近节点ip返回,这些节点被称作边缘节点 ,这样用户的请求就能就近访问了。

本地搭建一个cdn

我们把上面的请求过程与cdn架构在本地模拟下,把自己想象成一个cdn服务商,我们将会搭建cdn的域名调度中心,和边缘节点,然后允许用户提供加速域名和回源服务器给我进行配置。

搭建dns服务器

我们先来搭建一个dns服务器,因为无论是cdn还是用户本身都需要进行一些dns域名配置,你可以把当前这个dns服务器想象成第三方dns运营商。

我们用dnsmasq在本地进行dns服务器的搭建,我本地机器用的mac,安装命令如下:

brew install  dnsmasq

==> Dependencies
Build: pkg-config ✔
==> Caveats
To start dnsmasq now and restart at startup:
  sudo brew services start dnsmasq
Or, if you don't want/need a background service you can just run:
  /opt/homebrew/opt/dnsmasq/sbin/dnsmasq --keep-in-foreground -C /opt/homebrew/etc/dnsmasq.conf -7 /opt/homebrew/etc/dnsmasq.d,*.conf
==> Analytics
install: 0 (30 days), 0 (90 days), 0 (365 days)
install-on-request: 0 (30 days), 0 (90 days), 0 (365 days

接着需要对其配置文件进行修改,配置上游服务器,以及配置当前dns服务器能够解析的域名

从安装的信息可以看出,其配置文件是在/opt/homebrew/etc/dnsmasq.conf 这个位置,这里我直接给出我的配置信息

# 配置上行DNS,对应no-resolv
resolv-file=/Users/xiongchuanhong/dnsmasq.conf
# 运行进程以哪个用户身份运行,直接用root,因为dnsmasq的配置涉及到权限问题
user=root
# 配置dnsmqsq运行日志,对排错很重要
log-facility=/Users/xiongchuanhong/logs/dnsmasq.log
# resolv.conf内的DNS寻址严格按照从上到下顺序执行,直到成功为止
strict-order
# DNS解析hosts时对应的hosts文件,对应no-hosts
addn-hosts=/etc/hosts
cache-size=1024
# 多个IP用逗号分隔,192.168.x.x表示本机的ip地址,只有127.0.0.1的时候表示只有本机可以访问。
# 通过这个设置就可以实现同一局域网内的设备,通过把网络DNS设置为本机IP从而实现局域网范围内的DNS泛解析(注:无效IP有可能导至服务无法启动)192.168.17.150 是我本地机器内网ip
listen-address=127.0.0.1,192.168.17.150
# 相当于ns记录,c.lanpangzi的域名以及其子域名都会由本地1053端口的进程去进行解析
server=/c.lanpangzi/127.0.0.1#1053
# cname记录,访问web.cdn.test 的域名都会指向web.cdn.test.c.lanpangzi 
cname=web.cdn.test,web.cdn.test.c.lanpangzi
# 重要!!这一行就是你想要泛解析的域名配置.
#address=/hello.me/127.0.0.1

上面resolv-file 所指向的文件是要配置的上游dns服务器,/Users/xiongchuanhong/dnsmasq.conf配置如下:

(base) ➜  ~ cat /Users/xiongchuanhong/dnsmasq.conf
 nameserver 8.8.8.8

当本地解析不了域名,那么dnsmasq会询问它的上游dns服务器,所以我们把它配置成谷歌的域名解析系统。

📢📢注意Users/xiongchuanhong/dnsmasq.conf和Users/xiongchuanhong/logs/dnsmasq.log文件都需要用root用户去创建,不然到时候运行会报权限错误。

接着启动dnsmasq服务

sudo brew services start  dnsmasq

然后再把机器的dns服务器ip改成127.0.0.1

1791686894116_.pic.jpg

1801686894126_.pic.jpg

接着测试下修改后的网络访问有没有问题

(base) ➜  ~ ping www.baidu.com
PING www.a.shifen.com (14.119.104.189): 56 data bytes
64 bytes from 14.119.104.189: icmp_seq=0 ttl=54 time=36.413 ms
64 bytes from 14.119.104.189: icmp_seq=1 ttl=54 time=11.351 ms
64 bytes from 14.119.104.189: icmp_seq=2 ttl=54 time=11.339 ms
64 bytes from 14.119.104.189: icmp_seq=3 ttl=54 time=16.660 ms

域名解析正常,接着进行下面的步骤。

搭建回源服务器和cdn边缘节点

接着我们来快速搭建下回源服务器和cdn的边缘节点,这里我是直接借用了nginx来进行搭建,因为nginx可以用作静态资源服务器,所以可以直接启动一个nginx容器把它作为源服务器,提供图片资源的访问。 并且nginx也能提供缓存服务,这也刚好符合边缘节点缓存资源的需求。由于边缘节点需要回源到源服务器,但是容器的ip又是不固定的,所以这里我直接用docker-compose对这两个容器进行了编排,这样在写nginx配置文件的时候,便可以用容器名代替ip了。

docker-compose.yaml配置文件
version: "3"  
services:  
  sourceserver:  
    image: nginx:latest  
    container_name: source-server  
    hostname: source-server  
    ports:  
      - '8080:80'  
    volumes:  
      - ./sourceserver/nginx.conf:/etc/nginx/nginx.conf  
      - ./sourceserver/logs:/var/log/nginx  
      - ./sourceserver/imgs:/imgs  
  
  edgenode:  
    image: nginx:latest  
    container_name: edgenode  
    hostname: edgenode  
    ports:  
      - '80:80'  
    volumes:  
      - ./edgenode/nginx.conf:/etc/nginx/nginx.conf  
      - ./edgenode/logs:/var/log/nginx  
      - ./edgenode/cache:/cache
源站服务器的nginx配置
  
worker_processes  1;  
error_log   /var/log/nginx/error.log;  
events {  
    worker_connections  1024;  
}  
http {  
    default_type  application/octet-stream;  
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '  
                      '$status $body_bytes_sent "$http_referer" '  
                      '"$http_user_agent" "$http_x_forwarded_for"';  
    # 静态资源配置  
    server {  
        listen       80;  
        access_log  /var/log/nginx/access.log  main ;  
        location /static {  
            alias   /imgs;  
        }  
    }  
}
边缘节点的nginx配置

在server模块里,我们配置 proxy_pass 转发路径时,直接用源服务器的容器名代替了ip,http://sourceserver。当本地没有缓存时,就会通过http://sourceserver 访问源站服务器。

📢📢注意下,在真实环境里,边缘节点的源站服务器名和加速域名肯定不是写死的,是用户配置在cdn服务商的数据库里,然后边缘节点再从服务器里读取的。

并且边缘节点要求只有用户的加速域名才能访问,所以在转发请求前还要判断下域名是不是用户的加速域名。

worker_processes  1;  
error_log   /var/log/nginx/error.log;  
events {  
    worker_connections  1024;  
}  
http {  
    log_format  main  '$host- $remote_addr - $remote_user [$time_local] "$request" '  
                      '$status $body_bytes_sent "$http_referer" '  
                      '"$http_user_agent" "$http_x_forwarded_for"';  
      proxy_cache_path  /cache levels=1:2 keys_zone=lanpangzi-cache:20m max_size=50g inactive=168h;  
      proxy_cache lanpangzi-cache;  
      proxy_cache_valid 168h;  
  server {  
      root /static;  
      listen       80;  
      location ~* \.(css|js|png|jpg|jpeg|gif|gz|svg|mp4|ogg|ogv|webm|htc|xml|woff)$ {  
        if ($host != 'web.cdn.test')  {  
             return 403;  
           }  
      access_log  /var/log/nginx/access.log  main;  
      proxy_pass http://sourceserver;  
    }  
  }  
}

这样就快速搭建好了源服务器和边缘节点,我们到时候直接用docker-compose up命令便可以启动容器,边缘节点监听了本地80端口。

搭建cdn的域名调度系统

最后,我们来搭建下cdn的域名调度系统,防止遗忘,我们再来串联下配置cdn的过程,用户拥有自己的加速域名和源站服务器,并且将这两个告诉了cdn服务商,cdn服务商就产生一个新域名,这个新域名需要配置为cname记录,与用户的加速域名关联起来,这条cname记录作我们在搭建dnsmasq时已经写死在了配置文件里。

cname=web.cdn.test,web.cdn.test.c.lanpangzi

📢📢注意,现实中,cdn服务商新生成的域名需要用户自己去其dns服务商那里去进行配置

同时,cdn服务商生成的新域名解析因为配置的ns记录,已经将新的这个域名解析指向了自己的dns域名调度系统,到时候通过这个系统便可以返回给用户最近的边缘节点的ip。

这条ns记录我们也写死在了dnsmasq的配置文件里。

server=/c.lanpangzi/127.0.0.1#1053

到时候我们本地会在1053端口启动一个进程用于对c.lanpangzi域名进行解析。

接着来思考🤔下如何写一个域名调度系统,我们的服务通信需要遵循dns协议,由于我们的边缘节点是部署到本地,ip是127.0.0.1,所以当解析到请求时要询问web.cdn.test.c.lanpangzi这个域名时,直接返回本地这个ip即可。 那对于其他域名如何处理,当然是直接丢掉,因为cdn的域名调度系统,只提供对自己cdn服务商生成的域名进行解析。

用golang简单实现代码如下:

这里我直接在代码里将cname域名以及边缘节点的ip写死在代码里了(重在模拟cdn请求过程),只要是web.cdn.test.c.lanpangzi.这个域名就返回边缘节点ip,由于我们都是部署到本地,所以边缘节点ip就是127.0.0.1了,dns的解析用了现成的golang库。

import (  
   "github.com/miekg/dns"  
   "log"   "net")  
  
var cdnConfig = map[string]string{  
   "web.cdn.test.c.lanpangzi.": "127.0.0.1",  
}  
  
// 处理到来的请求  
func handler(writer dns.ResponseWriter, req *dns.Msg) {  
   var resp dns.Msg  
   resp.SetReply(req) // 创建应答  
   for _, question := range req.Question {  
      ip := cdnConfig[question.Name]  
      if len(ip) == 0 {  
         return  
      }  
      recordA := dns.A{  
         Hdr: dns.RR_Header{  
            Name:   question.Name,  
            Rrtype: dns.TypeA,  
            Class:  dns.ClassINET,  
            Ttl:    100,  
         },  
         A: net.ParseIP(ip).To4(), // 全部解析为127.0.0.1  
      }  
      resp.Answer = append(resp.Answer, &recordA) // 写入应答  
   }  
   err := writer.WriteMsg(&resp) // 回写信息  
   if err != nil {  
      return  
   }  
}  
  
func main() {  
   dns.HandleFunc(".", handler)                   // 绑定函数  
   err := dns.ListenAndServe(":1053", "udp", nil) // 启动  
   if err != nil {  
      log.Println(err)  
   }  
}

测试

接着,我们就可以测试下现在搭建的这个cdn系统了,虽然我们将很多配置信息都写死在了代码里,但你可以假装他们是自动配置上的🐶。

来看下现在的代码框架.

Pasted image 20230616164830.png

cnddns就是模拟的cdn调度中心了,edgenode和sourceserver放的都是nginx的配置文件,docker-compose.yaml到时候会启动他们。

启动源站服务器,边缘节点
(base) ➜  cdndemo git:(master)docker-compose up 
Starting edgenode      ... done
Starting source-server ... done
Attaching to edgenode, source-server
source-server   | /docker-entrypoint.sh: /docker-entrypoint.d/ is not empty, will attempt to perform configuration
source-server   | /docker-entrypoint.sh: Looking for shell scripts in /docker-entrypoint.d/
source-server   | /docker-entrypoint.sh: Launching /docker-entrypoint.d/10-listen-on-ipv6-by-default.sh

启动cdn调度中心
(base) ➜  cdndemo git:(master)cd cdndns            
(base) ➜  cdndns git:(master) ✗ go run main.go  
测试访问

我们已经把本地机器的dns服务器改为dnsmasq了,接着就是最后测试下访问是否生效。

我在浏览器连续进行了两次访问

http://web.cdn.test/static/1781686486866_.pic.jpg

接着查看下nginx的access.log

边缘节点的日志

web.cdn.test- 172.22.0.1 - - [16/Jun/2023:08:53:12 +0000] "GET /static/1781686486866_.pic.jpg HTTP/1.1" 304 0 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36" "-"  
web.cdn.test- 172.22.0.1 - - [16/Jun/2023:08:53:31 +0000] "GET /static/1781686486866_.pic.jpg HTTP/1.1" 304 0 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36" "-"

源站服务器日志

sourceserver- 172.22.0.3 - - [16/Jun/2023:08:53:12 +0000] "GET /static/1781686486866_.pic.jpg HTTP/1.0" 200 265084 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36" "-"

可以看见当第二次访问的时候,源站服务器上没有日志了,边缘节点仍然有访问日志,说明第二次访问已经直接从边缘节点读取到了图片信息。

还是强烈建议把源码下下来亲自实验一遍,你会更加深刻👍🏻。

如何搭建自己CDN服务器(LuManager)
09-15
主要介绍了如何搭建自己CDN服务器(LuManager),需要的朋友可以参考下
webpack4-cdn-plugin:上传 webpack 资源到 cdn,允许重命名散列资源
05-31
webpack4-cdn-插件 将您的 webpack 生成的资产上传到 CDN,允许重命名/重新哈希。 要求和重要说明 Node 8+ (支持async/await )是必需的推荐。 此插件尚未在Windows平台上进行测试。 此插件仅支持webpack@4 。 Webpack配置 process.env.NODE_ENV OR options.mode :此插件仅适用于生产模式。 output.publicPath :我们只支持/或空字符串(为简单起见)。 optimization.minimize : 如果您的 CDN 提供商可以进行压缩工作,则首选false 。 安装 npm install -D webpack4-cdn-plugin # or yarn add --dev webpack4-cdn-plugin 演示 用法 const WebpackCDNPlug
5G技术CDN技术--试题大全
06-04
5G技术CDN技术--试题大全
Bootstrap CDN和本地化环境搭建
09-01
主要介绍了Bootstrap CDN和本地化环境搭建的方法,非常不错具有参考借鉴价值,感兴趣的朋友跟着小编一起学习吧
傻瓜式自建CDN教程
skyhhjmk的博客
10-05 3658
注意:在Linux下,粘贴的快捷键是Ctrl+Shift+V,而通过雨云控制台连接服务器时,复制需要使用鼠标选择要复制的内容,随后点击右键,选择复制(但实际上,Linux下复制的快捷键是Ctrl+Shift+C,这个快捷键与浏览器的快捷键冲突了)如果如图输出了版本号即为安装成功 之后我们来安装MySQL,此命令可以更改MYSQL_ROOT_PASSWORD=rainyunyyds123中等号后的部分,这里是你MySQL Root用户的连接密码。如果购买时没有注意系统选择,可以将服务器关机后更换系统。
node实现前端静态资源的cdn自动化
前端劝退工程师
02-09 1万+
【代码】node实现前端静态资源的cdn自动化。
【七牛云CDN详细部署搭建教程】CDN配置wordpress网站加速子比主题
小哲代码的博客
12-17 1287
CDN代表内容分发网络(Content Delivery Network)。它是一种用于提高网站性能和用户体验的网络架构。CDN的主要目标是通过将内容分发到全球各地的多个服务器节点,使用户能够从离他们更近的服务器获取所需的内容,
使用CDN网络访问过程
weixin_34101784的博客
11-03 179
CDN是指内容分发网络,在网络各处架设节点服务器,当用户访问时,CDN系统会根据网络流量、到用户的距离等因素将请求导向离用户最近的节点上。 访问过程是: 1、用户向浏览器提供要访问的域名。 2、浏览器调用域名解析库对域名进行解析,得到最近的缓存服务器IP 3、向缓存服务器发送请求 4、缓存服务器接到请求向实际IP发送请求 5、获取到内容之后一方面在本地进行保存,另一方面将内容返回给用...
你可知道CDN隐藏源站的好处
WilliamCZH7的博客
02-16 137
这里有一个关键点,一旦接入了高防CDN,千万不要泄露源服务器IP地址,否则攻击者可以绕过CDN直接攻击源服务器CDN隐藏源站真实IP的好处,可以抵御600G以上流量攻击,无视任何CC、syn等攻击,加快网站访问速度,解决网站并发量,从根本上解决问题。CDN隐藏源站真实IP的好处,可以抵御600G以上流量攻击,无视任何CC、syn等攻击,加快网站访问速度,解决网站并发量,从根本上解决问题。CDN隐藏源站是CDN的众多好处之一,CDN本身就可以分散节点,稳定访问,隐藏源站能更安全的加强网站的防护。
gulp-cdn-absolute-path:gulp插件,用于使用CDN绝对路径替换本地路径
05-05
gulp-cdn-绝对路径gulp插件,用于使用CDN绝对路径替换本地路径安装npm install --save-dev gulp-cdn-absolute-path例子var gulp = require ( 'gulp' ) ;var cdnAbsolutePath = require ( 'gulp-cdn-absolute-path' )...
CDN请求过程详解
06-14 4328
CDN简介 CDN大家比较熟悉,这里做个简单介绍。 CDN主要是让用户访问资源的时候,能从离用户距离很近的CDN节点进行获取,不必到真正提供服务的机器上获取。所以CDN可以 让用户更快的获取所需要的内容 减少骨干网络的流量 减少服务器的压力 CDN经历了三个阶段 第一阶段 1995年,互联网发明者Tim,创建了第一家CDN服务公司Akamai 第二阶段 1999~2001,互联网发展高潮期,CDN快速发展 第三阶段 2001年互联网破灭,CDN公司大量倒闭,Tim的公司也倒闭了。2002年开始,宽带提升
前端模拟数据(mock数据)的方法一:访问该项目的静态资源目录
weixin_42349568的博客
12-15 1050
摘要: 1,项目的git地址:https://gitee.com/ling-xu/my-mock 2,说明:实际上就是访问该项目中的静态资源 这种办法,是把自己的电脑作为一个服务器,地址是你的项目的地址,也就是:http://localhost:8081/ 这个地址就是你vue项目跑起来之后,所在的ip地址: 执行:npm run serve 就是这个地址. 基于这样的原理,就可以本地创建一些数据文件,然后通过axios来发起请求,获取这些数据。(也就是模拟数据) 这种方法需要自己写数据,适合用在数据
模拟动态加载网页数据Selenium,Puppeteer,WebDriver,Requests-HTML
最新发布
shixuegen的专栏
04-14 858
它支持多种功能,如生成PDF、截图等,同时也能很好地模拟动态加载网页数据。Selenium:Selenium是一个用于Web应用程序测试的工具,它可以模拟用户在浏览器上的操作,包括点击、滚动、填写表单等。Selenium支持多种浏览器,并且提供了多种编程语言的接口,包括Python、Java、C#等。WebDriver:WebDriver也是一种Web自动化工具,可以模拟浏览器的行为,实现对Web页面的自动化操作。它提供了丰富的API,用于实现页面的导航、元素的定位、表单的填充等功能。
java中模拟浏览器访问网页(三)
热门推荐
whming
05-21 2万+
主要讲了怎么利用HttpUrlConnection去模拟浏览器访问网页,并且在访问一个网页之前一些必要的数据准备,和对网页服务器返回的响应进行解析,并作出相应的动作。最后附上一个对csdm博客进行模拟访问的demo
[Jsoup] 模拟浏览器:post方式模拟登陆获取网页数据(二)
我在山城重庆,我希望能为这片软件沙漠地带贡献自己的一滴水,Stay tuned!
06-22 1万+
从一个URL获取Document对象的其他姊妹章: 模拟浏览器:get方式简单获取网页数据(一) 模拟浏览器:post方式模拟登陆获取网页数据(二) 模拟浏览器:Jsoup工具类的使用及失败重试的retry策略(三) 本篇文章是利用Jsoup模拟登陆GitHub。这里仅限交流学习用,如利用代码进行恶意攻击他网站,和作者无关 ^ ^! 开始前准备: Stept 1): 安装一个火狐/go...
自己动手搭建CDN服务器
mmz8的专栏
03-24 7132
今天来介绍一下这几天我自己写的一个一键脚本。使用该一键脚本,您可以在自己的VPS上一键安装部署CDN, 方便地为您的网站提速。 Github项目地址:https://github.com/Har-Kuun/OneClickCDN欢迎大家加星星加叉叉 1, 系统环境要求 目前支持Ubuntu 20.04 LTS, Debian 10, CentOS 7/8操作系统。 CDN服务器正常运行时仅需要系统有500MB的内存。但是,程序第一次编译安装的时候需要1500MB左右的内存。若您的VP...
企业一之cdn搭建
m0_37387597的博客
04-25 1193
打开2台虚拟机一、varnish基础搭建在vm1上vim /etc/security/limits.conf 修改本地最大文件数 vim /etc/sysconfig/varnish 修改varnish最大文件数,监听端口 NFILES=65535 最大文件数 VARNISH_LISTEN_PORT=80 监听 vim /etc/varnish/defa
CDN的基本原理和基础架构
weixin_34380296的博客
06-15 841
CDN基本原理最简单的CDN网络由一个DNS服务器和几台缓存服务器组成: ①当用户点击网站页面上的内容URL,经过本地DNS系统解析,DNS系统会最终将域名的解析权交给CNAME指向的CDN专用DNS服务器。 ②CDN的DNS服务器CDN的全局负载均衡设备IP地址返回用户。 ③用户向CDN的全局负载均衡设备发起内容URL访问请求。 ④CDN全局负载均衡...
如何在页面使用<script>标签引用CDN搭建Vue开发环境
05-26
要在页面中使用 Vue.js,您需要在HTML文件中引用Vue.js的JavaScript文件。CDN是一种快速而方便的方法来获取Vue.js JavaScript文件。 以下是在页面中使用CDN搭建Vue开发环境的步骤: 1. 打开Vue.js官方网站https://cn.vuejs.org/v2/guide/installation.html,找到“CDN”一节,并复制最新版本的Vue.js的CDN链接。 2. 在您的HTML文件中,使用以下代码行引用Vue.js: ```html <script src="https://cdn.jsdelivr.net/npm/vue"></script> ``` 3. 现在您已经成功引用了Vue.js的JavaScript文件,可以开始在页面中使用Vue.js了。 需要注意的是,引用Vue.js的JavaScript文件时,建议将其放在HTML文件的底部,以确保在渲染之前先加载所有JavaScript文件。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
写文章

热门文章

  • 抓包分析RST报文 3786
  • prometheus Histogram 统计原理 2414
  • 万字长文讲解Golang pprof 的使用 2232
  • 花了100块大洋搞懂 ipv6的用户如何访问ipv4 服务器 1577
  • 【Elasticsearch系列】不幸中的万幸 —— 一次elasticsearch 查询瞬间超时案例分析 1250

分类专栏

  • 自动化运维 9篇
  • 【实战】500行代码手写Docker 5篇
  • 【实战】我的服务监控实践 9篇
  • 可观测系列 6篇
  • 数据搜索专题 10篇
  • MYSQL 10篇
  • 性能优化技巧 9篇
  • Golang 11篇
  • Elasticsearch系列 8篇
  • 算法与数据结构 5篇
  • 服务监控实践案例分析 6篇
  • 容器系列 7篇
  • 实操各种网络demo 14篇

最新评论

  • 如何避免MYSQL主从延迟带来的读写问题?

    普通网友: 支持一下!我也写了一篇获取【大厂面试真题解析、核心开发学习笔记、最新全套讲解视频、实战项目源码讲义、学习路线简历模板】的文章

  • golang sync.Map之如何设计一个并发安全的读写分离结构?

    CSDN-Ada助手: 恭喜你这篇博客进入【CSDN每天值得看】榜单,全部的排名请看 https://bbs.csdn.net/topics/618258092。

  • 【可观测性系列】 OpenTelemetry Collector的部署模式分析

    xunzhaoxusanduo: 里面的架构图是用什么工具画的呀

  • 万字长文讲解Golang pprof 的使用

    CSDN-Ada助手: 恭喜你这篇博客进入【CSDN每天值得看】榜单,全部的排名请看 https://bbs.csdn.net/topics/618183501。

  • 【可观测系列】上个厕所的时间了解链路追踪基本概念

    CSDN-Ada助手: Java 技能树或许可以帮到你:https://edu.csdn.net/skill/java?utm_source=AI_act_java

大家在看

  • 为什么代理IP很难做到100%可用性?
  • C语言String结构体,模仿Java的String类(四)
  • File、IO流
  • 当当网近4年图书畅销榜单分析(看看你喜欢的书籍/作者是否在里面) 245
  • 代理IP如何选?为什么很难有100%可用性?

最新文章

  • 开启 Keep-Alive 可能会导致http 请求偶发失败
  • 一文搞定防盗链设计
  • https安全性 带给im 消息加密的启发
2024年20篇
2023年73篇

目录

目录

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

蓝胖子的编程梦

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或 充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值

深圳SEO优化公司周口网站制作设计衡水至尊标王包头优化公司淮安网站定制推荐抚州网站制作设计报价长春关键词排名衡阳如何制作网站报价资阳网站优化软件多少钱湖州企业网站建设多少钱成都优化价格九江品牌网站设计郑州百度网站优化排名价格张家口网站定制报价和田网站排名优化价格石岩阿里店铺托管公司吴忠网站优化推广价格张掖网站制作设计推荐漳州网络广告推广多少钱宣城网络广告推广价格扬州关键词按天收费公司丽水模板制作淮安模板制作价格肇庆阿里店铺托管多少钱鞍山推广网站推荐周口模板制作哪家好深圳建网站公司大庆网站改版公司本溪英文网站建设推荐绥化百度seo报价常德网站设计模板多少钱歼20紧急升空逼退外机英媒称团队夜以继日筹划王妃复出草木蔓发 春山在望成都发生巨响 当地回应60岁老人炒菠菜未焯水致肾病恶化男子涉嫌走私被判11年却一天牢没坐劳斯莱斯右转逼停直行车网传落水者说“没让你救”系谣言广东通报13岁男孩性侵女童不予立案贵州小伙回应在美国卖三蹦子火了淀粉肠小王子日销售额涨超10倍有个姐真把千机伞做出来了近3万元金手镯仅含足金十克呼北高速交通事故已致14人死亡杨洋拄拐现身医院国产伟哥去年销售近13亿男子给前妻转账 现任妻子起诉要回新基金只募集到26元还是员工自购男孩疑遭霸凌 家长讨说法被踢出群充个话费竟沦为间接洗钱工具新的一天从800个哈欠开始单亲妈妈陷入热恋 14岁儿子报警#春分立蛋大挑战#中国投资客涌入日本东京买房两大学生合买彩票中奖一人不认账新加坡主帅:唯一目标击败中国队月嫂回应掌掴婴儿是在赶虫子19岁小伙救下5人后溺亡 多方发声清明节放假3天调休1天张家界的山上“长”满了韩国人?开封王婆为何火了主播靠辱骂母亲走红被批捕封号代拍被何赛飞拿着魔杖追着打阿根廷将发行1万与2万面值的纸币库克现身上海为江西彩礼“减负”的“试婚人”因自嘲式简历走红的教授更新简介殡仪馆花卉高于市场价3倍还重复用网友称在豆瓣酱里吃出老鼠头315晚会后胖东来又人满为患了网友建议重庆地铁不准乘客携带菜筐特朗普谈“凯特王妃P图照”罗斯否认插足凯特王妃婚姻青海通报栏杆断裂小学生跌落住进ICU恒大被罚41.75亿到底怎么缴湖南一县政协主席疑涉刑案被控制茶百道就改标签日期致歉王树国3次鞠躬告别西交大师生张立群任西安交通大学校长杨倩无缘巴黎奥运

深圳SEO优化公司 XML地图 TXT地图 虚拟主机 SEO 网站制作 网站优化