昨天说要用nginx，今天搞了一天，终于把测试服部署好了。回顾下今天的探索过程。
整体思路是1、将angular项目发布成压缩文件。2、用nginx做反向代理来访问压缩后的angular项目。3、nginx将angular的接口请求转发到Express服务上，再将结果发给客户端。
一、Nginx安装和启动
官网下载最新稳定版本http://nginx.org/
将下载好的文件通过Xftp放到服务器上
解压文件 tar -zxvf nginx-1.16.0.tar.gz
进入到解压的目录中依次执行
./configure
make
make install
默认会安装在 /usr/local/nginx 下，安装好之后添加环境变量 ln -s /usr/local/nginx/sbin/nginx /usr/local/bin/nginx
然后有几个常用命令：
测试配置文件： nginx -t
启动： nginx
重启： nginx -s reload
二、Nginx配置
这个还挺复杂的，暂时只是跑起来了，但是很多地方还不理解，配置文件在 /usr/local/nginx/conf/nginx.conf
1、开启gzip，可以提升访问速度
gzip on; #开启gzip
gzip_min_length 1k; #低于1kb的资源不压缩
gzip_comp_level 3; #压缩级别【1-9】，越大压缩率越高，同时消耗cpu资源也越多，建议设置在4左右。
gzip_types text/plain application/javascript application/x-javascript text/javascript text/xml text/css; #需要压缩哪些响应类型的资源，多个空格隔开。不建议压缩图片，下面会讲为什么。
gzip_disable "MSIE [1-6]\."; #配置禁用gzip条件，支持正则。此处表示ie6及以下不启用gzip（因为ie低版本不支持）
gzip_vary on; #是否添加“Vary: Accept-Encoding”响应头
2、代理服务端
先设置好上游
upstream analysisServer{
server 127.0.0.1:3080 weight=1; #端口就是项目后端服务的端口
}
然后配置server
server {
listen 8080 default_server; #这个是nginx要用的端口
listen [::]:8080 default_server;
server_name _;
#root /usr/local/Project/Client; #如果不用默认的html路径，可以在这里指定
location ~ ^(/api) { #所有 ip:port/api/xxx 的请求会被指定的上游代理
proxy_pass http://analysisServer; #在这里设置一个代理，和upstream的名字一样
#以下是一些反向代理的配置可删除
proxy_redirect off;
#后端的Web服务器可以通过X-Forwarded-For获取用户真实IP
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
client_max_body_size 10m; #允许客户端请求的最大单文件字节数
client_body_buffer_size 128k; #缓冲区代理缓冲用户端请求的最大字节数
proxy_connect_timeout 300; #nginx跟后端服务器连接超时时间(代理连接超时)
proxy_send_timeout 300; #后端服务器数据回传时间(代理发送超时)
proxy_read_timeout 300; #连接成功后，后端服务器响应时间(代理接收超时)
proxy_buffer_size 4k; #设置代理服务器（nginx）保存用户头信息的缓冲区大小
proxy_buffers 4 32k; #proxy_buffers缓冲区，网页平均在32k以下的话，这样设置
proxy_busy_buffers_size 64k; #高负荷下缓冲大小（proxy_buffers*2）
proxy_temp_file_write_size 64k; #设定缓存文件夹大小，大于这个值，将从upstream服务器传
}
location / {
root html;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
修改完先测试 nginx -t
测试通过重启 nginx -s reload
三、Angular发布
修改 src\environments\environment.prod.ts 下的服务地址为nginx的服务地址（这里因为ip填写错误，耽误了很长事件。。
执行 npm run-script build
将发布的文件放到服务器的nginx配置中指定的路径下，默认是 /usr/local/nginx/html
然后就可以通过浏览器访问了
*补充
上面的方式是修改了正式服的配置，这样不妥，应当新增个测试服配置，具体步骤如下
1、新增src\environments\environment.test.ts
2、修改angular.json
复制一份 build.configurations 下的production配置，改名为test
然后将 test.fileReplacements 下的 environment.prod.ts 改为 environment.test.ts
3、修改package.json
复制一份build命令，改为 build-test
在 ng build 后面追加参数 --configuration=test
这样只需要执行npm run-script build-test 就可以发布测试版了
四、Nginx一个端口两个项目
上面是我在自己服务器测试的，现在要部署到正式服务器上，因为正式服务器的nginx已经用8080端口代理的这个项目的正式服了，所以需要将上面的server和upstream复制一份到下面
首先修改新 upstream 的名字和端口
修改新 server 的端口和代理名子以及root路径
还要修改新Express的启动端口和upstream一致
修改angular项目environment下的端口和server端口一致
最后测试并重启nginx，就可以用新端口访问了
但是。
由于服务器不在我们手里，在遥远的上海，每次开新端口还要去麻烦那边帮忙，我们老大就说要用现有的端口来处理两个项目。
于是删掉后加的那个server，保留upstream
在现有的server中添加两个location
1、复制一份上面的 location ~ ^(/api) 改为 location ~ ^(/testapi) 并且使用新的upstream代理
2、新增
location /test/ {
alias /新的angular发布路径;
}
还要修改angular的environment中的 api 为 testapi 这样接口请求就可以流转到Express了
修改angular的build命令，添加参数 --base-href ./ 这样html使用相对路径的文件也可以正确的找到服务器资源了
然后，在之前服务器的地址加上 test/ 就可以用来访问测试服务器了。
上周任天堂放出了switch lite的消息，本来有点想要的，但是今天又来个switch增强版，续航比switch lite还久，价格跟现有的switch一样。。我还是继续观望吧。
网友评论