Deploy Next.js 14 on IIS

部署 Next.js app 到 IIS,

前言

之前在試用 Next.js 12 版時有紀錄如何部署到 IIS。

現在試用 Next.js 14 版時又發現新的部署 IIS 程序。程序上有所差異整體概念是相同的。

參考原文

原文寫的很清楚。除了環境參數部份沒有效果。還是很有參考價值。

Deploy Next.js 14 app on IIS
Deploy Next.js 12 app on IIS

以下為部署紀錄。

開發環境

IDE: Visual Studio Code React: v18 Next.js: v14.1.4

目標環境

Windows 11 IIS 10

前置安裝工作

安裝 node.js

安裝 IIS

安裝 iisnode 到 IIS

安裝 URL Rewrite 到 IIS

部署準備工作

預計部署目標網站放到 D:\WebHome\NextJs14Lab 目錄下。

在目標目錄放置三個檔案:

server.js : node server 進入點。

web.config : IIS 網站進入點。IIS 由此進入並轉執行 server.js

package.json : 安裝執行 server.js 需要的套件。

這三個檔案內容如下,基本上複製過去就能直接使用。

Server.js

web.config

package.json

別忘了執行 npm install 安裝套件。

執行 release 建置

在你在 Next.js 14 專案檔執行 release 建置,建置結果放在 .next 目錄。

.next 目錄整個複製到目的目錄。

手動複製 public 公開資源

建置好的.next 目錄中並不包含 public 公開資源。這目錄要自己手動複製。

手動複製 .env 環境參數

.env.env.production.env.local 複製到目標目錄。

部署完成檔案目錄

.next 目錄整個複製到目的目錄,完成後檔案目錄如下:


關於 next.config.mjs 組態檔

在此案例的 Next.js 組態檔只用預設值就能滿足了。並不需要參考原文要求的加入設定。不過先留存下來。


關於環境參數

circle-exclamation
circle-exclamation

如圖,next.js 在 bundle 時就把環境參數依權重 .env.local > .env.production > .env 合併了。

下圖在 next.js 專案目錄的 .env 環境參數檔放置位置。

.env 位置

沒圖沒真象

(EOF)

Last updated