前端工程化之服务篇

Guoyeting020
107 阅读6分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第3天，点击查看活动详情

image.png

云服务器

云服务器又称云主机或云计算服务器，简称ECS， 常见云服务器包括但不限于来自阿里云、腾讯云、百度云、华为云等厂商。
关于配置需求：

image.png 准备：
① 有了自己的云服务器后，还需要准备两种工具用于操作服务器：CMD工具(命令行工具)； 一种是FTP工具(文件传输工具)
② 工具部署完成就可以开始连接自己的服务器
例如：打开阿里云官网，选择右上角的控制台 → 左上角的菜单 → 云服务器ECS → 实例

第一修改实例名称，第二重置实例密码。若不重置密码就无法连接云服务器

③ 连接
④ 管理

域名系统

服务器部署完要访问网站，还得有一个域名，需对其解析并备案，才能正常访问网站

01781A68.jpg

DNS如何解析域名？

域名系统简称DNS，对于每级域名长度的限制是63个字符，域名总长度则不能超过253个字符。
当访问网站时，必须经过以下域名解析流程。
1、浏览器缓存——2、系统缓存——3、路由器缓存——4、本地域名服务器——5、根域名服务器——6、顶级域名服务器——7、主域名服务器——8、保存结果到缓存

选购与部署域名系统

域名后缀:.com、.cn和.net是比较多人用，搜索引擎不会轻易打击，但价格会比较高，如果是个人域名，可以选择自己中文缩写或英文名；对了还有一点就是，域名选择好说不定还有潜在价值（卖域名）

选购：例如：打开阿里云官网，选择产品 → 企业服务与云通讯 → 域名与网站 → 域名注册 →进入万网界面，输入想购买的域名
小小建议：若选购的域名较便宜，建议能买多少年就买多少年，因为每次续费域名都会升价！

备案

域名选购完毕还需进入备案流程填写相关资料备案。
例如：打开阿里云官网，点击右上角的ICP备案，进入备案界面后点击开始备案，根据提示填写相关资料就能发起申请流程

站服务器

是什么？

站服务器又称Web服务器或网站服务器，简称WS
站服务器主要功能是向客户端提供文档服务，只要是遵循HTTP设计的网络应用程序都可认为是站服务器。其工作原理分为三个过程，分别是连接过程、请求过程和应答过程。

常见站服务器有Nginx、Apache和Tomcat。

基于Nginx反向代理应用与服务

1、安装 2、操作 3、语法 4、防火墙

实操

（此部分对现阶段我有点难，没理解，暂时不记录）

Nginx在前端工程化中是一个很有分量的工具，其作为站服务器能解决很多请求或代理的网络问题。Nginx还有其他应用场景，如深度压缩、终端适配、图像防盗、路由刷新、请求过滤、文件缓存等

访问加密

我们访问某些网址经常在地址栏看到一个三角叹号！不安全，因为打开是HTTP协议的网址

怎么把自己网站升级为HTTPS协议呢？

要启用HTTPS，必须向一个可信任机构申请一个HTTPS证书

专业的HTTPS证书申请需收费，不过对于个人官网来说，能白嫖何乐不为？？？可以考虑免费好用的HTTPS证书服务商Letsencrypt
1、部署HTTPS证书

Letsencrypt提供一个称为certbot的工具，它可快速生成或刷新HTTPS证书
certbot官网推荐使用snap安装certbot

certbot安装完毕执行certbot --version，输出版本表示安装成功。

执行certbot --nginx扫描Nginx所有配置

HTTPS证书最终生成到/etc/letsencrypt/live/yangzw.vip目录中。打开FTP工具，进入到该目录，以下文件就是通过certbot自动签发的HTTPS证书

Nginx配置文件改动哪些内容?

签发HTTPS证书会自动修改对应Nginx配置文件

执行vim /etc/nginx/conf.d/yangzw.vip.conf，凡是后方有这段注释# managed by Certbot的代码都是由certbot生成

server {
	server_name yangzw.vip www.yangzw.vip;
	location / {
		root /www/client/yangzw;
		index index.html;
	}
	listen 443 ssl; # managed by Certbot
	include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
	ssl_certificate /etc/letsencrypt/live/yangzw.vip/fullchain.pem; # managed by Certbot
	ssl_certificate_key /etc/letsencrypt/live/yangzw.vip/privkey.pem; # managed by Certbot
	ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
}
server {
	if ($host = www.yangzw.vip) {
		return 301 https://$host$request_uri;
	} # managed by Certbot
	if ($host = yangzw.vip) {
		return 301 https://$host$request_uri;
	} # managed by Certbot
	listen 80;
	server_name yangzw.vip www.yangzw.vip;
	return 404; # managed by Certbot
}

① 修改端口
② 导入证书
③ 重定向

打开SslTest或SslChecker，输入域名就可检查证书是否有效。

资源加速

缓存机制

  • 拒绝一切缓存策略：Cache-Control:no-store
  • 资源是否每次向服务器请求：Cache-Control:no-cache
  • 资源是否被代理服务器缓存：Cache-Control:public/private
  • 资源过期时间：Expires:t/Cache-Control:max-age=t,s-maxage=t
  • 协商缓存：Last-Modified/Etag
    强缓存(强制缓存)与协商缓存(对比缓存)

image.png

image.png

缓存策略机制过程：先走强缓存，若命中强缓存，直接使用强缓存；若未命中强缓存，发送请求到服务器检查是否命中协商缓存；若命中协商缓存，服务器返回304通知浏览器使用本地缓存，否则返回最新资源。

☆应用场景

  • 频繁变动的静态资源：设置Cache-Control:no-cache并走协商缓存，每次访问都发送请求到服务器，配合Last-Modified/ETag验证资源的有效性
  • 不常变化的静态资源：设置Cache-Control:max-age=31536000走强缓存，哈希处理文件名称(代码改动后生成带有hash的文件名称)，当html文件引用文件名称发生改变就会下载最新文件

CDN

缓存策略始终只是为了优化资源访问路径提升二次访问速度。对于首次访问速度需从网络层面优化，最常见手段就是内容分发网络加速,简称CDN。

通过CDN访问一张图像需经历以下过程:

  1. 用户请求静态资源URL，经过本地DNS解析，若LDNS命中则直接返回静态资源
  2. 若LDNS未命中则转发授权DNS查询
  3. 返回域名CNAME对应IP地址
  4. 解析域名并发送请求到DNS调度系统，系统为请求分配最佳节点对应IP地址
  5. 返回解析完毕的IP地址
  6. 用户发送请求到缓存服务器
  7. 缓存服务器响应用户请求并将用户所需内容发送到客户端
avatar
文章
阅读
粉丝