使用Nginx和OpenSSL搭建本地HTTPS的ArcGIS for JavaScript 4.6

1,313 6
GIS Nginx OpenSSL 代理
  1. 1 背景
  2. 2 准备工作
  3. 3 安装配置
    1. 3.1 Nginx
    2. 3.2 OpenSSL
    3. 3.3 ArcGIS for JavaScript 4.6
  4. 4 证书的生成与配置
    1. 4.1生成证书
    2. 4.2 配置证书和Nginx
    3. 4.3 重启Nginx
    4. 4.4 导入证书

HTTPS的初试：
前两天看谷歌开发者公众号了解到Google Chrome要在68这个版本时彻底将HTTP网站列为不安全，要求全部网站都要支持HTTPS，由此萌生了先在本地搭建一些HTTPS的站点的想法。

1 背景

由于工作任务，最近一直在写本子，了解了一些GIS方面的小知识，但是学的很浅显，其中就包括ArcGIS for JavaScript。基于谷歌公众号里面的启发，就想着在本地搭建一个HTTPS结构的ArcGIS for JavaScript站点。

2 准备工作

注意：下载ArcGIS for JavaScript前，先在https://developers.arcgis.com注册ArcGIS账号

3 安装配置

3.1 Nginx

下载好Nginx后，解压到C:\，得到nginx.exe在C:\nginx\根目录下，并将C:\nginx添加到系统环境变量的PATH中，即可完成Nginx的安装和配置。

3.2 OpenSSL

下载好OpenSSL后，双击安装，将安装目录设置为C:\中，安装后即为C:\OpenSSL-Win64，同理将C:\OpenSSL-Win64\bin添加到系统环境变量的PATH中，即可完成Nginx的安装和配置。

3.3 ArcGIS for JavaScript 4.6

下载好ArcGIS for JavaScript 4.6后，解压到C:\nginx\html\中，得到一个C:\nginx\html\arcgis_js_api\library\4.6\类似的目录。和往常一样，需要修改init.js和dojo.js中的域名信息。

将init.js和dojo.js中的以下的信息：

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

修改为：
1
2
3
4
5
baseUrl:"http://localhost/arcgis_js_api/library/4.6/dojo"

or

baseUrl:"https://localhost/arcgis_js_api/library/4.6/dojo"

注意：将https改为http 这里不改也是可以的

自此，安装配置即已经完成，下一步需要生成并在Nginx中配置证书。

4 证书的生成与配置

4.1生成证书

在网上查资料，有大佬是这样子做的（先不要照抄这里，继续看下面的）：

1
2
3
4
5
$ 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

首先在C:\OpenSSL-Win64\bin新建两个文件：
第一个文件LocalhostCA.cnf:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
[ req ]
distinguished_name  = req_distinguished_name
x509_extensions     = root_ca

[ req_distinguished_name ]
countryName             = CN
countryName_min         = 2
countryName_max         = 2
stateOrProvinceName     = Ji Nan
localityName            = Ji Nan
0.organizationName      = TelChina
organizationalUnitName  = GIS Engineer
commonName              = localhost
commonName_max          = 64
emailAddress            = kongbin0325@hotmail.com
emailAddress_max        = 64

[ root_ca ]
basicConstraints            = critical, CA:true

配置项 值 描述
distinguished_name req_distinguished_name 不用管，反正我没改
x509_extensions root_ca X.509证书的扩展项(我瞎说的)
countryName CN 国家缩写，必须是两个字母
countryName_min 2 就写2吧
countryName_max 2 也是2。。。
stateOrProvinceName ShanDong 所在省
localityName Ji Nan 所在市
0.organizationName TelChina 所在公司
organizationalUnitName GIS Engineer 职位
commonName localhost 自己的域名
commonName_max 64 我抄的
emailAddress kongbin0325@hotmail.com 邮箱
emailAddress_max 64 还是抄的
basicConstraints critical, CA:true 照着我的写就行！

注意：countryName和 commonName要特别注意，其他的都OK ！

第二个文件Localhost.ext:

1
2
3
4
5
subjectAltName = @alt_names
extendedKeyUsage = serverAuth

[alt_names]
DNS.1   = localhost

| 配置项 | 值 | 描述 |
| :— | :———- | :————- |
| subjectAltName | @alt_names | 不用管，反正我没改 |
| extendedKeyUsage | serverAuth | 不用管，反正我没改 |
| DNS.1 | localhost | 设置域名 |
| DNS.2 | 123.123.32.34 | 懂吧，可以设置多个域名（这个IP是我瞎写的） |

然后，在C:\OpenSSL-Win64\bin中打开cmd，准备执行上面三条语句。但是第一条语句就报了错，发现无法生成.cer和.req文件（估计是软件版本问题导致的），又是百度，又是谷歌，还是Stack Overflow的，消耗了不少时间。最后根据以下报错信息：

1
2
Subject does not start with "/"
Problems makeing certificate request

我尝试着将-subj参数删除，执行了一次，提示我输入Localhost.cnf文件中req_distinguished_name的配置项（按照提示重新输入一次就可以了）。以此执行如下：
1
$ openssl req -x509 -newkey rsa:2048 -out LocalhostCA.cer -outform PEM -keyout LocalhostCA.pvk -days 10000 -verbose -config LocalhostCA.cnf -nodes -sha256

同理，第二条语句也把-subj参数删除，执行过程中需要输入一些参数，最后执行成功。
1
$ openssl req -newkey rsa:2048 -keyout Localhost.pvk -out Localhost.req -sha256 -nodes

第三条语句没有-subj选项，直接执行即可：
1
$ openssl x509 -req -CA LocalhostCA.cer -CAkey LocalhostCA.pvk -in Localhost.req -out Localhost.cer -days 10000 -extfile Localhost.ext -sha256 -set_serial 0x1111

4.2 配置证书和Nginx

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# 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;  
    } 
}

4.3 重启Nginx

1
$ nginx -s reload

4.4 导入证书

在IE中打开Internet选项 -> 内容 -> 证书 -> 受信任的根证书颁发机构 -> 导入 -> LocalhostCA.cer。
尝试访问https://localhost/arcgis_js_api/library/4.6/init.js，在网址的左侧显示一个小绿锁则表示HTTPS配置成功，自此所有配置过程都已经完成。

如果有不明白的，欢迎留言或者给我 发邮件[Send Email]


全文重点来了！
1
2
3
4
// 值此3.8女神节，祝福所有的女性：
for (int i = 0; i < forever; i++) {
    printf("Happiness Everyday!");
}

关注公众号

当前网速较慢或者你使用的浏览器不支持博客特定功能，请尝试刷新或换用Chrome、Firefox等现代浏览器