要將 Node.js 網站部署到 Azure Web App (Windows) 其實有點竅門，一般不熟悉 Windows / IIS 的開發人員要想把手邊的 Node.js 部署到 Azure Web App 通常都會卡關卡好久。這篇文章我就來說說我是如何將我最近翻譯的提示工程指南網站部署到 Azure Web App 的，而這是一個用 Next.js 開發的網站！
以下有幾點注意事項：
-
網站根目錄要有個 package.json 檔案，而且要寫好 npm start 可以啟動網站的腳本！
以我的網站為例，我的設定值如下：
{
...
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
...
}
-
你必須安裝 express 套件
npm install express
-
你必須新增一個 server.js 檔案，並透過 express 轉送 HTTP 要求給 Next.js
這裡的另一個重點是 process.env.PORT 環境變數，因為要在 Azure Web App 跑 Node.js 必須是動態決定的 Port 埠號，並且透過 PORT 環境變數傳入。這一點也是初學者經常卡關的地方！
const express = require('express')
const next = require('next')
const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()
// Your app will get the Azure port from the process.enc.PORT
const port = process.env.PORT || 3000;
app
.prepare()
.then(() => {
const server = express()
server.get('*', (req, res) => {
return handle(req, res)
})
server.listen(port, err => {
if (err) throw err
console.log('> Ready on http://localhost:3000')
})
})
.catch(ex => {
console.error(ex.stack)
process.exit(1)
})
-
你必須新增一個 web.config 檔案
最後這個步驟也是最關鍵的，因為大多數 Node.js 開發者並不熟悉 web.config 這個 IIS 設定檔，所以也是另一個卡關的環節。
這裡不用想太多，你不太需要知道 iisnode 模組要怎麼用，把以下內容完整複製貼上即可：
<?xml version="1.0" encoding="utf-8"?>
<!--
This configuration file is required if iisnode is used to run node processes behind
IIS or IIS Express. For more information, visit:
<https://github.com/tjanczuk/iisnode/blob/master/src/samples/configuration/web.config>
-->
<configuration>
<system.webServer>
<!-- Visit <http://blogs.msdn.com/b/windowsazure/archive/2013/11/14/introduction-to-websockets-on-windows-azure-web-sites.aspx> for more information on WebSocket support -->
<webSocket enabled="false" />
<handlers>
<!-- Indicates that the server.js file is a node.js site to be handled by the iisnode module -->
<add name="iisnode" path="server.js" verb="*" modules="iisnode"/>
</handlers>
<rewrite>
<rules>
<!-- Do not interfere with requests for node-inspector debugging -->
<rule name="NodeInspector" patternSyntax="ECMAScript" stopProcessing="true">
<match url="^server.js\\/debug[\\/]?" />
</rule>
<!-- First we consider whether the incoming URL matches a physical file in the /public folder -->
<rule name="StaticContent">
<action type="Rewrite" url="public{REQUEST_URI}"/>
</rule>
<!-- All other URLs are mapped to the node.js site entry point -->
<rule name="DynamicContent">
<conditions>
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="True"/>
</conditions>
<action type="Rewrite" url="server.js"/>
</rule>
</rules>
</rewrite>
<!-- 'bin' directory has no special meaning in node.js and apps can be placed in it -->
<security>
<requestFiltering>
<hiddenSegments>
<remove segment="bin"/>
</hiddenSegments>
</requestFiltering>
</security>
<!-- Make sure error responses are left untouched -->
<httpErrors existingResponse="PassThrough" />
<!--
You can control how Node is hosted within IIS using the following options:
* watchedFiles: semi-colon separated list of files that will be watched for changes to restart the server
* node_env: will be propagated to node as NODE_ENV environment variable
* debuggingEnabled - controls whether the built-in debugger is enabled
See <https://github.com/tjanczuk/iisnode/blob/master/src/samples/configuration/web.config> for a full list of options
-->
<iisnode watchedFiles="web.config;*.js"/>
</system.webServer>
</configuration>
如此一來就部署成功啦！👍
總結
總結的來說，要在 Azure Web App (Windows) 部署 Node.js 應用程式，大概有以下幾個要點：
-
一定要有個 web.config 設定檔，設定好 iisnode 模組與 URL Rewrite 才能跑。
-
網站根目錄要有個 package.json 檔案，而且要寫好 npm start 可以啟動網站的腳本！
-
需要一個啟動程式 (server.js)，並且要指定 process.env.PORT 為主要 LISTEN 的埠號(Port)。
如果像是 Next.js 這種找不到 server.js 啟動程式的架構，就需要自定義一個 server.js 啟動程式，可選用 express 做入口，將要求轉送 next 來處理。
相關連結