Deploy Next.js 14 on IIS

部署 Next.js app 到 IIS,

前言

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

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

參考原文

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

Deploying NextJS App with Next-Auth on IISMedium

Deploy Next.js 14 app on IIS

Deploy Next.js app on IIS | 取之於網路 - GitBook2 | 取之於網路 用之於網路rely-ky.gitbook.io

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

server.js

const { createServer } = require('http')
const { parse } = require('url')
const next = require('next')

const dev = process.env.NODE_ENV !== 'production'
const port = process.env.PORT || 3000;
const app = next({ dev })
const handle = app.getRequestHandler()

app.prepare().then(() => {
  createServer((req, res) => {
    // Be sure to pass `true` as the second argument to `url.parse`.
    // This tells it to parse the query portion of the URL.
    const parsedUrl = parse(req.url, true)
    const { pathname, query } = parsedUrl

    if (pathname === '/a') {
      app.render(req, res, '/a', query)
    } else if (pathname === '/b') {
      app.render(req, res, '/b', query)
    } else {
      handle(req, res, parsedUrl)
    }
  }).listen(port, (err) => {
    if (err) throw err
    console.log(`> Ready on http://localhost:${port}`)
  })
})j

web.config

web.config

<!-- § 用於部署到 IIS 10 -->
<configuration>
 <appSettings>
  <!--
  All appSettings are made available to your Node.js app via environment 
  variables
  You can access them in your app through the process.env object.            
  process.env.<key>
  <add key="NEXTAUTH_URL" value="http://localhost:8017" />
  <add key="NEXTAUTH_SECRET" value="my_ultra_secure_nextauth_secret" />
  總之環境參數統一由 .env 或 .env.production 送入。
  -->
 </appSettings>
 <system.webServer>
  <iisnode node_env="production"
                 nodeProcessCountPerApplication="1"
                 maxConcurrentRequestsPerProcess="1024"
                 maxNamedPipeConnectionRetry="100"
                 namedPipeConnectionRetryDelay="250"
                 maxNamedPipeConnectionPoolSize="512"
                 maxNamedPipePooledConnectionAge="30000"
                 asyncCompletionThreadCount="0"
                 initialRequestBufferSize="4096"
                 maxRequestBufferSize="65536"
                 uncFileChangesPollingInterval="5000"
                 gracefulShutdownTimeout="60000"
                 loggingEnabled="true"
                 logDirectory="iisnode"
                 debuggingEnabled="true"
                 debugHeaderEnabled="false"
                 debuggerPortRange="5058-6058"
                 debuggerPathSegment="debug"
                 maxLogFileSizeInKB="128"
                 maxTotalLogFileSizeInKB="1024"
                 maxLogFiles="20"
                 devErrorsEnabled="true"
                 flushResponse="false"
                 enableXFF="false"
                 promoteServerVars=""
                 configOverrides="iisnode.yml"
                 watchedFiles="web.config;*.js"
    nodeProcessCommandLine="&quot;C:\Program Files\nodejs\node.exe&quot;" 
    interceptor="&quot;%programfiles%\iisnode\interceptor.js&quot;"
                />
  <handlers>
   <add name="iisnode" path="server.js" verb="*" modules="iisnode"/>
  </handlers>
  <rewrite>
   <rules>
    <rule name="myapp">
     <match url="/*" />
     <action type="Rewrite" url="server.js" />
    </rule>
   </rules>
  </rewrite>
  <directoryBrowse enabled="false"/>
 </system.webServer>
</configuration>

package.json

package.json

{
  "name": "next-js-14-lab",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "14.1.4",
    "react": "^18"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "eslint": "^8",
    "eslint-config-next": "14.1.4",
    "typescript": "^5"
  }
}

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

執行 release 建置

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

> npm run build

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

手動複製 public 公開資源

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

手動複製 .env 環境參數

把 .env 或 .env.production，.env.local 複製到目標目錄。

部署完成檔案目錄

把 .next 目錄整個複製到目的目錄，完成後檔案目錄如下：

---

關於 next.config.mjs 組態檔

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

next.config.mjs

/** @type {import('next').NextConfig} */
const nextConfig = {
  /// This file is used to configure Next.js, and get used by the Next.js server
  /// and build phases, but it’s not included in the browser build.
  /// It can be used to configure rewrites, redirects, custom headers, 
  /// environment variables etc.
  
  //experimental: {
  //  serverActions: true,
  //},
  //reactStrictMode: true,
  //swcMinify: true,
};

export default nextConfig;

---

關於環境參數

支援 .env、.env.production、.env.local 等標準的 node.js 環境參數組織方法，但要注意這些環境參數在 bundle 時就寫死固定了。

再部署到 IIS 測試時，.env 的環境可以併入了，不過要重新啟動網站才會生效。

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

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

.env 位置

---

沒圖沒真象

(EOF)