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

1,309 6

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.exeC:\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.jsdojo.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等现代浏览器