部署一个前后端分离的项目----前端代码本地调试（来自一个只了解到node.js的小白的吐槽）

吐槽ing

初来乍到的小白的我表示会js，学了一点node.js，但是我现在还停留在分不清vue.js和node.js的层次上，虽然做了几个前端的页面，但是那都是用纯生js+html+css写的好吧！！！虽然加了一点html5和Jquery的技术

而且，我表示！！后面的关于前端的技术还没学，，~~~没办法啊，，！调试一个项目，没有前端人员的技术支持！！！只能自力更生了！无限百度+视频，终于，初步解决了一个一个纯纯前端的代码，（苦逼的我还要去写后台的代码，还要和前端的url对应上，真是个苦逼的生活，吐槽ing）

ps：从github上找项目，一定要找全套的（这年头的项目好多都是前后端分离的），而且！！！改别人的代码好累！！！~~~~

========================================分割线==============================================

以上是我的吐槽，不吐槽难受，！下面开始简单总结一下我的本地测试。

第一步：安装环境-这里不多解释

1.我现在的是4.x版本的node.js（因为测试过，8.x的不能用webpack打包）

2.全局安装webpack  （-g就是表示全局安装，jdk配置环境变量了解下啊！！）

  npm install -g webpack@^1.15.0

3、全局安装webpack-dev-server

  npm install -g webpack-dev-server@^1.16.5

4.在项根路径执行npm初始化

  npm install  --registry=https://registry.npm.taobao.org

  这里使用淘宝的镜像，就是快！

5.这里就基本ok了，剩下启动项目了

ps：关于node配置这里有很多东西可以写（比如package.json，webpack.conf.js），但是毕竟我不是专业弄前端的，所有就能省则省，如何我时间充裕，再去仔细研究一下它，毕竟我现在只是想项目启动，能更改一些简单的东西就ok了~~~！

不多说，都是眼泪，一个要用4.x的node。否则，嘿嘿，你会发现webpack这个指令用不了，，苦逼的我啊。只能在学习的道路上越走越黑~~~

然后，当webpack打包成功后，会有一个dist文件夹（我感觉就是可以被浏览器识别的东西），这个就是我们下面用nginx需要用到的。

第二步：安装并配置nginx

网上一堆关于nginx的用处，我感觉这里我只用到了反向代理这一块！什么负载均衡，嘿嘿，没用到。（吐槽一下）

安装什么的不多说，我重点说一下配置文件的问题。在这我坑了将近一天的时间！！

首先/conf下有nginx.conf这个是默认的配置文件，如果想要用自己的配置文件，需要在配置文件中加入如下：

include test/*.conf;

这里指的就是在和nginx.conf同级目录中 加入一个test文件夹，当然了，文件夹中可以放你想要的配置文件了。（*代表所有，不多说）。

然后我们继续说一下配置文件中的内容，

server {
        listen       80;
        server_name  localhost;
        location / {
            root html;
            index index.html index.htm;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

这里就说一下server这个标签下的东西，

listen:代表端口号，这里的端口号最好不要和自定义配置中的端口号一样，否则，会有你意想不到的事情发生~~~

server_name：服务器名称，主要用于配置基于名称虚拟主机，为虚拟服务器的识别路径​​​​​​​

location：这可是个好东西，我认为就是拦截了，拦截后面的是类似于正则表达式的东西，比如这个location / 就是拦截所有 带有 “/” 的请求，比如输入localhost：80（和localhost一样，默认localhost就是80端口）就会跳转到nginx默认的欢迎页面

             root：这个就是路径，比如举个列子：我的前端项目打包后的dist文件放到D：/dist下，那么root 后面就写 D:/dist就                           ok了，它会自动去寻找dist中的index.html页面

             index：就是和root一起用，表示可以匹配的文件名称，这里可以是index.html，index.htm，index.php等，

关于location的很多匹配规则百度上有很多，这里我就不多说了，这里推荐一篇帖子nginx location配置详细解释

然后，我按照这个配置写了一个自己的自定义配置

server {
    listen 8088;
    autoindex on;
    server_name zhkj.shop.com;
    #access_log c:/access.lg combined;
    index index.html index.htm index.jsp index.php;
    #error_page 404 /404.html;
	if ($query_string ~* ".*[\;'\<\>].*") {
        return 404;
    }
	location =/ {
        root  D:/ZHKJ_SHOP_ZY/dist/view;
        index index.html;
    }
	
	location ~* .(jpg|gif|png|js|css|woff2|woff|ttf)$ {
		root D:/ZHKJ_SHOP_ZY/;
		if (-f $request_filename) {
			expires max;
			break;
		}
		
	}
	
    location ~ .*\.html$ {
        root  D:/ZHKJ_SHOP_ZY/dist/view;
        index index.html;
    }
    location / {
        proxy_pass http://127.0.0.1:8000;
        add_header Access-Control-Allow-Origin *;
    }
}

这里我通过用location的匹配规则，用location ~* . 去寻找我的css，js等静态资源

第三步：浏览器直接输人url

这里，如果没什么问题的话，项目的前端页面展示应该没问题了，直接浏览器上输入 localhost:8088就会展示出页面

=====================================分割线==============================================

总结

看似在本地部署一个前端项目没多少东西啊，不难啊！就是下载+安装+配置+运行嘛！！！

额，怎么说呢，看似很简单，但是里面的东西你远远想象不到，各种关于页面诡异事件因为一个配置不对，都会产生；

所有呢，我总结一下我遇到的各种问题，以及我是如何解决的

问题1：初次接触node的项目，不知道如何使用，

回答：它不是简单的html页面，直接双击打开就ok了（这都是基础的），里面的代码你不去看，永远不会知道它是如何运行的，

我也不敢多说，毕竟没怎么学过，所以还是系统的学习一下

问题2：通过百度得知类似于这种前端项目，是一个前后端分离项目中的一部分（前端部分），那它是如何运行的呢，还是之前的在后端的webapp下建一个static文件，将前端页面放入，然后打包，发布到tomcat上吗？

回答：不是的，为什么前后端分离，不就是为了减少耦合，方便开发人员的开发，如何这样做，和一个完全的全栈web开发有什么区别！所以这里用nginx通过反向代理，通过指向一个url来达到运行前端页面，可以调用后端的接口

问题3：nginx如何使用？在使用nginx中遇到哪些问题？

回答：配置文件上，（我只认知在反向代理这儿）配置你的server，（端口，拦截什么的）

          遇的问题：在nginx的使用中，会有80端口占用问题，直接kill掉使用80端口的线程就ok（我总使用wamp，apache就是80                               端口的，会 有冲突）

                           在nginx配置文件中更新后，需要重新启动nginx

                           nginx.exe -t  ---------->这个是测试配置文件是否符合规范

                           nginx.exe -s reload ----------->重启nginx

问题4：使用webpack指令为前端项目打包时出现错误（）

回答：其实这就是node的版本问题，所以还是使用文档中给定的版本来使用，我就在这个坑上纠结了很久！

问题5：运行了项目，但是在控制台显示各种css，js等静态资源找不到，显示404

回答：这就是在nginx配置中没有写好location 的url拦截，仔细检查

问题6：项目可以运行，但是不能对接后台的端口url，显示500，或者就是根本不能调到后台的url

回答：还是location的问题，每个人的写法不同，有的人写后台的url匹配会用 location /api/do

          这里的api就是你后台的url的字符，比如 /user/login.do,那api就换成uer就ok了，或者直接用下面的这种，方便，就是不好管理

location / {
        proxy_pass http://127.0.0.1:8000;
        add_header Access-Control-Allow-Origin *;
    }

 

这里500还有可能是跨域的问题，因为不同服务器之间的访问，需要跨域访问，推荐帖子nginx反向代理-解决前端跨域问题，nginx配置解决跨域问题（【初学者】详细教程）

问题7：页面可以正常运行，也可以访问到后台的url，但是开发者调试下，控制台中显示[WDS] Disconnected!这个错误

回答：这个我没做过具体研究，但是亲测将代码中所有的localhost更改成127.0.0.1后可以解决

==================================分割线=================================================

这是一篇吐槽贴！！，后续会更新，放一些真正的干货东西！！！（关于前端这一块）

ps：来着一个只干后端的，对前端迷茫的小白的无力吐槽；