Deploy Next.js app on IIS

試作紀錄。on 2022-07-21。

前言

使用Next.js框架開發React是非常易用的,且全系統都是JavaScript/TypeScript少了語言轉換的煩噪。

比較大的問題在部署。若是部署到Linux 平台就簡單多了,搭配PM2arrow-up-right工具就行了。若是部署到Widows就要繞一大圈,官網沒有直接直達的方案,且不同時期的版本部版指令也可能不同,只能靠善心大佬協助補充了。研究了數天總結如下:

triangle-exclamation

將 Next.js app 部署在 Linux

若是部署到 Linux 平台就簡單多了,搭配PM2arrow-up-right工具就行了。

將 Next.js app 部署成 Windows Service

將 Next.js app 部署到 IIS server

如下面影片有完整流程:

deploy next js on iis web server

其它參考文件

開發環境

  • Visual Studio Code

  • Node.js平台 v16.14.0

  • next v12.1.6

  • react v17.0.2

關鍵步驟紀錄

一、建立的Next.js app。

二、轉換成Node.js Server。

Next.js app若要部署到windows,第一個步驟一定是轉換成 Node.js Server。此步驟將增加server.js檔案,這是 Node.js Server 執行的進入點。

Server.js 源碼紀錄

直接抄用即可,指令中指定啟動自sever.js,port number 預設3000。

package.json 源碼紀錄

並調整 npm run start 指令 script 從 next start 改成 node server.js。

三、準備IIS環境

在 IIS Server 執行 node.js app 需安裝

(1) 安裝 URL Rewrite

(2) 安裝 Node.js 平台

(3) 安裝 iisnode

這個比較麻煩,不同時期版本可能不用。本期安裝位置:

Installing for IIS 7.x/8.x

Hosting node.js applications in IIS on Windows

四、編寫 web.config

參考自這裡,只是多一行<add segment="node_modules"/>

此段直接抄用即可。

五、設定 IIS 網站。

這段沒有特別之處,一樣指定網站實體位置、port等即可。順利的話就能成功啟動了。

EOF

Last updated