angular nodejs express mongodb apache，模拟线上部署

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/api/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(/api/)代理，所以从 angular应用发出的http(/api/)请求，会自动走代理，之后转发到 nodejs server。

因为所有从 angular应用发出的http请求，都是有规则的，比如 /api/*，所以需要配置 apache服务器的 httpd.conf，httpd-vhosts.conf 和 .htaccess

用下面命令打包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”,

}

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“{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 ^(.*)api(.*) http://localhost:3000/api$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 ^(.*)api(.*) http://localhost:3000/api$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 ^(.)api(.) http://localhost:3000/api$2 [P,L]

即所有的http请求中，如果有包含 api字符串的请求，则此请求被代理 http://localhost:3000/api$2

此处$2的值等于前面的 ^(.)api(.)中的第二个 (.*)的值，并且需要配置httpd-vhosts.conf的反向代理

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”Directory“{SRVROOT}/dist”

不在 httpd.conf文件里做任何 关于

# 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

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 ^(.*)api(.*) http://localhost:3000/api$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>

部署到apache服务器, 把 #1生成的 angular文件，拷贝到 apache的dist目录下，访问 apache下的 angular应用

angular: http://localhost:8080/#/login

从angular应用里发出的 http的 nodejs请求 (/api/*)都会被代理到 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/