后端.net core 3.1 前端vue-element-admin IIS部署教程


系統環境:Windows service 2012 x64 Web服務器IIS 8.5

軟件環境:.net core 3.1,nodejs version 12.16.3,vue version 2.9.6

說明:所有下載地址適用於windows service 2012 x64系統,在下載安裝之前請確認你操作系統版本。

1、首先你需要安裝.net core 3.1 SDK。下載地址

2、安裝ISS的AspNetCoreHosting模塊。下載地址

3、安裝nodejs並配置nodejs環境

a) 安裝nodejs。下載地址

b) 配置nodejs環境,安裝完成后將nodejs安裝位置添加PATH系統環境變量,右鍵我的電腦選擇屬性-高級系統設置-高級-環境變量-系統變量-將nodejs安裝路勁添加到PATH變量中。

clip_image002

c) 配置及檢測

進入cmd命令行操作輸入node -v 或node -version檢查是否輸出版本號

clip_image004

4、安裝配置npm

a) 新版nodejs已經集成npm,你可以通過npm -v來檢測是否安裝成功

b) 自定義npm全局路徑

我們要先配置npm的全局模塊的存放路徑以及cache的路徑,例如我希望將以上兩個文件夾放在NodeJS的主目錄下,便在NodeJs下建立node_global及node_cache兩個文件夾。如下圖

clip_image006

啟動cmd,輸入以下兩條命令,成功后之后通過npm全局安裝的包都會存放到node_global文件夾下,后續查找包較方便。

1. npm config set prefix "C:\Program Files\nodejs\node_global"

2. npm config set cache "C:\Program Files\nodejs\node_cache"

測試一下,安裝一個vue-cli 包,輸入npm install -g vue-cli命令,安裝成功后會提示已安裝到C:\Program Files\nodejs\node_cache文件夾中。

npm的全局路徑配置完成了,現在開始配置系統環境變量

· 打開系統對話框,“我的電腦”右鍵“屬性”-“高級系統設置”-“高級”-“環境變量”。

· 進入環境變量對話框,在 系統變量 下新建NODE_PATH,輸入C:\Program Files\nodejs\node_global\node_modules

· 由於改變了modules的默認地址,所以上面的用戶變量都要跟着改變一下(用戶變量 PATH的值修改為C:\Program Files\nodejs\node_global\),要不然使用module的時候會導致輸入命令出現xxx不是內部或外部命令,也不是可運行的程序或批處理文件這個錯誤。

· 因為這里配置的環境變量涉及全局,所以配置完成后需要 重啟計算機

5、安裝配置Vue和Vue Cli

1、 npm install -g @vue/cli 

2、 npm install vue 

3、 vue --version 

clip_image008

6、安裝配置IIS反向代理

a) 安裝URL Rewrite。下載地址

b) 安裝Application Request Routing(ARR)。下載地址

c) 也可通過Microsoft Web Platform Installer安裝(Web平台安裝程序)。下載地址

clip_image010

啟用ARR:打開ARR,然后在右側對其啟用(使用默認設置即可)

clip_image012

配置 URL重寫,對URL進行過濾,將不同的訪問請求(根據URL(DNS中的配置)進行過濾)定向到相應的站點

clip_image014

該設置表明只有HTTP_HOST為la80.ddv.com的URL才能通過該規則,如果綁定了多個域名,可以根據多次增加或者通過正則表達式的 | 來間隔{R:1}表示了Match Url 中的第一個匹配括號

clip_image015

通過配置web.config文件,也可以實現 URL重寫,如下:

1. <rewrite> 

2. <rules> 

3. <rule name="phpweb"> 

4. <match url="^(.*)" /> 

5. <conditions> 

6. <add input="{HTTP_HOST}" pattern="^phpweb.leven.com.cn$" /> 

7. </conditions> 

8. <action type="Rewrite" url="http://localhost:8081/{R:1}" /> 

9. </rule> 

10. </rules> 

11. </rewrite> 

ARR安裝完成后,如果在IIS里面看不到ARR圖標,解決方法如下:

1.分別通過如下命令打開 IIS管理器,查看有無ARR圖標:

1. %windir%\System32\inetsrv\iis.msc 

2. %windir%\system32\inetsrv\InetMgr.exe 

2.通過PS腳本檢查ARR是否安裝成功:

1. $dll=[System.Reflection.Assembly]::LoadWithPartialName("Microsoft.Web.Administration") 

2. #Get the manager and config object

3. $mgr = new-object Microsoft.Web.Administration.ServerManager 

4. $conf = $mgr.GetApplicationHostConfiguration() 

5. #Get the webFarms section

6. $section = $conf.GetSection("webFarms") 

7. $section 

在運行vue項目過程中可能會出現node-sass安裝失敗的問題,我是重新安裝了一遍就可以了,其余的可以參考這篇文章(點擊查看

另外還存在sockjs-node/info報錯的問題,我的方案是注釋modules中的代碼

可參考這篇文章(點擊查看

相關參考:

1. https://www.runoob.com/nodejs/nodejs-install-setup.html(Node.js 安裝配置)

2. https://juejin.im/post/5a92b735f265da4e761fea22(nodejs、npm 環境配置步驟)

3. https://www.williamlong.info/archives/5353.html(反向代理)

4. https://www.jb51.net/article/74436.htm(反向代理圖文)

5. https://www.cnblogs.com/dreamer-fish/p/3911953.html(反向代理圖文)

6. https://lzw.me/a/node-sass-install-helper.html (node-sass安裝失敗的解決方案)

7. https://www.jianshu.com/p/147083b647ef (vue運行項目sockjs-node/info報錯)


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM