原架构:
存在问题:
页面加载慢,图片显示慢
解决方案:
1.使用cdn(cloudfront)加速 elb
2.图片转svg icon
而我这里主要是新增了cdn加速。
cloudfront + elb :
流程:
1.cloudfront新增elb源,设置全部默认。
2.域名cname到cloudfront。
出现问题:
1.访问报错403
解决方案:进入cloudfront,选择对应id,点击常规,设置里点编辑。在cname添加对应域名,点击保存修改。
报错:需要证书。去acm为域名快速注册证书,(需要在域名处添加验证)验证通过后,在自定义ssl处添加新证书,保存修改后通过。(如果此处报错证书与域名不匹配,请仔细检查域名是否输入正确)。
2.访问报错502(可能出现)
进入对应id的cloudfront,点击源,编辑。
关键在于使用http还是https访问,由于nginx没有配证书,所以只能http访问,所以我勾选了http访问。
3.访问出现其它地址(当nginx有多个conf时出现)
关键在于 cloudfront 转发elb时域名Host被擦除,所以nginx无法通过Host转到对应地址。
解决:进图对应id的cloudfront,点击行为,编辑。
在缓存策略下点创建策略,为新策略命名,在标题下勾选包括以下标题,出现标头,在里面必须勾选的是Host,其它根据自己业务需求勾选。查询字符串,cookie也根据需求设置,创建成功后,在缓存策略处应用新建策略,保存修改。
问题解决!
以上只是解决了cdn问题,事实上,网页打开依然慢,图片打开照样慢。。
所以除了缓存,重要的还有压缩
在nginx使用location缓存静态文件外,还要将打开gzip,基本上可以将html,js,css压缩百倍。。
但是真正耗时的还是图片,视频等媒体资源,所以要通过不同的手段,在保证资源可用的情况下尽可能压缩。
通过以上步骤后,网站打开速度提升了一大步
做了这些网站加载还是慢?
由于使用aws节点 所有可以通过节点查看来看看我们走了哪条线路,通过查看发现国内访问大概率命中日本,韩国,新加坡等节点,但是即使命中,受网络影响还是会有1,2s的ttlb。
但是真正坑的是,当使用1080访问后,节点也会切换,这时候如果关闭1080后还是美国节点,这时候会出现10s往上的ttlb
除了加速外,还有运维部署,由于前端项目经常改动,所以自动化部署就尤为重要。以下是踩坑经历。
自动化部署方案选择:
- 使用aws code build; 按次收费
- 自建jenkins:
自建jenkins本来打算使用eks部署,但是看到部署需要大量资源,而且打包也是cpu密集性的任务,不适合放在之前为了大量部署io密集性的服务而选择的node中。所以选择使用ec2单独使用jenkins打包,当然按理来选择codebuild是更为省钱的,但是考虑到codebuild的诸多限制,最后还是选择了ec2上单建jenkins.
jenkins的安装也是十分简单: - 安装jdk环境
- docker(为了上传docker镜像)
- wget jenkins
- yun install jenkins
- service start jenkins
踩坑
这一切一切的开始,仅仅是因为使用了arm的ec2,t3系统到年底之前免费使用。
arm 下 docker 打包出的镜像在x86下的k8s中无法使用。
docker提供了解决方案,下一代docker build ,buildx
(坑1):docker虽然自带了buildx,但是用不了,开启了experimental也用不了
解决方案:
按照该网页教程下载安装即可 https://github.com/docker/buildx
1.download
2.chmod a+x ~/.docker/cli-plugins/docker-buildx(如果没有该路径需要新建)
arm linux 安装jenkins打包时莫名会崩溃
目前怀疑:
- arm jvm的问题
- jenkins设置问题
2021-11-24: 发现打包奔溃原因:node 打包时应该设置--max-old-space-size 单位 MB
之后还是会崩溃,查看jenkins的日志,也没有记录错误信息,之后在观察
2022-04-21:jenkins宿主机内存小是硬伤,2核4g才够用
2022-04-22:rout53 无法根域名访问静态页面
1 根域名只支持A,不支持CNAME
2 aws 与aliyun不一样的是提供一个值别名专门用来解决根域名的转发的问题,值直接别名到cloudFront 问题解决