nuxt SSR部署到iis7方案

當(dāng)前演示環(huán)境：

1. 操作系統(tǒng)：win10 2. iis版本：iis7 3. node版本：nvm(1.1.9)安裝的node版本(14.18.2 x64)

參考資料：

1. 資料 [nuxt發(fā)布到windows IIS部署（nuxt+node+pm2+iis）](https://blog.csdn.net/qq_24821757/article/details/113250704) 2. 資料 [Node.js 服務(wù)部署（pm2 詳細(xì)使用）](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負(fù)載均衡](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)

提示：如果操作過程中出現(xiàn)問題，請(qǐng)檢查是否是權(quán)限不足原因，可使用管理員身份執(zhí)行

1. nuxt的發(fā)布

nuxt配置文件nuxt.config.js

{// 打包輸出目錄"buildDir": "nuxt-dist",// doc文檔head部分設(shè)置選項(xiàng)"head": {title: "網(wǎng)站標(biāo)題",htmlAttrs: {"lang": "en"},bodyAttrs: {class: "body-box"},meta: [],link: []},// 全局css"css": [],// 全局插件"plugins": [],// 渲染選項(xiàng)render: {},// 構(gòu)建選項(xiàng)build: {},// 其他... }

項(xiàng)目根目錄執(zhí)行打包命令：

npm run build

執(zhí)行打包命令后將會(huì)生成nuxt-dist文件夾，把nuxt-dist、static、nuxt.config.js、package.json、package-lock.json、assets（未改變配置選項(xiàng)，默認(rèn)情況下）統(tǒng)一放入一個(gè)新建的文件夾nuxtapp，在nuxtapp目錄下執(zhí)行命令，安裝需要的包

> npm i

nuxapp用于實(shí)際部署到生產(chǎn)環(huán)境

2. 服務(wù)器部署環(huán)境搭建

2.1 安裝node.js

安裝node.js的兩種方式：

? a. 官方地址下載 下載地址

? b. 使用windows下的多版本node切換軟件nvm，可以選擇exe下載方式 下載地址

? nvm常用命令:

// 查看目前已經(jīng)安裝的版本 > nvm list // 顯示可下載版本的部分列表 > nvm list available // 安裝指定的版本的nodejs > nvm install [version] // 使用指定版本的nodejs > nvm use [version]

查看node.js是否安裝成功命令

> node -v > npm -v

安裝成功后，可設(shè)置npm全局安裝包的地址 npm中文文檔

npm常用命令

// 查看npm幫助文檔 > npm help // 查看npm當(dāng)前版本 > npm -v // 安裝npm包命令 > npm i [npm包名] [-g全局安裝] [-S|--save安裝到生產(chǎn)環(huán)境] [-D|--save-d安裝到開發(fā)環(huán)境] // 設(shè)置npm淘寶鏡像，設(shè)置成功后可使用cnpm命令，cnpm命令不會(huì)改變npm的源，cnpm與npm使用方式相同 > npm install -g cnpm --registry=https://registry.npm.taobao.org // 修改npm的源代碼 > npm config set registry https://registry.npm.taobao.org // 查看源，可以看到設(shè)置過的所有的源 > npm config get registry // 修改npm配置文件，編輯 ~/.npmrc 加入下面內(nèi)容 > registry = https://registry.npm.taobao.org // 查看全局包的安裝目錄 > npm root -g // 查看全局安裝過的包 ]> npm list -g --depth 0

2.2 安裝IIS7環(huán)境下的插件

a. ARR(Application Request Routing)點(diǎn)擊 下載地址

b. url-rewrite點(diǎn)擊 下載地址

安裝完成后會(huì)顯示在IIS里面

ARR是全局配置，URL重寫是每個(gè)站點(diǎn)都可以配置

2.3 安裝pm2(node.js進(jìn)程守護(hù))

pm2 官方地址

使用管理員啟動(dòng)cmd，全局安裝pm2

> npm i pm2 -g

設(shè)置pm2開機(jī)自啟動(dòng)

a. 安裝pm2系統(tǒng)服務(wù)并配置，安裝完成后重啟服務(wù)器

> npm i pm2-windows-service -g

b. 添加系統(tǒng)環(huán)境變量 PM2_HOME= C:\Users***.pm2 (具體路徑可用 pm2 -v 查看)

c. 使用管理員啟動(dòng)cmd，執(zhí)行以下命令

> pm2-service-install

提示Perform environment setup ? 選 n, 繼續(xù),此時(shí), PM2服務(wù)已安裝成功并已啟動(dòng), 可以通過 [win + r] - [services.msc] 來查看，服務(wù)名稱為PM2 (參考文章Node.js 服務(wù)部署)

d. 安裝windows系統(tǒng)下的自啟動(dòng)腳本

// 全局安裝pm2-windows-startup自啟動(dòng)包 > pm install pm2-windows-startup -g // 生成window下開機(jī)自啟動(dòng)腳本命令 > pm2-startup install

e. ，在項(xiàng)目根目錄nuxtapp下安裝node-cmd，用于在node中執(zhí)行cmd命令（也可以不安裝node-cmd，直接使用pm2 命令執(zhí)行pacakge.js內(nèi)的腳本，或使用其他方式，比如process.yml配置文件）

// 是否全局安裝視具體情況而定 > npm install node-cmd [-g]

安裝成功后，在項(xiàng)目根目錄nuxtapp下創(chuàng)建一個(gè)啟動(dòng)應(yīng)用腳本（最好在nuxtapp根目錄統(tǒng)計(jì)創(chuàng)建，不過需要修改執(zhí)行腳本內(nèi)容，本處只是為了演示）

const cmd=require('node-cmd'); cmd.run('npm start');

然后管理員身份執(zhí)行cmd

> pm2 start start.js

運(yùn)行成功后，如果出現(xiàn)小黑框，請(qǐng)嘗試重啟服務(wù)器解決

當(dāng)前部署目錄結(jié)構(gòu)

3. nuxt網(wǎng)站運(yùn)行正常之后，將其添加到開機(jī)啟動(dòng)

查看當(dāng)前托管運(yùn)行的網(wǎng)站是否正常

> pm2 ls

保存當(dāng)前進(jìn)程狀態(tài)，保存后可重啟服務(wù)執(zhí)行pm2 ls查看是否保存成功

> pm2 save

生成開機(jī)自啟動(dòng)腳本

> pm2-startup install

4. IIS發(fā)布網(wǎng)站

開啟ARR的Proxy反向代理功能

添加網(wǎng)站nodeapp

編輯綁定和基本設(shè)置

設(shè)置hosts文件

使用文本編輯器打開項(xiàng)目根目錄下nuxtapp的web.config文件（如果沒有就創(chuàng)建一個(gè)），編輯web站點(diǎn)，配置重寫規(guī)則，或者使用IIS7工具直接配置入站規(guī)則

<?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是否發(fā)布成功

總結(jié)

以上是生活随笔為你收集整理的nuxt SSR部署到iis7方案的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。