纯前端对服务器的概念

1. 纯前端的服务器概念

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

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

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

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

本地服务器：

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

远程服务器：

web服务器：安装到云服务器上的node/nginx；
非web服务器：云服务器

2. 纯前端的部署项目概念

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

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

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

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

3. 远程web服务器的部署（以 nginx 为例）

（1）购买云服务器与 远程登陆

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

注释：这里，注意自己选择的操作系统是 windows 还是 Linux！  

windows系统的登陆账号默认为 Administrator，密码是云服务器的密码； 
Linux系统的登陆账号默认为 root，密码是云服务器的密码；

购买完之后，重置下密码，然后进行登陆，登陆之后就可以在本地 ping 公网IP了（windows系统的，登陆了就可以看见一个windows桌面面板）。

注释：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系统（腾讯云服务器为例）

　　(1) 本地下载 Xshell 和 Xftp(或filezilla等文件上传工具），并分别进行安装和配置（用户名与密码），然后运行起来。

　　(2) Xshell 安装 nginx：yum install -y nginx    // 具体的细节详见：https://www.cnblogs.com/wujf-myblog/p/9872099.html

　　注意：/etc/nginx/ 目录下的 nginx.conf.default文件可以直接删除，然后只需要配置 nginx.conf 文件 即可。

　　启动 nginx（执行命令：nginx ）

　　(3) 配置nginx-多个server或端口

　　在http中的server下面再添加一个或多个server，修改 端口、 root 路径、try_files。

　　注释：通过 Xftp 或 filezilla 下载或上传文件到远程服务器，进行更新文件。

　　(4) 腾讯云控制台添加 防火墙规则（这里对配置nginx多个端口很重要！！！）

(5) Xshell 对防火墙的处理（这里对配置nginx多个端口很重要！！！）

 注释：这里主要是查看是否运行、是否含有所需运行的端口，如果没有就需要运行或添加端口，然后重启。

(6) Xshell 重新运行 nginx：nginx -s reload

 注意：nginx命令报错：nginx: [error] invalid PID number in “/run/nginx.pid，解决方法详见：https://blog.csdn.net/Xbinbin/article/details/99542799

(7) 最后，就可以在浏览器访问 “公网IP:端口” 了。

 注意：在 nginx.conf 文件中配置了指定的 server或端口 之后，重新运行nginx（运行正常），然后在浏览器中仍然无法访问，大概是因为上述的 (4) 或 (5) 没有操作到位！

翻译

搜索

复制