一、部署angular项目
1、将Angular项目打包；
ng build --port
2、将打包后的dist文件夹复制到/nginx/html 下（nginx所在目录下的html目录，没有的话自己创建一个）
3、修改conf/nginx.conf，如下
server {
listen 80;
server_name 127.0.0.1;
location / {
root html/ngproject;
index index.html;
}
}
#location：就是用来匹配url的。浏览器直接拿locatio来访问
#root与alias主要区别在于nginx如何解释location后面的uri，这会使两者分别以不同的方式将请求映射到服务器文件上。
#root的处理结果是：root路径＋location路径
#alias的处理结果是：使用alias路径替换location路径
#alias是一个目录别名的定义，root则是最上层目录的定义。
#还有一个重要的区别是alias后面必须要用“/”结束，否则会找不到文件的。。。而root则可有可无~~
4、执行
nginx -t 检测配置文件是否正确
nginx -s reload 重新加载配置文件
5、启动nginx，访问127.0.0.1，即可访问Angular项目
二、同台服务器部署多个前端项目
1、多项目配置（自己配置多个location路径就行了）
location /um/ { # location中的字符结尾有没有/都没有影响。也就是说/user/和/user是一样的。
alias html/UserManangement/;
index index.html;
# 刷新请求页面时，nginx 等服务器会先于angular接管页面跳转，由于nginx并没有 angular里的路由，因此会404。
# 找不到$uri文件就重定向到index.html，index.html会根据url返回正确的页面
#index.html相当于页面处理器
#访问不同的url展示不同的页面，但是都是通过index.html里的javascript来处理的
#如果Angular使用了路由器，就必须配置服务器，让它对不存在的文件返回应用的宿主页(index.html)。
try_files $uri $uri/ /UserManangement/index.html;
}
nginx配置项目路径，/um/
angular也要设置好base_href.
因为，如果nginx配置在根目录（/），而angular配置了base_href（/um/）；那么访问应用的时候url会自动添加上base_href;
也就是访问127.0.0.1的时候，url会变成127.0.0.1/um/。这是如果刷新就500/404了，因为nginx并没有配置/um/
所以base_href，要angular和nginx同步设置
2、URL最后的的斜杠
- 不带斜杠：表示一个网页，url1表示网站根目录下的abc文件
- 带斜杠：表示一个目录，url2表示网站的abc目录，会返回abc目录下的默认网页(index.html)
https://domain.com/这种根路径的，没加斜杠时，浏览器会默认给你加上
3、angular基本路径设置
index.html:<base href="/">
app.module:import {APP_BASE_HREF} from '@angular/common';
ng build --port --base-href /xkb/
//好像选择一种就行，没试过。试过2and3一起，是可以的
三、部署时的跨域问题
注意：前端部署上服务器了。我通过浏览器打开，比如www.lxs.com/tb/login。这个地址是项目的地址，但是通过这个项目发起的http请求，还是我本机的地址。
但是，跨域问题和本机地址没有毛关系；（一开始老是绕进去了）
只要通过前端项目去请求其他服务器，且该服务器和前端项目非同源，就会引起跨域；
1、跨域是浏览器的安全策略，只有在浏览器发起的请求才会遇到跨域问题。
协议、IP、端口，三者相同才算是同源，只要有一个不同就是非同源，就会遇到跨域问题；
如：www.123.com:8080/index.html 调用 www.123.com:8081/server.php （端口不同:8080/8081，跨域）
代理模式解决跨域问题
例如www.123.com/index.html需要调用www.456.com/server.php，可以写一个接口www.123.com/server.php，由这个接口在后端去调用www.456.com/server.php并拿到返回值，然后再返回给index.html，这就是一个代理的模式。相当于绕过了浏览器端，自然就不存在跨域问题。
2、angular设置proxy，就是在angular这边设置了一个代理。
浏览器发起的请求，通过代理转发给后端服务器，由于angular项目和代理是在同个域下，就不存在跨域问题了；
这里的思路是通过代理，绕过浏览器，这种方法就算是本地的angular代理到远程的后端服务也是可以的。
3、如果angular不设置proxy，而只是在golang简单的设置允许所有域访问（CORS），那么使用nginx部署时还是会存在跨域问题；
这时，需要在nginx设置一个反向代理。
server {
#监听端口和域名
listen 80;
server_name 172.18.58.31;
#添加头部信息
proxy_set_header Cookie $http_cookie;
proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Forwarded-Server $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-real-ip $remote_addr;#经过nginx代理后，后端获取的是nginx的ip；这里改为还原真实IP
#拦截代理请求
location /api/ {
proxy_pass http://172.18.58.31:4541/; #注意：使用代理地址时末尾记得加上斜杠"/"。
}
#项目根目录
location / {
root html/wanmor_cloud_platform_frontend;
index html/login/login.html; #index表示首页
}
}
前端项目地址和反向代理是同源，也就绕过了浏览器，实现跨域；
当访问http://172.18.58.31:80/api/login时就会变成http://172.168.58.31:4541/login
4、405 not allowed又是什么问题？
因为请求静态文件采用的是post方法，nginx是不允许post访问静态资源。
题话外，试着post访问了下www.baidu.com发现页面也是报错。
四、文件服务器
location /dir/ {
alias html/dir/;#html是nginx的目录
autoindex on;#显示目录项
}
location /dir/ {#两种配置是等效的
root html;
autoindex on;
}
访问http://127.0.0.1/dir/
因为alias路径是替换location路径，浏览器访问/dir/时，nginx会返回/html/dir/的内容
