前端如何配置服务器

A. 如何配置服务器

在网络存在的环境下，服务器可以提供的服务类型各不相同，所以服务器又分为几种，分别是文件服务器、数据库服务器、应用程序服务器以及web服务器，下面我们就以文件服务器为例来介绍一下服务器的设置方法吧。
服务器的设置方法：

第一步：首先需要登录计算机的操作系统，在登录时需要以管理员的身份进行，进入系统以后，使用鼠标选择开始菜单，然后再选择管理工具选项，进入管理工具选项以后，在列表当中选择相应的服务器，这时会自动弹出一个窗口，然后点击添加选项，然后根据配置向导进行下一步操作。

第二步：进行检测，然后选择自定义配置选项，进入下一步操作。

第三步：选择页面当中的服务器角色按钮，然后选择其中的文件服务器选项，接着使用鼠标点击下一步选项。

第四步：这时就可以将文件服务器的磁盘配额打开了，接着再选择相应的复选框，根据实际要求进行相应的设置，输入最合适的数值。

第五步：将文件服务器的索引服务打开，然后选择是按钮，将索引服务启用，接着使用鼠标点击下一步选项。

第六步：进入下一步页面以后，使用鼠标点击选择总结选项，进入到相应的窗口以后，对完成的设置进行检查，没有差错就进入下一步。

第七步：通过添加向导操作将所选用的服务进行启用操作，然后页面就会出现共享文件夹的向导，完成以上操作以后，点击下一步选项。
第八步：将文件夹的路径打开，然后使用鼠标点击浏览选项，在相应的列表当中，找到公共资源的文件夹，然后点击确定按钮，然后进入下一步操作。

B. web前端项目部署到服务器：

执行成功后会生成dist文件

4.1 进入到nginx配置目录：/usr/local/nginx/conf,对 nginx.conf 文件进行配置

使用include可以配置多个.conf文件，如一个项目一个配置文件。在同目录下创建demo文件夹，并创建demo.conf配置文件

下面使用是以ip地址的方式创建的的配置文件

访问地址：

其中dist名称时可以修改，保持与/usr/local/nginx/html下cp名称一致，否则会访问不到;并且/usr/local/nginx/html目录可存在同一ip下多个web项目。

域名与ip绑定

配置域名demo.conf
eg: 域名 - demo.cn

4.2阿里云配置域名前缀
阿里云->域名->域名列表—>域名 管理-> 域名解析->解析设置

如图：记录值 填写当前服务ip

学习过程中所记录，有问题或者有好的方式欢迎指点。不胜感激 🤗 🤗 🤗

C. 如何配置web服务器

第一步:IIS的安装
A.在控制面板中选择“添加/删除程序”,在出现的对话框中选择“添加/删除Windows组件”。
B.在出现的复选框中选择安装Internet信息服务(IIS),这一组件约需19MB的空间。
C.点击“下一步”,并将Win2000安装光盘放入光驱,安装程序即可将程序文件复制到硬盘中,点击“结束”即可完成。
第二步:IIS中Web服务器的基本配置
IIS中Web服务器的基本配置主要包括如下几部分:
A.打开IIS服务器的配置窗口,选择“开始”→“程序”→“管理工具”→“Internet服务管理器”,或者“选择”→“控制面板”→“管理工具”→“Internet服务管理器”也可,打开的窗口。
B.在打开的窗口中鼠标右击“默认Web站点”,选择“属性”菜单。
C.在出现的“默认Web站点属性”窗口中,选择“主目录”标签,用以设置Web内容在硬盘中的位置,默认目录为“C:\Inetpub\Wwwroot”,你可根据需要自己设置。
D.在属性窗口处选择“文档”标签,设置自己默认的首页网页名称,例如“Myfirstweb.htm”,将其添加并移动到列表的最顶端。
E.确认默认的Web站点是否已经启动,如果没有可以鼠标右键点击“默认Web站点”,选择“启动”,在打开的IE地址栏中键入本机的IP地址,即可看到自己指定的主页已经开始在Internet上发布了。
这里只是介绍IIS最基本的设置选项,大家还可以按照需要去具体设置上面提到的“默认Web站点属性”,通过它来配置IIS的安全和其他一些参数。
IIS虽然好用,但默认安装的情况下,它也有很多的安全漏洞,包括着名的Unicode漏洞和CGI漏洞,因此在IIS安装完成之后,建议继续在微软公司主页上下载安装它们提供的安全漏洞补丁SP1和SP2。此外,建议将磁盘的文件系统转换成NTFS格式,安装系统的分区可在系统安装候转换,也可在安装完系统以后用PQMagic等工具进行转换。

D. nginx前端常用配置

nginx现在几乎是众多大型网站的必用技术，大多数情况下，我们不需要亲自去配置它，但是了解它在应用程序中所担任的角色，以及如何解决这些问题是非常必要的。

下面我将从nginx在企业中的真实应用来解释nginx在应用程序中起到的作用。

为了便于理解，首先先来了解一下一些基础知识， nginx是一个高性能的反向代理服务器 那么什么是反向代理呢？

代理 是在服务器和客户端之间假设的一层服务器， 代理 将接收客户端的请求并将它转发给服务器，然后将服务端的响应转发给客户端。

不管是正向代理还是反向代理，实现的都是上面的功能。

正向代理 是为我们服务的，即为客户端拆逗雀服务的，客户端可以根据正向代理访问到它本身无法访问到的服务器资源。

正向代理 对我们是透明的，对服务端是非透明的，即旅早服务端并不知道自己收到的是来自代理的访问还是来自真实客户端的访问。

反向代理 是为服务端服务的，反向代理可以帮助服务器接收来自客户端的请求，帮助服务器做请求转发，负载均衡等。

反向代理 对服务端是透明的，对我们是非透明的，即我们并不知道自己访问的是代理服务器，而服务器知道反向代理在为他服务。

下面是一个nginx配置文件的基本结构：

下面是 nginx 一些配置中常用的内置全局变量，你可以在配置的任何位置使用它们。

| 变量名 | 功能 | | ------ | ------ | | $host | 请求信息中的 Host ，如果请求中没有 Host 行，则等于设置的服务器名 | | $request_method | 客户端请求类型，如 GET 、 POST | $remote_addr | 客户端的 IP 地址 | | $args | 请求中的参数 | | $content_length | 请求头中的 Content-length 字段 | | $http_user_agent | 客户端agent信息 | | $http_cookie | 客户端cookie信息 | | $remote_addr | 客户端的IP地址 | | $remote_port | 客户端的端口 | | $server_protocol | 请求使用的协议，如 HTTP/1.0 、·HTTP/1.1 | | server_name | 服务器名称| | $server_port`|服务器的端口号|

先追本溯源以下，跨域究竟是怎么回事。

同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。通常不允许不同源间的读操作。

如果两个页面的协议，端口（如果有指定）和域名都相同，则两个页面具有相同的源。

例如：

现在我在 fe.server.com 对 dev.server.com 发起请求一定会出现跨域。

现在我们只需要启动一个nginx服务器，将 server_name 设置为 fe.server.com ,然后设置相应的location以拦截前端需要跨域的请求，最后将请求代理回 dev.server.com 。如下面的配置：

这样可以完美绕过浏览器的同源策略： fe.server.com 访问 nginx 的 fe.server.com 属于同源访问，而 nginx 对服务端转发的请求不会触发浏览器的同源策略。

根据状态码过滤

根据URL名称过滤，精准匹配URL，不匹配的URL全部重定向到主页。

根据请求类型过滤。

GZIP 是规定的三种标指厅准HTTP压缩格式之一。目前绝大多数的网站都在使用 GZIP 传输 HTML 、 CSS 、 JavaScript 等资源文件。

对于文本文件， GZip 的效果非常明显，开启后传输所需流量大约会降至 1/4 ~ 1/3 。

并不是每个浏览器都支持 gzip 的，如何知道客户端是否支持 gzip 呢，请求头中的 Accept-Encoding 来标识对压缩的支持。

启用 gzip 同时需要客户端和服务端的支持，如果客户端支持 gzip 的解析，那么只要服务端能够返回 gzip 的文件就可以启用 gzip 了,我们可以通过 nginx 的配置来让服务端支持 gzip 。下面的 respone 中 content-encoding:gzip ，指服务端开启了 gzip 的压缩方式。

这里为什么默认版本不是 1.0 呢？

HTTP 运行在 TCP 连接之上，自然也有着跟 TCP 一样的三次握手、慢启动等特性。

启用持久连接情况下，服务器发出响应后让 TCP 连接继续打开着。同一对客户/服务器之间的后续请求和响应可以通过这个连接发送。

为了尽可能的提高 HTTP 性能，使用持久连接就显得尤为重要了。

HTTP/1.1 默认支持 TCP 持久连接， HTTP/1.0 也可以通过显式指定 Connection: keep-alive 来启用持久连接。对于 TCP 持久连接上的 HTTP 报文，客户端需要一种机制来准确判断结束位置，而在 HTTP/1.0 中，这种机制只有 Content-Length 。而在 HTTP/1.1 中新增的 Transfer-Encoding: chunked 所对应的分块传输机制可以完美解决这类问题。

nginx 同样有着配置 chunked的 属性 chunked_transfer_encoding ，这个属性是默认开启的。

Nginx 在启用了 GZip 的情况下，不会等文件 GZip 完成再返回响应，而是边压缩边响应，这样可以显着提高 TTFB ( Time To First Byte ，首字节时间，WEB 性能优化重要指标)。这样唯一的问题是， Nginx 开始返回响应时，它无法知道将要传输的文件最终有多大，也就是无法给出 Content-Length 这个响应头部。

所以，在 HTTP1.0 中如果利用 Nginx 启用了 GZip ，是无法获得 Content-Length 的，这导致HTTP1.0中开启持久链接和使用 GZip 只能二选一，所以在这里 gzip_http_version 默认设置为 1.1 。

如上面的图，前面是众多的服务窗口，下面有很多用户需要服务，我们需要一个工具或策略来帮助我们将如此多的用户分配到每个窗口，来达到资源的充分利用以及更少的排队时间。

把前面的服务窗口想象成我们的后端服务器，而后面终端的人则是无数个客户端正在发起请求。负载均衡就是用来帮助我们将众多的客户端请求合理的分配到各个服务器，以达到服务端资源的充分利用和更少的请求时间。

Upstream指定后端服务器地址列表

在server中拦截响应请求，并将请求转发到Upstream中配置的服务器列表。

上面的配置只是指定了nginx需要转发的服务端列表，并没有指定分配策略。

轮询策略

默认情况下采用的策略，将所有客户端请求轮询分配给服务端。这种策略是可以正常工作的，但是如果其中某一台服务器压力太大，出现延迟，会影响所有分配在这台服务器下的用户。

最小连接数策略

将请求优先分配给压力较小的服务器，它可以平衡每个队列的长度，并避免向压力大的服务器添加更多的请求。

最快响应时间策略

依赖于NGINX Plus，优先分配给响应时间最短的服务器。

客户端ip绑定

来自同一个ip的请求永远只分配一台服务器，有效解决了动态网页存在的session共享问题。

匹配以 png|gif|jpg|jpeg 为结尾的请求，并将请求转发到本地路径， root 中指定的路径即nginx本地路径。同时也可以进行一些缓存的设置。

nginx的功能非常强大，还有很多需要探索，上面的一些配置都是公司配置的真实应用（精简过了），如果您有什么意见或者建议，欢迎在下方留言...

E. 如何配置Web服务器；

（1）了解DNS主机名和IP地址。
如果此WEB服务器在Internet上，需向ISP申请和注册此服务器的DNS主机名和IP地址。如果此服务器只在企业网内使用，则在内部的DNS服务器上注册。
（2）打开服务器文档，选择"端口"-"Internet端口"，启用"TCP/ IP端口"。
（3）选择"Internet协议"，完成以下选项后，保存文档。

"绑定主机名"：
A、选择"是"则您可在"主机名"项中输入主机别名，WEB用户可用此别名替代Domino服务器名访问WEB服务器。
B、选择"否"（缺省）则不允许使用别名。

"DNS查询"：
选择"是"则Domino服务器查询发送请求的WEB客户机的DNS名。
Domino日志文件和数据库将包含WEB客户机的DNS主机名。
选择"否"（缺省）则不查询，Domino日志文件和数据库将只包含WEB客户机的IP地址。

注意：

选择"否"将提高Domino服务器性能，因为服务器不使用资源执行DNS查询。
"允许HTTP客户浏览数据库"：选择"是"则允许WEB用户在URL中使用OpenServer命令来显示服务器上数据库列表。

选择"否"（缺省）则不允许。但即使WEB用户不能看到服务器上数据库列表，他们仍能打开有权限访问的单个数据库。

（4）启动HTTP任务。在服务器控制台上，输入：loap http

F. 前端vue与后端Thinkphp在服务器的部署

vue在服务端部署时，我们都知道通过npm run build 指令打包好的dist文件，通过http指定是可以直接浏览的，Thinkphp通过域名指向index.php文件才可以浏览。要使前端正常调用后端数据，有两种方法：1、前端跨域调用后端数据，2、前端打包文件部署在后端的服务器文件夹下（同域）。

web服务器： apache

一、跨域

在服务器配置站点：

在路径/home/www/  下创建test项目文件夹，用来放项目文件。  

找到httpd-vhosts.conf文件配置站点  

前端站点：  

    ServerName test.test.com  

    DocumentRoot "/home/www/test/dist"    

    DirectoryIndex index.html  

后端站点：  

    ServerName test.testphp.com  

    DocumentRoot "/home/www/test/php"    

    DirectoryIndex index.php  

将前端打包好的dist文件放在/home/www/test/ 文件夹下，运行http://test.test.com可浏览，当路径改变时，刷新会出现404错误。此时dist文件下创建一个.htaccess文件，当路径不存在时，路径指向http://test.test.com/index.html能解决此问题。

  RewriteEngine On  

  RewriteBase /  

  RewriteRule ^index\.html$ - [L]  

  RewriteCond %{REQUEST_FILENAME} !-f  

  RewriteCond %{REQUEST_FILENAME} !-d  

  RewriteRule . /index.html [L]  

在/home/www/test文件夹下创建项目根目录php文件夹，将thinkphp文件放在php下。TP5的入口文件在public文件下，在这将public下的入口文件index.php挪到php文件夹下（个人习惯将入口文件放在项目根目录）, 后端绑定Index模块。

前端调用后端接口，存在跨域，跨域解决方法有好几种，在这我将在后端php做配置，解决跨域问题，在公用控制器设置跨域配置：

class Common extends Controller  

{  

    public $param;  

    // 设置跨域访问  

    public function _initialize()  

    {  

        parent::_initialize();  

        isset($_SERVER['HTTP_ORIGIN']) ? header('Access-Control-Allow-Origin: '.$_SERVER['HTTP_ORIGIN']) : '';  

        header('Access-Control-Allow-Credentials: true');  

        header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS');  

        header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, authKey, sessionId");  

$param =  Request::instance()->param();  

$this->param = $param;  

    }  

}  

前端调用登录接口： this.axios.post('http://test.testphp.com/index.php/base/login', {user: '', password: ''})。

(可在webpack.base.conf.js文件下可定义接口：http://test.testphp.com/index.php/)

二、同域

后端配置同上，公共配置器中的header配置注释。将前端的dist文件下的所有文件（包含.htaccess），放在php文件夹下。将后端index控制器的index方法的路径重定向php下的index.html文件：

namespace app\index\controller;  

use think\Controller;  

class Index extends Controller  

{  

    public function index() {  

$this->redirect('/index.html');  

    }  

}  

前端调用登录接口： this.axios.post('/index.php/base/login', {user: '', password: ''})

转自：https://blog.csdn.net/qq_35465132/article/details/78986675