angular nodejs express mongodb apache，模拟线上部署(HTTP server)

Angular 4做前端，用angular的路由器前端路由，
nodejs(6.11)+express做后端服务器，
mongodb(3.4)后端数据库

---

本地启动
angular应用: ng serve --port 4200 --proxy-config proxy.config.json
后端启动 nodejs: node server.js --watch server

---

模拟生产环境
要求: 在 apache服务器上部署 angular编译后的aot包，并且部署到 apache的angular应用发 http请求到 nodejs请求数据( nodejs从 mongodb crud数据)，
注1: 在 angular段可以 hardcode指定一个用 http发出的 ip地址和端口号，比如 ip:port/prifixapi/xxx，但是请求到后端 nodejs时，存在 CORS跨域问题，可以通过配置类似如下设置解决，但是这需要在 nodejs段修改一些代码(比如有个 cors插件)，但是这个 cors插件和 express-session插件貌似不是很兼容，都配置上后，在 nodejs端，放到express-session的 session里的比如 req.session.username 的 user变量值就消失了，暂时不了解为什么，
Header set Access-Control-Allow-Origin ""
Header always set Access-Control-Allow-Origin “*”
Header always set Access-Control-Allow-Methods “POST, GET, OPTIONS, DELETE, PUT”
Header always set Access-Control-Max-Age “1000”
Header always set Access-Control-Allow-Headers “x-requested-with, Content-Type, origin, authorization, accept, client-security-token”
*注2: 也可以通过比如 Apache服务器代理解决，因为用 apache的代理可以解决上面的跨域问题，并且服务端代码不用修改，在 apache端，配置代理如下 2a, 2b 两种配置，理论上可能是一样，仅供参考。

注3: 在本地启动时，因为可以手动指定proxy-config(/prifixapi/)代理，所以从 angular应用发出的http(/api/)请求，会自动走代理，之后转发到 nodejs server。
因为所有从 angular应用发出的http请求，都是有规则的，比如 /api/*，所以需要配置 apache服务器的 httpd.conf，httpd-vhosts.conf 和 .htaccess

1. 用下面命令打包build angular应用, 生成angular应用的aot包, npm run build-tmp2
   参考文档: https://angular.cn/guide/aot-compiler
   注: 貌似angular4以后，当–prod时自动生成aot的包，所以没加aot=true此处
   package.json:
   “scripts”: {
   “build-tmp2”: “ng build –base-href / --verbose > angularBuildFile.txt --watch --output-path=dist/prod/ --prod”,
   “build-prodsourcemap2”: “node --max-old-space-size=1840 --stack-size=3248 ./node_modules/@angular/cli/bin/ng build --verbose > angularBuildFile.txt --output-path=dist/prod --progress=true --target=production --environment=prod --output-hashing=all --sourcemaps=true --build-optimizer --vendor-chunk=true --extract-css=true”
   }
   // 注释: 这里当给prod环境打包时，因为build时加的参数比较耗费资源，可能编译和构建angular应用程序时抛出heap等异常，这是需要调整build构建方式和参数，如上所示

2a. 配置 apache服务器
2a.1. httpd.conf
2a.1.1. 配置 apache的安装路径
Define SRVROOT “C:/xxx/xxx/Apache24”
2a.1.2. 配置 apache服务器监听的端口
Listen localhost:8080
2a.1.3. 为 angular应用配置 apache服务器的服务目录，#1生成的 angular aot压缩文件，拷贝到 apache的dist目录下
DocumentRoot “$SRVROOT/dist"Directory"${SRVROOT}/dist”
并在Directory脚本里如下配置
Options Indexes FollowSymLinks
AllowOverride All
2a.1.4. 打开如下注释的行
LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_http_module modules/mod_proxy_http.so
LoadModule rewrite_module modules/mod_rewrite.so

2a.2. .htaccess (放在 apache的dist目录下，即 angular应用的根目录)
        配置如下

# BEGIN ServeStatic

<IfModule mod_rewrite.c>

# method 1 BEGIN
# RewriteEngine On

# RewriteRule ^(.*)prifixapi(.*) http://localhost:3000/prifixapi$2 [P,L]

# If an existing asset or directory is requested go to it as it is
# RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
# RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
# RewriteRule ^ - [L]

# If the requested resource doesn't exist, use index.html
# RewriteRule ^ /index.html
# method 1 END


# method 2 BEGIN
RewriteEngine On
RewriteBase /dist

RewriteRule ^(.*)prifixapi(.*) http://localhost:3000/prifixapi$2 [P,L]

RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

# method 2 END

</IfModule>

# END ServeStatic

上面配置文件非常重要的一句话是 RewriteRule ^(.)prifixapi(.) http://localhost:3000/prifixapi$2 [P,L]
即所有的http请求中，如果有以 prifixapi开头的字符串的请求，则此请求被代理 http://localhost:3000/prifixapi$2
此处$2的值等于前面的 ^(.)api(.)中的第二个 (.*)的值，并且需要配置httpd-vhosts.conf的反向代理，因为nodejs监听在3000端口

2a.3. 配置httpd-vhosts.conf，代理
注: 这里的 *:port，比如 8080必须和 Listen port的port一致，即首先监听某一个端口，之后对这个端口的请求，转发到此处的虚拟host

<VirtualHost *:8080>
    ProxyPreserveHost On

    ProxyPass /api http://localhost:3000/
    ProxyPassReverse /api http://localhost:3000/

    ServerName localhost
</VirtualHost>

2b. 配置 apache服务器
2b.1. httpd.conf
2b.1.1. 配置 apache的安装路径
Define SRVROOT “C:/xxx/xxx/Apache24”
2b.1.2. 配置 apache服务器监听的端口，可以为任何合理的可用的端口
Listen localhost:8080
2b.1.3. 为 angular应用配置 apache服务器的服务目录，#1生成的 angular aot压缩文件，拷贝到 apache的dist目录下
DocumentRoot “$SRVROOT/dist"Directory"${SRVROOT}/dist”
不在 httpd.conf文件里做任何 关于 <Directory脚本的配置
2b.1.4. 打开如下注释的行
LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_ajp_module modules/mod_proxy_ajp.so
LoadModule proxy_http_module modules/mod_proxy_http.so
LoadModule rewrite_module modules/mod_rewrite.so
# Virtual hosts
Include conf/extra/httpd-vhosts.conf

2b.2. .htaccess (放在 apache的dist目录下，即 angular应用的根目录)
        配置如下

# BEGIN ServeStatic

<IfModule mod_rewrite.c>

RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>

# END ServeStatic

前端: Angular

1. 前端Angular编译(包括混淆)

2. 放到Apache server的httpd-vhosts.conf指定的路径下面

3. 同时Apache作为面向用户的直接访问的静态服务器，监听在默认的80端口,访问80端口就可以直接访问Angular的网页

4. Angular的页面需要调用HttpClient（或者Ajax的异步或者同步）发起http请求，到后端的nodejs server(提供rest api服务)， Angular发起的http请求的rest api的起始路径设计为以 prefixapi 开头，类似于 /prefixapi/getname，因为前端的angular代码是运行在 Apache server的80端口下，
   注意因为考虑到灵活性和用Apache代理解决文章开头的CORS的跨域问题(angular和nodejs运行在不同端口，前后端分离)，所以需要在Apache配置如下的代理映射，即所有以prefixapi开头的rest api的请求，都被代理到监听在3000端口的nodejs的prefixapi的服务上，此处的灵活性为，前端可以改变rest api的 prefixapi为任意的有意义的字符串，比如 prefixapiabc/getname，而后端的 nodejs的 rest api可以以任意有意义的字符串开头，比如 testprefixapibcd/getname/等，这样后端的真正 rest api的路径不必对外暴露出去，同时后端的nodejs的端口可以任意指定，不必在前端的angular的代码里hardcode后端nodejs的rest api服务的 rest api起始字符串和端口号。
   RewriteRule ^(.)prefixapi(.) http://localhost:3000/prefixapi$2 [P,L]
   RewriteRule ^(.)prefixapiabc(.) http://localhost:3000/testprefixapibcd$2 [P,L]
   后端: Nodejs

5. nodejs运行在3000端口，nodejs作为后端服务器，可以与任何数据源存取数据，比如mongodb和elasticsearch等

   2b.3. 配置httpd-vhosts.conf，代理

<VirtualHost *:80>
    #ProxyPreserveHost On
	ServerName localhost
    DocumentRoot "~/Apache24/dist"
    ErrorLog "~/Apache24/logs/error.log"
    CustomLog "~/Apache24/logs/access.log" combined
	
	RewriteEngine On
	RewriteRule ^(.*)prefixapi(.*) http://localhost:3000/prefixapi$2 [P,L]
	
    <Directory "C:/installed/httpd-2.4.29/Apache24/dist">
        Options Indexes FollowSymLinks
		AllowOverride All
        Require all granted
		
		#Require host localhost
		#Require ip 127.0.0.1
		#DirectoryIndex index.html
    </Directory>
</VirtualHost>

3. 部署到apache服务器, 把 #1生成的 angular文件，拷贝到 apache的dist目录下，访问 apache下的 angular应用
   angular: http://localhost:8080/#/login
   从angular应用里发出的 http的 nodejs请求 (/prefixapi/*)都会被代理到 nodejs的 3000端口

参考文件:
https://stackoverflow.com/questions/31386994/redirecting-with-htaccess-to-nodejs-app
http://arguments.callee.info/2010/04/20/running-apache-and-node-js-together/
http://www.developerq.com/article/1500692799
http://blog.csdn.net/yehell/article/details/2170018
http://www.iteye.com/topic/579481
http://blog.csdn.net/Feature_/article/details/67639406
http://krasimirtsonev.com/blog/article/mod_rewrite-one-simple-rule-and-two-stupidly-lost-hours-Request-exceeded-the-limit-of-10-internal-redirects-due-to-probable-configuration-error
https://www.exehack.net/8.html
https://lesca.me/archives/htaccess-rewrite.html
http://blog.csdn.net/newjueqi/article/details/12014673
https://www.phusionpassenger.com/library/deploy/apache/deploy/nodejs/