nuxt SSR部署到iis7方案
nuxt SSR部署到iis7方案
當前演示環境：
1. 操作系統：win10 2. iis版本：iis7 3. node版本：nvm(1.1.9)安裝的node版本(14.18.2 x64)參考資料：
1. 資料 [nuxt發布到windows IIS部署（nuxt+node+pm2+iis）](https://blog.csdn.net/qq_24821757/article/details/113250704) 2. 資料 [Node.js 服務部署（pm2 詳細使用）](https://www.jianshu.com/p/f4e81412d4f2) 3. 資料 [pm2官方地址](https://pm2.keymetrics.io/) 4. 資料 [IIS Server Variables](https://docs.microsoft.com/en-us/previous-versions/iis/6.0-sdk/ms524602(v=vs.90)?redirectedfrom=MSDN) 5. 資料 [Using the URL Rewrite Module](https://docs.microsoft.com/en-us/iis/extensions/url-rewrite-module/using-the-url-rewrite-module) 6. 資料 [IIS安裝ARR(Application Request Router)反向代理插件](https://www.cnblogs.com/pengqf/p/9345624.html) 7. 資料 [IIS7.0+部署ARR負載均衡](https://blog.csdn.net/aoxi0033/article/details/101818133?spm=1001.2101.3001.6650.13&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-13.opensearchhbase&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-13.opensearchhbase)提示：如果操作過程中出現問題，請檢查是否是權限不足原因，可使用管理員身份執行
1. nuxt的發布
nuxt配置文件nuxt.config.js
{// 打包輸出目錄"buildDir": "nuxt-dist",// doc文檔head部分設置選項"head": {title: "網站標題",htmlAttrs: {"lang": "en"},bodyAttrs: {class: "body-box"},meta: [],link: []},// 全局css"css": [],// 全局插件"plugins": [],// 渲染選項render: {},// 構建選項build: {},// 其他... }項目根目錄執行打包命令：
npm run build執行打包命令后將會生成nuxt-dist文件夾，把nuxt-dist、static、nuxt.config.js、package.json、package-lock.json、assets（未改變配置選項，默認情況下）統一放入一個新建的文件夾nuxtapp，在nuxtapp目錄下執行命令，安裝需要的包
> npm inuxapp用于實際部署到生產環境
2. 服務器部署環境搭建
2.1 安裝node.js
安裝node.js的兩種方式：
? a. 官方地址下載 下載地址
? b. 使用windows下的多版本node切換軟件nvm，可以選擇exe下載方式 下載地址
? nvm常用命令:
// 查看目前已經安裝的版本 > nvm list // 顯示可下載版本的部分列表 > nvm list available // 安裝指定的版本的nodejs > nvm install [version] // 使用指定版本的nodejs > nvm use [version]查看node.js是否安裝成功命令
> node -v > npm -v安裝成功后，可設置npm全局安裝包的地址 npm中文文檔
npm常用命令
// 查看npm幫助文檔 > npm help // 查看npm當前版本 > npm -v // 安裝npm包命令 > npm i [npm包名] [-g全局安裝] [-S|--save安裝到生產環境] [-D|--save-d安裝到開發環境] // 設置npm淘寶鏡像，設置成功后可使用cnpm命令，cnpm命令不會改變npm的源，cnpm與npm使用方式相同 > npm install -g cnpm --registry=https://registry.npm.taobao.org // 修改npm的源代碼 > npm config set registry https://registry.npm.taobao.org // 查看源，可以看到設置過的所有的源 > npm config get registry // 修改npm配置文件，編輯 ~/.npmrc 加入下面內容 > registry = https://registry.npm.taobao.org // 查看全局包的安裝目錄 > npm root -g // 查看全局安裝過的包 ]> npm list -g --depth 02.2 安裝IIS7環境下的插件
a. ARR(Application Request Routing)點擊 下載地址
b. url-rewrite點擊 下載地址
安裝完成后會顯示在IIS里面
ARR是全局配置，URL重寫是每個站點都可以配置
2.3 安裝pm2(node.js進程守護)
pm2 官方地址
使用管理員啟動cmd，全局安裝pm2
> npm i pm2 -g設置pm2開機自啟動
a. 安裝pm2系統服務并配置，安裝完成后重啟服務器
> npm i pm2-windows-service -gb. 添加系統環境變量 PM2_HOME= C:\Users***.pm2 (具體路徑可用 pm2 -v 查看)
c. 使用管理員啟動cmd，執行以下命令
> pm2-service-install提示Perform environment setup ? 選 n, 繼續,此時, PM2服務已安裝成功并已啟動, 可以通過 [win + r] - [services.msc] 來查看，服務名稱為PM2 (參考文章Node.js 服務部署)
d. 安裝windows系統下的自啟動腳本
// 全局安裝pm2-windows-startup自啟動包 > pm install pm2-windows-startup -g // 生成window下開機自啟動腳本命令 > pm2-startup installe. ，在項目根目錄nuxtapp下安裝node-cmd，用于在node中執行cmd命令（也可以不安裝node-cmd，直接使用pm2 命令執行pacakge.js內的腳本，或使用其他方式，比如process.yml配置文件）
// 是否全局安裝視具體情況而定 > npm install node-cmd [-g]安裝成功后，在項目根目錄nuxtapp下創建一個啟動應用腳本（最好在nuxtapp根目錄統計創建，不過需要修改執行腳本內容，本處只是為了演示）
const cmd=require('node-cmd'); cmd.run('npm start');然后管理員身份執行cmd
> pm2 start start.js運行成功后，如果出現小黑框，請嘗試重啟服務器解決
當前部署目錄結構
3. nuxt網站運行正常之后，將其添加到開機啟動
查看當前托管運行的網站是否正常
> pm2 ls保存當前進程狀態，保存后可重啟服務執行pm2 ls查看是否保存成功
> pm2 save生成開機自啟動腳本
> pm2-startup install4. IIS發布網站
開啟ARR的Proxy反向代理功能
添加網站nodeapp
編輯綁定和基本設置
設置hosts文件
使用文本編輯器打開項目根目錄下nuxtapp的web.config文件（如果沒有就創建一個），編輯web站點，配置重寫規則，或者使用IIS7工具直接配置入站規則
<?xml version="1.0" encoding="UTF-8"?> <configuration><system.webServer><rewrite><rules><rule name="test"><match url="^(.*)" /><conditions><add input="{HTTP_HOST}" pattern="^www.nuxtapp.com$" /></conditions><action type="Rewrite" url="http://127.0.0.1:3000/{R:1}" /></rule></rules></rewrite></system.webServer> </configuration>完成以上步驟后，打開瀏覽器輸入www.nuxtapp.com，可查看iis是否發布成功
總結
以上是生活随笔為你收集整理的nuxt SSR部署到iis7方案的全部內容，希望文章能夠幫你解決所遇到的問題。
