Nginx + Https本地部署ArcGIS JavaScri

作者：liuyl
关于作者：GIS从业者，主要在ArcGIS平台下做WebGIS开发

最新更新 2017.10.10

今天查api文档时候偶然发现ArcGIS API for JavaScript 4.5版本更新了，二维地图中终于增加了绘制功能~
赶紧下载了api本地部署一份，借机尝试了一下如何在http下部署，结果~~竟然异常简单，我有点方啊，好想把本文原来的部分通通删掉！

下载后大家看到的init.js和dojo.js文件里那两处需要改的地方是这样的：

baseUrl:"https://[HOSTNAME_AND_PATH_TO_JSAPI]dojo"

请改成

baseUrl:"http://yourhostname/yourpath/dojo"

重点就是把https的那个s去掉，好了不说了，我去哭一会儿~
暂时没发现对使用有什么影响，当然有兴趣也可以加几句改成和4.3之前一样https和http都支持的。
如果哪位同学发现这样改有问题，请留言告诉我一下。

写在最前面

前段时间ArcGIS API for JavaScript 4.4版本发布，看到众多期待已久的功能出现在功能列表中，着实小兴奋了一下~~

4.3及之前的版本里均欠缺一些常用的关键功能，所以在项目里没办法用，我也只是在用户实在想做三维展示时用iframe嵌入了一个用4.3做的页面。不过4.4发布后，是时候开始尝试使用4.x版本开发二维及三维WebGIS应用了。

为什么写这篇文章

部署过4.3及3.x版本API的同学都知道，解压API到服务器目录后，要修改init.js和dojo/dojo.js两个文件，将 [HOSTNAME_AND_PATH_TO_JSAPI]替换为api的访问路径。
4.4版本的API在本地部署时有了一些变化，就是不能部署到Http路径下，只能部署到Https中。然后仍然是需要修改init.js和dojo/dojo.js这两个文件。

我还没有找到官方文档及4.4的Release notes中有对这一改变的说明，也不知道后面会不会修改回去。
鉴于官方提供的CDN https://js.arcgis.com/4.4/ 访问不太稳定，我最后还是不得不在本地部署一份，这篇文章作为记录和总结。

试验环境

Windows 10
Nginx 1.13.1
OpenSSL1.1.0f-Win64
Arcgis JavaScript API 4.4

下面才是正文

生成自签名ssl证书

开启Https需要在服务器存储一套ssl证书和私钥，开发环境用的当然不会去买，所以就要用OpenSSL来生成一份自签名证书。
搜索 nginx + https能够找到很多教程，最开始我也照着一篇生成了一份证书，比如这篇教程。按其中步骤能够顺利生成证书，配置到Nginx之后也可以正常开启Https，但是最后我无法使证书通过Chrome的安全验证使其不再提示“不安全”。
后来，在一个问题下面的回答中找到了正解。
想看原文请点 【正解传送门】看里面的那个回答

1.安装OpenSSL

略过…

2.创建一些配置

在OpenSSL安装路径下的bin文件夹下
创建LocalhostCA.cnf文件，文件中内容如下：

[ req ]
distinguished_name  = req_distinguished_name
x509_extensions     = root_ca

[ req_distinguished_name ]
countryName             = CN
countryName_min         = 2
countryName_max         = 2
stateOrProvinceName     = Bei Jing
localityName            = Bei Jing
0.organizationName      = My Company
organizationalUnitName  = My Section
commonName              = localhost
commonName_max          = 64
emailAddress            = youremail@gmail.com
emailAddress_max        = 64

[ root_ca ]
basicConstraints            = critical, CA:true

[req_distinguished_name ]那一段countryName填写2个字母的国家简称，省、市、公司、部门、邮箱自行填写。commonName要填写需要部署的域名，我部署在本机自己用，直接写localhost了。

创建Localhost.ext文件，文件中内容如下：

subjectAltName = @alt_names
extendedKeyUsage = serverAuth

[alt_names]
DNS.1   = localhost

这里DNS.1后面也要填域名。

3.创建根证书及自签名证书

在bin目录下打开控制台，顺序执行如下命令：

openssl req -x509 -newkey rsa:2048 -out LocalhostCA.cer -outform PEM -keyout LocalhostCA.pvk -days 10000 -verbose -config LocalhostCA.cnf -nodes -sha256 -subj "/CN=localhost CA"

openssl req -newkey rsa:2048 -keyout Localhost.pvk -out Localhost.req -subj /CN=localhost -sha256 -nodes

openssl x509 -req -CA LocalhostCA.cer -CAkey LocalhostCA.pvk -in Localhost.req -out Localhost.cer -days 10000 -extfile Localhost.ext -sha256 -set_serial 0x1111

命令执行成功后，bin目录下会出现如下这些文件：

配置Nginx

将生成的Localhost.cer和Localhost.pvk文件复制到Nginx的conf目录中。
修改nginx.conf文件，添加如下内容：

    # HTTPS server
    server{  
        listen 443;  
        server_name localhost;  
        ssl on;
        ssl_certificate Localhost.cer;  
        ssl_certificate_key Localhost.pvk; 
        ssl_session_timeout 5m;  
        ssl_protocols SSLv2 SSLv3 TLSv1;  
        ssl_ciphers ALL:!ADH:!EXPORT56:RC4+RSA:+HIGH:+MEDIUM:+LOW:+SSLv2:+EXP;  
        ssl_prefer_server_ciphers on;  
        add_header 'Access-Control-Allow-Headers' 'Content-Type';  
        add_header 'Access-Control-Allow-Origin' '*';  
        add_header 'Access-Control-Allow-Methods' 'GET';  
         
        location / {  
            root html; 
            index index.html 50x.html;  
        } 
    }  

重启Nginx

部署ArcGIS API for JavaScript

将下载好的api压缩包中的arcgis_js_api文件夹解压到Nginx目录的html文件夹中。
修改arcgis_js_api\library\4.4\init.js和arcgis_js_api\library\4.4\dojo\dojo.js两个文件，

将[HOSTNAME_AND_PATH_TO_JSAPI]替换为localhost/arcgis_js_api/library/4.4/

导入证书及根证书到浏览器

因为我们使用的是自签名证书，浏览器并不认识签发该证书的根证书，所以访问api文件时，会被警告：

点击继续前往localhost(不安全)就可以看到文件内容了。

但是，api是要在我们正在开发的网站中被引用的，而开发时多数还是用Http访问而不是Https。如果在Http下访问一个页面，页面中引用了我们刚部署好的Https下的API，会得到如下这样的错误：

这并不是我们希望看到的！

将生成自签名证书时一并生成的根证书导入到系统的受信任的根证书颁发机构，可以让浏览器能够验证我们生成的自签名证书并信任localhost域名下的Https站点。

在IE中打开Internet选项，内容>>证书，在受信任的根证书颁发机构中导入前面生成的LocalhostCA.cer文件

重启浏览器，再次访问API文件，此时站点应该已经是被信任的了。

恭喜，大功告成~

这里是结尾

这里并没有深究Https原理、OpenSSL的用法以及Nginx关于Https的配置，而只是照猫画虎地做了一下。目前我也仅需要有这么个Https开发环境就可以了，有需要的同学可以继续深入，并欢迎和我随时交流。

文中如有疏漏，请轻拍~

最后还有广告

最近在写一套新的WebGIS开发框架，以期替代近一年多用在各种项目中的老框架。老框架用的地方越多，暴露出的问题也越大。用点前端大热的技术，别被时代甩下太远~~
本着雁过拔毛 ~ 咳 ~ 留痕 ~ 的想法，把研发过程中的一些中间、衍生成果整理积累到一些开源项目中，遇到的一些问题和解决思路整理成文章，和各位从事WebGIS开发的同学做一些交流。

这些内容会不定时地通过个人微信公众号推送出来，欢迎大家关注，一起交流~~