纯前端对服务器的概念

发布时间 2023-12-29 15:42:12作者: 一只两支三指

1. 服务器概念

前端接触的服务器有多种,比如:机房的物理服务器、后端装自己电脑上的虚拟机服务器、华为云或腾讯云上租的云服务器、node或nginx提供本地文件访问的web服务器 等。

 

对于我们前端而言,服务器就分为两类 web服务器 和 非web服务器。

  • web服务器:就是一个软件程序,运行之后,可以让客户端(浏览器)访问 vue/react/angular 打包后的文件。
  • 非web服务器:就是一个系统或空间,可以承载文件、安装软件、运行程序等, 类似一个window系统。

 

注释:它们也分 本地服务器 和 远程服务器,名如其意。

本地服务器:

  • web服务器:node代理服务器、nginx运行后提供的静态资源访问服务器。
  • 非web服务器:虚拟机服务器

远程服务器:

  • web服务器:安装到云服务器上的node/nginx;
  • 非web服务器:云服务器

 

2. 前端部署项目概念

前端项目本地开发完之后,只有部署到远程服务器上,才可以被浏览器的远程地址访问。

而前端部署项目文件,一般是将本地打包文件上传到 远程服务器的指定目录下即可。常用的文件上传工具,如 FTP / FTPX / Filezilla / winSCP 等。

 

注意:这里的把打包文件上传到远程服务器指定的目录中,只是上传了文件而已,并不是完全的部署了。

真正的完全部署需要服务器管理者(通常是后端或运维)将指定的文件夹路径添加到远程web服务器配置中,并运行远程web服务器。(当然这不是纯前端关注的)

 

3. 远程web服务器的部署(以 nginx 为例)

(1)购买云服务器与 远程登陆

从 华为云 或 腾讯云 等平台购买一个云服务器(可以选 个人认证的试用体验1个月),华为云的 购买流程与远程登陆操作 可以参考地址:https://zhuanlan.zhihu.com/p/650903988

 

注释:这里,注意自己选择的操作系统是 windows 还是 Linux!  

  • windows的登陆账号为 Administrator,密码是云服务器的密码; 登陆了就可以看见一个windows桌面面板,这时候你就可以在本地 ping 公网IP了。
  • Linux的登陆账号为 root,密码是云服务器的密码;

注释:xshell主要用于连接Unix或Linux服务器的,详细解释参考:https://baijiahao.baidu.com/s?id=1779901784295230705&wfr=spider&for=pc

 

(2)nginx 部署

a. windows系统

  可以使用 Windows桌面远程连接(详见上门的远程登陆操作),连接之后,将本地的 nginx软件 拷贝到远程系统的硬盘下,然后将之运行即可。(nginx 配置就不讲了)

  (前端项目打包文件拷贝到nginx配置地址,然后重新运行nginx即可)

b. Linux系统

  待续 。。。