首先，在本机开发能够在 localhost:4200 访问后，出于为了能够在多个地方访问到正在开发的东西，想把它丢到阿里云上去。按我的理解，我直接把项目丢到阿里云，然后通过IP地址访问就好了，so easy。但执行的过程中，还是遇到一些问题，在这里把它们整理记录下来。
要想在阿里云上跑起来angular开发的程序，可以本地开发完成后编译了直接丢到服务器上，不过觉得这样子做也有麻烦，因为我不是为了使用产品，而是作为开发者的目的把它放到服务器上，目的是为了多点预览（多个地方可以看到效果），所以改动必然是频繁的，我如果每次在开发机上改动后，都要编译，然后传送到服务器上，很麻烦，不如直接在服务器上搭建开发环境来的直接。
那么开始搭建开发环境，过程参考官方文档，只说自己遇到的问题，首先要安装node，ng：
[root@izbp1d3n7n9equ3laipledz ~]# yum install nodejs
[root@izbp1d3n7n9equ3laipledz ~]# node --version
v6.17.1
[root@izbp1d3n7n9equ3laipledz ~]# npm --version
3.10.10
[root@izbp1d3n7n9equ3laipledz ~]# npm install -g @angular/cli
npm: relocation error: npm: symbol SSL_set_cert_cb, version libssl.so.10 not defined in file libssl.so.10 with link time reference
当使用npm安装 angular cli遇到问题后，查了一下，结论是 openssl 版本太低，于是检查并更新：
[root@izbp1d3n7n9equ3laipledz ~]# openssl version
OpenSSL 1.0.1e-fips 11 Feb 2013
[root@izbp1d3n7n9equ3laipledz ~]# yum -y update openssl
OpenSSL 1.0.2k-fips 26 Jan 2017
然后就可以安装angular cli了，安装后查看信息：
[root@izbp1d3n7n9equ3laipledz ~]# which ng
/usr/bin/ng
将已经在本地测试过可运行的项目文件复制到服务器上后想运行起来：
[root@izbp1d3n7n9equ3laipledz angular_cron_test]# ng serve
结果报错了：
/usr/lib/node_modules/@angular/cli/bin/ng:23
);
^
SyntaxError: Unexpected token )
at createScript (vm.js:56:10)
at Object.runInThisContext (vm.js:97:10)
at Module._compile (module.js:549:28)
at Object.Module._extensions..js (module.js:586:10)
at Module.load (module.js:494:32)
at tryModuleLoad (module.js:453:12)
at Function.Module._load (module.js:445:3)
at Module.runMain (module.js:611:10)
at run (bootstrap_node.js:394:7)
at startup (bootstrap_node.js:160:9)
经查证，是node版本的问题，然后如下处理：
[root@izbp1d3n7n9equ3laipledz angular]# node --version
v6.17.1
[root@izbp1d3n7n9equ3laipledz angular]# npm cache clean -f
npm WARN using --force I sure hope you know what you are doing.
[root@izbp1d3n7n9equ3laipledz angular]# npm install -g n
/usr/bin/n -> /usr/lib/node_modules/n/bin/n
/usr/lib
└── n@6.3.1
[root@izbp1d3n7n9equ3laipledz angular]# n stable
installing : node-v12.16.1
mkdir : /usr/local/n/versions/node/12.16.1
fetch : https://nodejs.org/dist/v12.16.1/node-v12.16.1-linux-x64.tar.xz
installed : v12.16.1 (with npm 6.13.4)
Note: the node command changed location and the old location may be remembered in your current shell.
old : /usr/bin/node
new : /usr/local/bin/node
To reset the command location hash either start a new shell, or execute PATH="$PATH"
[root@izbp1d3n7n9equ3laipledz angular]# node --version
v6.17.1
[root@izbp1d3n7n9equ3laipledz angular]# n
此处要注意，需要新开终端，执行：
n
切换node版本。
就可以使用angular cli了：
[root@izbp1d3n7n9equ3laipledz ~]# node --version
v12.16.1
[root@izbp1d3n7n9equ3laipledz ~]# ng --version
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 9.0.4
Node: 12.16.1
OS: linux x64
Angular:
...
Ivy Workspace:
Package Version
------------------------------------------------------
@angular-devkit/architect 0.900.4
@angular-devkit/core 9.0.4
@angular-devkit/schematics 9.0.4
@schematics/angular 9.0.4
@schematics/update 0.900.4
rxjs 6.5.3
[root@izbp1d3n7n9equ3laipledz angular_cron_test]# ng serve
Your global Angular CLI version (9.0.4) is greater than your local
version (8.3.25). The local Angular CLI version is used.
To disable this warning use "ng config -g cli.warnings.versionMismatch false".
10% building 3/3 modules 0 activeℹ ｢wds｣: Project is running at http://localhost:4200/webpack-dev-server/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: 404s will fallback to //index.html
chunk {main} main.js, main.js.map (main) 43.3 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 269 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 178 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 6 MB [initial] [rendered]
Date: 2020-02-29T12:52:43.746Z - Hash: da887e727e4dce59c89e - Time: 19408ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
ℹ ｢wdm｣: Compiled successfully.
但是要在其它电脑上访问，不能使用localhost，怎么办？
[root@izbp1d3n7n9equ3laipledz angular_cron_test]# ng serve --host 172.xx.xxx.174 --port 4200
注意，此处的ip不是公网ip，而是内网ip
然后即可远端访问（在阿里云进行端口设置此处跳过）。然后遇到的第一个问题：文件太太，加载太慢，然后尝试先build，这样可能好一点：
[root@izbp1d3n7n9equ3laipledz angular_cron_test]# ng build
build之后放到web服务器上（tomcat）之后出现404问题，查找后发现解决方案是：
[root@izbp1d3n7n9equ3laipledz angular_cron_test]# ng build --base-href /hello-world/
嗯，路径对了，但是文件太大，访问太慢，明明就是最简单的hello world项目，这么这么打，找了解决方案：
[root@izbp1d3n7n9equ3laipledz angular_cron_test]# ng build --prod --base-href /hello-world/
--prod参数会在编译时去除掉很多无用的依赖部分。
但是文件还是大，打开要8s左右，体验太糟糕，于是考虑使用gzip压缩，看了一下，tomcat原生支持gzip压缩，开启设置就好了。
编辑以下文件：
[root@izbp1d3n7n9equ3laipledz bin]# vi /software/tomcat/apache-tomcat-9.0.22/conf/server.xml
完善以下配置信息：
<Connector port="8080" protocol="HTTP/1.1"
connectionTimeout="20000"
redirectPort="8443"
compression="on"
useSendfile="false"
compressionMinSize="2048"
noCompressionUserAgents="gozilla, traviata"
compressableMimeType="text/html,text/xml,text/javascript,application/x-javascript,application/javascript,text/css,text/plain"/>
需要注意的是，停止tomcat进程后再编辑配置文件，一定要注意位置，不要搞错位置了，或在注释里编辑，最后是注意那个useSendfile的设置。
配置项的含义参考：
https://tomcat.apache.org/tomcat-9.0-doc/config/http.html
https://zhuanlan.zhihu.com/p/20884994
https://hongjiang.info/tomcat-nio-sendfile-bug/
https://www.twblogs.net/a/5b84cad52b71775d1cd1e0ef/zh-cn
https://examples.javacodegeeks.com/enterprise-java/tomcat/enable-gzip-compression-apache-tomcat/
https://stackoverflow.com/questions/16653642/tomcat-7-gzip-compression-not-working/36238800
https://www.cnblogs.com/cnsdhzzl/p/7058226.html
http://seo.chinaz.com/101.37.76.205
在这个网站可以测试是否开启成功了gzip。
https://www.cnblogs.com/rslai/p/7929130.html
https://www.cnblogs.com/wheatCatcher/p/8555888.html
https://www.jianshu.com/p/76f783fddb46
网友评论