前端本地搭建服务环境并代理远程服务

目录

首先安装一个phpstudy小皮面板，之前不支持mac系统，目前phpstudy官网已发布支持mac的版本

部署一个本地Web服务

代理转发本地请求到远程服务

---

首先安装一个phpstudy小皮面板，之前不支持mac系统，目前phpstudy官网已发布支持mac的版本

记录本篇博客的原因，是开发中遇到的一种场景：https://blink.csdn.net/details/1202082

 前言：本篇以win7系统为内容介绍，附上phpstudy官网地址

phpstudy官网

下载过后，本地直接安装，注意磁盘安装路径，最好本地有一个独立存放软件的磁盘，方便查找,下载后启动应该是下面这样的

一键启动那里可以手动切换本地开启的服务模式，这里我采用的WNMP（windows+nginx+mysql+php），默认的应该是WAMP（windows+appach+mysql+php）

采用nginx的原因是做服务代理，这里后面再讲。

这里我将介绍如何把一个目前前端常用框架打包后的文件夹放入phpstudy中运行（~也就是npm run build后的文件夹）

部署一个本地Web服务

创建本地web服务前需要在首页中将服务开启，检查是否开启成功也很简单，网站右侧表格中有一条默认数据，点击管理按钮，然后选择打开网站，如果浏览器自动打开如下页面，代表你服务开启成功

,好了，回到phpstudy软件面板中点击创建网站，打开如下窗口

这里你只用关注三个表单项就行，基本配置后面的tab项不用关心，填写三个表单项（域名，端口，根目录），这里建议你先选择根目录浏览目标文件夹（也就是你打包后的文件夹），

将其放入phpstudy安装文件的www目录下，然后选择该文件夹即可（如果不知道怎么找到该文件夹也可以在第一条记录下点击管理按钮选择打开根目录即可。）

，

端口号不要重复，取一个9999都可以，选择目标文件后，开始填写域名，这里随意命名xx.com,域名填写完毕后，还没有ok，你会发现点击打开网站不成功，那是因为你没有给你的域名配置到本地hosts文件中,

按图中步骤来

因为点击hosts选项无法选中，而是打开文件，所以这里我用箭头标注，打开后模仿hosts文件中内容，添加一条记录保存即可

127.0.0.1 xx.com

（xx.com是你刚刚网站中定义的域名）

然后网站项中点击管理按钮打开网站即可。这样一个简单的前端本地web服务环境搭建也就完成了，但是接口服务都是远程线上服务的，如何处理请求跨域呢？

这里回到前言介绍中开启的服务环境模式MNMP，采用nginx代理，因为前端本地开发可以使用webpack-dev-server做配置代理，但是打包后的文件请求路径是采取自定义域名拼接的，所以请求上出现跨域在所难免

代理转发本地请求到远程服务

这里让我们手动配置phpstudy中nginx的配置内容，这里以第一条默认记录打开做示范

按照面板中标注的先后顺序打开nginx配置文件信息，这里我们对第一个loaction做如下改动，你选择之前命名域名与端口拼接的记录即可

location / {
	try_files $uri $uri/ @router;
    index index.php index.html error/index.html;
    error_page 400 /error/400.html;
    error_page 403 /error/403.html;
    error_page 404 /error/404.html;
    error_page 500 /error/500.html;
    error_page 501 /error/501.html;
    error_page 502 /error/502.html;
    error_page 503 /error/503.html;
    error_page 504 /error/504.html;
    error_page 505 /error/505.html;
    error_page 506 /error/506.html;
    error_page 507 /error/507.html;
    error_page 509 /error/509.html;
    error_page 510 /error/510.html;
    include D:/phpstudy_pro/WWW/servant/nginx.htaccess;
    autoindex  off;    
}
location @router {
   rewrite ^.*$ /index.html last;
}
# API代理远程线上服务
location /api/base/ {
   proxy_pass https://www.xxxx.com/api/base/;
}

/api/base/ 是你的服务网关地址，比较修改保存后，回到phpstudy面板首页重启服务，然后在网站中打开你添加的网站记录即可