目前所在团队每次部署测试或者正式环境，都很麻烦（别问为什么麻烦，问了就是爱过....）

这会导致什么问题呢：

• bug修改完成后不能及时响应，那测试就会说bug怎么改的这么慢
• 后端测试不方便，每次连我本地服务，我这代码一保存，他那就同步刷新，方便才怪

so 只能在本地搭一个我想啥时候部署就啥时候部署，我保存了代码别人也不会刷新页面的测试服务。

其实也很简单啦，不过记录下以便后续忘记的时候回顾。

Nginx安装

1. 先去官网下载稳定版本（Stable version）的nginx
2. 解压
3. 在解压后的文件中打开命令行输入start nginx
4. 访问 127.0.0.1:80，页面会显示 Welcome to nginx，说明下载成功并且启动了nginx服务

项目准备

1. build你想部署的项目
2. build后的dist中的文件全部复制到如下nginx的dist文件夹下： 注意：这个红框中的dist文件夹是自己创建的，也可以是别的名字

Nginx配置

打开上图中的conf文件夹下的nginx.conf文件（如下图所示），这里边存放了nginx的配置。（可以使用vscode打开，比较方便）

在server块中配置：

    server {
        listen       9091;//你的测试服务要跑在的端口
        server_name  localhost;

      
        root   dist; // 和你创建的文件名称一致，上上个图中红框部分
        index  index.html index.htm;

        proxy_set_header   Host             $host;
        proxy_set_header   X-Real-IP        $remote_addr;
        proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
       
        location ^~ /api/aaa/ { //请求后端接口的公共路由前缀
                proxy_pass http://12.12.123.123:8080; // 后端服务所在地址
        }

        location /static {
                root  dist;
        }
    }

完成上述配置后，在命令行中执行./nginx.exe -s reload刷新配置

然后访问127.0.0.1:9091

编写脚本

上述虽然满足基本需求，但是每次发布到测试的时候需要两步：

• build 项目
• 将build后的dist文件夹下的文件复制到nginx中创建的dist文件夹下

可以写个脚本将两步合并成一步：在根目录下创建buildTest.bat文件，文件内容如下：

call npm run build // 你的build指令

//复制build后的文件到指定目录下
@ECHO OFF 
Xcopy c:\project\new\dist\aaa c:\ruanjian\nginx\nginx-1.22.0\nginx-1.22.0\dist  /s /e /y 

至此，每次部署的时候只需要在vscode的命令行中执行：.\buildTest.bat就大功告成啦。