Node & Angular 4 学习记录（三）-- 部署

Node & Angular 4 学习记录（三）-- 部署

    前两篇记录了Node和Angular程序的构建及开发，本篇会记录下来部署相关的事情。

    在一开始我陷入了误区，没有准确的理解前后端完全分离的概念，强行让Node和Angular程序写在一起，启动node服务器来跑程序，同时也浪费了angular-cli提供的服务器。在部署中遇到重重困难，最后理解了这个概念。所谓前后端完全分离就是前段写好程序后打包放在服务器上就可以直接运行，请求后端API的时候需要启动后端的程序，这其实是两个程序在运行。我们选择了用Nginx服务器做代理转发。

    首先我们需要知道angular-cli是怎么打包前端程序的？一个angular前端程序是由很多模块组成，我们可能是用JavaScript来写，又或者是TypeScript,又或者是其他什么语言。但是浏览器只认识我们Js，所以angular-cli会打包所有的文件包括静态文件到配置好的文件夹中，这时候我们其实是不需要应用服务器就可以直接用的。下面记录一下部署的过程：

    我们应用的是Nginx来做代理转发，我们想在一个Nginx可以部署多个前端程序，所以对于静态资源我们没有应用网上广泛应用的转发模式（代理所有.js,.css等结尾的location）。部署的过程很简单，像前文提到的前端代码打包的时候一定要设置baseUrl，这样可以保证Nginx找到html的时候也同时能够找到其他静态文件。

示例：

前端代码baseUrl为：“./”，打包前端代码后直接把打包的文件夹里的文件放到Nginx访问根目录对应的ng-server文件夹下就好。可以配置angular-cli中的输出目录名字成ng-server，这样部署的时候直接打包文件夹就好。另外需要注意的是，文件内静态文件的引用全部使用"./"出去到项目的根目录，之前也设置了相应的baseUrl，可以保证静态文件的正确引用。
Nginx配置：

location /ng-server/ {
    #定义绝对路径
    root F:/Dwork/Server/nginx-1.12.1/html;
    index index.html;
    #H5模式Url刷新页面找不到页面重定向
    try_files $uri $uri/ /ng-server/index.html;
}
        

此时我们已经完成了前端代码的部署，访问的时候可以发现请求不到服务端，这个时候我们该部署服务端了。启动node服务器后，在Nginx设置API代理：

location /ng-server/api  {
        proxy_pass http://127.0.0.1:3000/api;
        proxy_set_header Host $http_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_intercept_errors on;
    add_header Access-Control-Allow-Origin *;  
    add_header Access-Control-Allow-Headers X-Requested-With;  
    add_header Access-Control-Allow-Methods GET,POST,OPTIONS;  
}

这样我们就完成了前后端两个程序的部署。到此为止，我们已经完成了Node服务端，Angular 4 App的开发和部署，这期间遇到很多问题，解决问题的过程是有趣的。希望这份记录也会给其他人带来帮助。

这里是上一篇

想写一些东西分享，欢迎转载，请注明出处。
-板凳儿儿
https://www.jianshu.com/p/38e589f5a94f