2016-03-14 119 views
4

这是我第一次部署ssl。我有express节点js模块运行在localhost:4000。我已经生成了自签名证书并安装在服务器中并且正在工作。现在,我的angularjs前端运行在localhost:3000上(我使用http-server来运行角码)。Angular + Node(Express)+ SSL集成

为了使我的观点更清晰,这里是在服务器端的代码: -

// Import node js modules 
var https = require('https') 
var fs = require('fs') 
var express = require('express') 

// Load App configuration 
var config = require('./config/config') 

// Database Integration Here(mongodb) 

// Initialize the express app 
var app = express() 

// App express Configuration 

// parse application/json 
app.use(bodyParser.json()) 

// parse application/x-www-form-urlencoded 
app.use(bodyParser.urlencoded({ extended: true})) 

app.use(cors()) 

app.set('serverHost', config.server.host) 
app.set('serverPort', config.server.port) 
app.set('serverUrl', config.server.url) 

// Initializing various app modules 

// Initialize the components 

//Initialize the route(controller) 

// Start the app with a given port no and mode 
var env = process.env.NODE_ENV || 'development' 

var httpsOptions = { 
    key: fs.readFileSync(__dirname + '/cert/server.key'), 
    cert: fs.readFileSync(__dirname + '/cert/server.crt') 
} 

https.createServer(httpsOptions, app).listen(app.get('serverPort'), function() { 
    // Server and mode info 
    console.log('The homerungurus backend running on server: ' 
       + app.get('serverHost') 
       + ' and the port is: ' 
       + app.get('serverPort')) 

    console.log("The mode is: " + env) 
}) 

正如你可以看到我已经安装在服务器的证书。 我并不需要一个HTTP代理,因为我要在标准端口443

我无法理解一些事情上部署Web服务器角 -

  1. 如何启用并设置SSL证书在我的角度模块中,以便 express和angular可以通过ssl进行通信。
  2. 我如何向浏览器显示我的后端express节点的证书?

我希望我已经说得更清楚了。

任何帮助表示赞赏?

+0

请提供更多代码以便我们为您提供帮助:** [MCVE](http://stackoverflow.com/help/mcve)** – AGE

+0

@AGE我已添加更多内容。希望这将是足够的。 – tumulr

回答

4

好吧,我们从哪里开始?

你有一个后端(表达节点JS)在端口4000上运行,并且前端端口3000上运行(与HTTP服务器angularjs),所以你基本上两个独立的web服务器正在运行。当你说你在服务器上“安装”了ssl证书时,我假设你已经将它放在某个目录中,但并未安装在其中一台服务器上。

您有几个选择来部署您的代码以及您的SSL证书。最好的办法是通过网址从后端分离前端。

这将意味着你的前端会从供应:https://frontend.example.com 和后端会从https://backend.example.com服务(你可以改变任何你想要的网址,所以像https://example.comhttps://www.example.com是罚款以及)

由于据我所知,如果你的前端有https://,你的后端也需要https://,否则你将遇到浏览器安全策略问题。您可能还需要寻找同源策略,并让您的服务器https://frontend.example.com可以访问https://backend.example.com,但对于开放的一个新的票,如果你需要它:d

用户将看到https://frontend.example.com

绿色符号

我假设你知道你将如何改变后端URL,这样你的角度代码将使用https://backend.example.com代替http://localhost:4000

到现在供职于443端口现有的服务器(即HTTPS的默认端口,如果你总是使用说https:// ...但不指定一个端口),你需要一个http代理。

作为http代理(你可以谷歌的反向代理),你可以采取apache或nginx,都是非常普遍的。

这里有几个教程,如何设置特定于操作系统的nginx/apache,但我确定你会管理。不要忘记安装了mod_ssl和mod_http_proxy MOD为Apache(我不记得,如果nginx的需要的东西specifc以及)

对于Apache反向代理的典型配置是这样的:

<VirtualHost *:80> 
    # this part redirects all traffic from normal http to https 
    ServerName frontend.example.com 
    ServerSignature Off 

    RewriteEngine on 
    RewriteCond %{HTTPS} !=on 
    RewriteRule .* https://%{SERVER_NAME}%{REQUEST_URI} [NE,R,L] 
</VirtualHost> 

<virtualhost *:443> 
    # this is the actual part with some security enhancements 
    ServerName frontend.example.com 
    ServerAdmin [email protected] 

    # be carefull with HSTS, it might break your setup if you 
    # do not know what you do. If you are not sure, do not 
    # comment the next line in 
    # Header always add Strict-Transport-Security "max-age=15768000" 

    # Enable SSL 
    SSLEngine on 
    # only strong encryption ciphers 
    # for reference https://community.qualys.com/blogs/securitylabs/2013/08/05/configuring-apache-nginx-and-openssl-for-forward-secrecy 
    # and no RC4 according to https://community.qualys.com/blogs/securitylabs/2013/03/19/rc4-in-tls-is-broken-now-what 
    SSLProtocol all -SSLv2 -SSLv3 
    SSLHonorCipherOrder on 
    SSLCipherSuite "EECDH+ECDSA+AESGCM EECDH+aRSA+AESGCM EECDH+ECDSA+SHA384 EECDH+ECDSA+SHA256 EECDH+aRSA+SHA384 EECDH+aRSA+SHA256 EECDH+aRSA+RC4 EECDH EDH+aRSA !aNULL !eNULL !LOW !3DES !MD5 !EXP !PSK !SRP !DSS !RC4" 
    SSLCompression Off 
    SSLCertificateFile /path/to/cert.pem 
    SSLCertificateKeyFile /path/to/privkey.pem 
    # this next line is not needed if you have a self signed cert 
    SSLCertificateChainFile /path/to/chain.pem 

    ServerSignature Off 

    RequestHeader set X-FORWARDED-PROTOCOL https 
    RequestHeader set X-Forwarded-Ssl on 

    ProxyPreserveHost On 

    # Ensure that encoded slashes are not decoded but left in their encoded state. 
    # http://doc.gitlab.com/ce/api/projects.html#get-single-project 
    AllowEncodedSlashes NoDecode 

    <Location /> 
     # New authorization commands for apache 2.4 and up 
     # http://httpd.apache.org/docs/2.4/upgrading.html#access 
     Require all granted 

     ProxyPassReverse http://127.0.0.1:3000 
     ProxyPassReverse http://frontend.example.com/ 
    </Location> 

    #apache equivalent of nginx try files 
    # http://serverfault.com/questions/290784/what-is-apaches-equivalent-of-nginxs-try-files 
    # http://stackoverflow.com/questions/10954516/apache2-proxypass-for-rails-app-gitlab 
    RewriteEngine on 
    RewriteCond %{DOCUMENT_ROOT}/%{REQUEST_FILENAME} !-f 
    RewriteRule .* http://127.0.0.1:3000%{REQUEST_URI} [P,QSA] 
    RequestHeader set X_FORWARDED_PROTO 'https' 

您将需要两次完全相同的前端(如上图所示)和后端(您将端口3000替换为4000,将frontend.example.com替换为backend.example.com)。

我希望这可以帮助你一点。它不尽可能完整,但它应该给你一个提示如何设置你的两个http服务器在http代理后面来服务你的ssl证书。

+0

感谢您的回复。我多次阅读你的评论后终于明白了。非常感谢。 :d – tumulr

0

以上@chickahoona所做的评论已经足够。我的解决方案如下: -

  1. 我删除了http服务器和使用nginx为我的前端,因为我想有html5模式,因此我需要有url重写。
  2. 我已经使用nginx作为代理服务器而不是apache。

就是这样,其他所有内容与@chickahoona指出的一样。