Web 工程前后端分离调试

Intellij Nginx Tomcat 足迹

需求

Web工程代码前后端分离，能够在统一IDE中进行开发，使开发人员站在业务线的角度，接触到全流程的技术，而不是仅仅开发前端或后端。相关分析可以查看知乎上的这些文章。

终态

1. 存在前后端两个工程，同时在Intellij中编辑。
2. 通过IDE后端工程可以部署到Tomcat中，可调试。
3. 通过IDE前端工程可以部署到Nginx中，可调试。
4. 在浏览器中可以进行页面访问，且前端能向后端请求数据，并能够实现联调。

技能前置

1. Intellij IDEA
   这个IDE很好用，其官网见这里。
2. Tomcat
   这个不需要多介绍，部署web应用程序总是用到它，其官网见这里。
3. Nginx
   它的核心功能：1.响应静态资源请求，2.实现请求转发（可能还有其他，我暂时没用到）。其官网见这里。

实现步骤

默认开发环境下已经存在：Intellij IDEA、Tomcat、Nginx、JDK、前后端分离的两个工程目录。由于都是解压缩或傻瓜式安装，不赘述。接下来分步达到终态：
1. Intellij中添加Nginx plugin。
注意：Nginx plugin的0.1.0版本需要手动下载，解压缩后从硬盘安装，无法直接在IDE中直接安装。
2. 撰写cmd或shell脚本完成前端项目文件拷贝。使用cmd写的脚本（cp.bat）如下：

rd/s/q %NGINX_HOME%\html
md %NGINX_HOME%\html
xcopy %1 %NGINX_HOME%\html\ /e

简要介绍：NGINX_HOME为环境变量，定义为Nginx的解压缩目录，在我的win系统中是E:\nginx-1.8.0。1.删除该目录下的html文件夹；2.在该目录下创建html文件夹，这是作为发布目录存在的；3.将%1（参数）的文件夹内容拷贝到html下。
目的：这个脚本是实现前端程序发布到Nginx服务器下，给Intellij中的Nginx plugin使用。
3. 修改nginx.conf文件

http {
#......省略......
    server{
#......省略，并找到如下代码......
        location / {
            root    html;
            index   index.html index.htm;
        }
#......随后添加下面代码......
        location ~ \.xhtml$ {
            root    /;
            proxy_pass  http://localhost:8080;
        }
#......几点说明......
#1. nginx.conf最好在Intellij中编辑，有代码提示
#2. 重点注意空格位置：location后、~前后、\.xhtml$前后，尤其注意$与{之间是存在空格的
#3. \.xhtml$是正则表达式，匹配的url是需要按照后续的逻辑转发的。
#4. proxy_pass是将该请求转发的位置，同时也是后端调试时配置的HTTP port
    }
}

以上就是nginx中需要修改的部分。
4. 在前端工程窗口中配置nginx server
吐槽下nginx的作者，是俄罗斯人，intellij的插件也是他写的，这个插件的官方使用说明竟然是俄语版，幸亏有截图。
注意：配置过程为configure->new，弹出框选择nginx目录下的exe文件，再弹出Warning，请选择cancel，之后ok，就配置好了。不再截屏展示配置过程了。
5. 在配置好的nginx server中添加前面写好的脚本
在 Before launch: Activate tool window 下有个➕，点击这个选择 Run External tool，再点击➕，出来一个Create Tool窗口，在Program上选择之前创建的cp.bat，在Parameters中输入前端项目目录（在我的电脑上是E:\zjdemo）。

到此，所有配置就完成了。接下来就是在IDE中调试后端代码（在tomcat容器中调试），然后在前端项目中运行nginx server，就可以在浏览器中查看最终效果了。

在搭建这个调试环境过程中，额外收获：1. 看到一篇分析前端优化的，我想后面很有可能会需要，特记录在此，参考的票最高者；2. 对本文有贡献的，除了官方文档之外，还有这里，它让我清晰认识到Nginx的url转发功能，还有这里，它让我写出了nginx.conf中的那两行配置；3. cmd脚本也是抄来的，这个随处可见就不链接了。