一、部署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最后的的斜杠

1.http://www.abc.com/abc 2.http://www.abc.com/abc/

不带斜杠：表示一个网页，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、端口，三者相同才算是同源，只要有一个不同就是非同源，就会遇到跨域问题；

如：http://www.123.com:8080/index.html 调用 http://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/的内容