2020-03-01 把angular CLI 生成的项目放到阿里云上,便于在不同电脑上访问

首先,在本机开发能够在 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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 160,108评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,699评论 1 296
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,812评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,236评论 0 213
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,583评论 3 288
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,739评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,957评论 2 315
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,704评论 0 204
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,447评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,643评论 2 249
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,133评论 1 261
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,486评论 3 256
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,151评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,108评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,889评论 0 197
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,782评论 2 277
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,681评论 2 272

推荐阅读更多精彩内容