ArcGIS JS API 4.x nginx部署 + WebStorm

看到最近 ArcGIS JS API 4.5 版本更新了, 需要更新一下之前的API所以記錄一下

必備資源

• 一個(gè)服務(wù)器, 什么騰訊云阿里云xx云的低配乞丐小機(jī)器都行
• 一個(gè)域名, 將服務(wù)器的ip綁定到域名中, 好記一點(diǎn)
• 基本的linux命令(劃掉) 發(fā)現(xiàn)這面板真是太方便了, 后期改文字 vim 都可以都不用了

服務(wù)器中安裝 nginx

我的服務(wù)器是 Linux Debian 8 64bit的, 為了省事, 直接裝一個(gè)一鍵包解決. 最近剛發(fā)現(xiàn)一個(gè)linux面板比較好用,叫寶塔面板,比我之前用的lnmp.org不知道高到哪里去了

• 首先登錄到服務(wù)器:
  我用的軟件是 Xshell
  
  image.png
• 打開(kāi)寶塔面板網(wǎng)站
  https://www.bt.cn/bbs/thread-1186-1-1.html

1. 按照教程首先配置服務(wù)器的安全組
2. 找對(duì)應(yīng)服務(wù)器的版本一鍵包就行我是 Debian 所以用
   wget -O install.sh http://download.bt.cn/install/install-ubuntu.sh && bash install.sh
   這個(gè)命令
   
   image.png

執(zhí)行完畢后會(huì)在Xshell上顯示面板地址, 一般為
http://your-ip:8888
以及用戶名 admin 及密碼 ******
我已經(jīng)安裝過(guò)就不上圖了

• 打開(kāi)面板地址并登錄
  然后點(diǎn)擊左上角的網(wǎng)站, 應(yīng)該會(huì)提示你安裝WEB服務(wù), 記得選 nginx就行.
  安裝過(guò)程有點(diǎn)慢, 先進(jìn)行下一步操作

  
  
  image.png

解析域名到服務(wù)器

• 打開(kāi)在域名商找到購(gòu)買的域名進(jìn)行域名解析

  
  
  image.png
  
  

  點(diǎn)擊添加記錄

  
  
  image.png

比如說(shuō)我的域名是 happygis.com
主機(jī)記錄填 api 的話解析的地址就是 api.happygis.com, 所以你想填啥就填啥, 隨意
記錄值填服務(wù)器 ip 地址就行

添加網(wǎng)站

• 打開(kāi)寶塔面板, 等Web服務(wù)器裝完之后點(diǎn)擊 添加站點(diǎn)
  
  image.png

• 域名填你剛才解析的域名就行
  ftp 按需添加, 數(shù)據(jù)庫(kù)不需要, php 也不需要

  
  
  image.png
  
  

  點(diǎn)擊提交即可

• 配置ssl
  點(diǎn)擊設(shè)置
  
  image.png
  
  SSL 選Let's Encrypt (當(dāng)然你也可以選其他的, 這里噴一下需要提交手持身份證照片才能用的寶塔SSL)
  
  image.png
  
  會(huì)讓你填一個(gè)郵箱地址, xjb寫(xiě)就行(可以不用寫(xiě)自己的)
  完了提交就行
  完成之后就可以去測(cè)試訪問(wèn)一下網(wǎng)站了
  訪問(wèn) http://api.happygis.com
  
  image.png
  
  會(huì)看到小綠鎖已經(jīng)有了, 就OK啦

配置默認(rèn)文檔

這一步比較關(guān)鍵, 因?yàn)锳rcGIS 的根目錄需要默認(rèn)打開(kāi)的是init.js 這個(gè)文件, 所以按圖上設(shè)置一下

image.png

配置API

去 ArcGIS網(wǎng)站 下載你需要的API版本
https://developers.arcgis.com/downloads/apis-and-sdks
下載到本地后打開(kāi)寶塔面板上傳上去

image.png

image.png

修改路徑

如果你以前部署過(guò), 應(yīng)該知道要改一下這個(gè)東西 [HOSTNAME_AND_PATH_TO_JSAPI]
現(xiàn)在要改文件的有 init.js 和 /dojo/dojo.js

image.png

改為你的地址即可

image.png

image.png

到現(xiàn)在就部署完成了

測(cè)試

如果你打開(kāi)是這樣的, 那基本就差不多了

image.png

趕緊試試

  <link rel="stylesheet" >
    <script src="https://api.happygis.com/4.5/"></script>

配合我的這篇文章 http://www.itdecent.cn/p/2f7ee6f93fb1
完美!

image.png

參考:
http://www.itdecent.cn/p/24488c6fbc30