美文网首页
如何用Apache搭建多个vue项目的测试环境?

如何用Apache搭建多个vue项目的测试环境?

作者: 小懒惰的猪 | 来源:发表于2019-05-15 15:11 被阅读0次

    昨日,经一个项目需求,要求搭建前端测试环境。虽然做了多年前端,但是对搭建环境还是陌生,为此做了些努力,整理一下总结出来。

    公司内用的是apache来做网页发布,测试。


    先来简单捋一下思路。

    1、先来了解一下什么是服务器?

    服务器,也称伺服器,是提供计算服务的设备。由于服务器需要响应服务请求,并进行处理,因此一般来说服务器应具备承担服务并且保障服务的能力。(来自百度百科)

    2、再了解什么是web服务器?

    WEB服务器也称为WWW(WORLD WIDE WEB)服务器,主要功能是提供网上信息浏览服务。Internet上的服务器也称为Web服务器,是一台在Internet上具有独立IP地址的计算机,可以向Internet上的客户机提供WWW、EmailFTP等各种Internet服务。

    Web服务器的工作原理并不复杂,一般可分成如下4个步骤:连接过程、请求过程、应答过程以及关闭连接。

    1、连接过程就是Web服务器和其浏览器之间所建立起来的一种连接。查看连接过程是否实现,用户可以找到和打开socket这个虚拟文件,这个文件的建立意味着连接过程这一步骤已经成功建立。

    2、请求过程就是Web的浏览器运用socket这个文件向其服务器而提出各种请求。

    3、应答过程就是运用HTTP协议把在请求过程中所提出来的请求传输到Web的服务器,进而实施任务处理,然后运用HTTP协议把任务处理的结果传输到Web的浏览器,同时在Web的浏览器上面展示上述所请求之界面。

    4、关闭连接就是当上一个步骤--应答过程完成以后,Web服务器和其浏览器之间断开连接之过程。

    Web服务器上述4个步骤环环相扣、紧密相联,逻辑性比较强,可以支持多个进程、多个线程以及多个进程与多个线程相混合的技术。

    目前最主流的三个Web服务器是Apache、Nginx、IIS。(来自百度百科)

    3、什么是Apache?

    Apache是世界使用排名第一的Web服务器软件。它可以运行在几乎所有广泛使用的计算机平台上,由于其跨平台和安全性被广泛使用,是最流行的Web服务器端软件之一。它快速、可靠并且可通过简单的API扩充,将Perl/Python解释器编译到服务器中。

    如何安装Apache在这里就省略了,请自行搜索百度谷歌。


    自定义本地服务器目录

    首先是前往/private/etc/apache2/extra/目录 修改 httpd-userdir.conf

    解注释 Include /private/etc/apache2/users/*.conf

    前往/private/etc/apache2/users/目录

    添加以你的用户名命名的conf

    文件内容如下:

      <Directory "/Users/dream/Sites/"> // username需要修改

    Options Indexes MultiViews

    AllowOverride All

    Order allow,deny

    Allow from all

    </Directory>

    然后就可以实现浏览器访问localhost/~yourname/这个地址访问/Users/dream/Sites/这个文件夹下的网页文件.

    多站点配置

    httpd_vhost.conf这个文件是用来配置多站点虚拟主机的。多站点虚拟主机是用来配置不同站点解析到不同IP地址,从而达到一台服务器多个网站,一般在工作中用来绑定子域名等.

    首先前往/private/etc/apache2/目录下修改httpd.conf

    解注释Include /private/etc/apache2/extra/httpd-vhosts.conf

    然后前往/private/etc/apache2/extra/目录下打开httpd-vhosts.conf进行配置

    来自筑梦师winston发表的《深入浅出学习前端开发(环境搭建篇)》

    参数说明:

    1.配置域名(服务器名)    ServerName ....com

    2.配置站点实际路径    DocumentRoot "目录"

    3.设置访问权限

    <Directory"路径">Options indexes    order Deny,Allow    Allow From All.</Directory>

    4.配置邮件地址.(可选)    ServerAdmin 设置一个邮件地址,如果服务器有任何问题将发信到这个地址, 这个地址会在服务器产生的某些页面中出现。

    5.ErrorLog.(可选)    错误日志存储地址

    6.CustomLog.(可选)    自定义日志存储地址

    权限说明:

    Options:选项,Indexes用于设定当没有网页显示时,是否列出当前目录

    AllowOverride:允许覆盖的特性,none表示不允许覆盖,All表示可以覆盖。

    Order:表示权限控制顺序,只有两个:

    allow, deny  先允许,后拒绝

    deny, allow  先拒绝,后允许

    Allow from:  允许谁(ip)访问

    deny from :  拒绝谁(ip)访问

    以上内容来自《深入浅出学习前端开发(环境搭建篇)》

    反向代理配置

    1.设置httpd.conf

    打开Apache24/conf文件夹下的httpd.conf设置文件

    找到这几行把前面的注释‘#'删除

    (Ps:很多人都会注释LoadModuleproxy_balancer_modulemodules/mod_proxy_balancer.so,然而这个是做负载均衡用的一个功能,单纯做反向代理的话,不需要用这个,而且取消了这里的注释不进行相应的设置的话,会导致apache服务无法开启)

    然后找到Include conf/extra/httpd-vhosts.conf这一行前面的注释‘#'也删除,引入这个文件

    2.设置httpd-vhosts.conf

    打开Apache24/conf/extra文件夹下的httpd-vhosts.conf找到

    在后面添加

    比如说我想在浏览器中输入localhost,但实际获取的内容是www.baidu.com的话就可以设置为ProxyPass /***(你想要访问的地址) http://*******(想要代理的地址),第二个ProxyPassReverse是做域名重定向使用的,如果你代理的那个地址重定向的跳到另一个地方,有了ProxyPassReverse的设置就可以相应的跳转过去 没有的话可能就会报错

    如果想让别的电脑访问自己电脑的外网地址就可以访问自己服务器可以设置一下httpd.conf中的<Directory "${SRVROOT}/htdocs">

    把 Require all denied改为Require all granted允许所有的请求和访问

    然后就可以使用了~

    以上内容来自《apache实现部署多个网站(一个ip部署多域名)的方法详解》

    更具体的apache使用方法可以查看《apache的基本使用》


    将自己的项目打包好之后,生成的项目包文件放到Apache服务器的约定文件路径里。这样用户在浏览器(客户端)访问http://aaa.com,浏览器将请求发送给服务器,服务器通过解析按照之前约定好的配置访问到对应的web服务器(Apache),Apache服务按照路径找到对应目录下的网页,返回给服务器,然后由服务器运用HTTP协议把任务处理的结果传输给浏览器,浏览器就能呈现出请求的界面。

    相关文章

      网友评论

          本文标题:如何用Apache搭建多个vue项目的测试环境?

          本文链接:https://www.haomeiwen.com/subject/xhjjaqtx.html