如何使用 IIS 部署 Nuxt

Question

我想在 IIS 中部署 Nuxt 我正在使用 IIS 節點，但我無法讓它工作...文件夾

我可以在我的服務器中使用 npm run start 來完成它，但是我有其他項目，比如 admin y api (.net)，它使用端口 80，所以當我使用端口 80 時它很忙，而在 IIS 中它使用這個結構文件夾IIS

這是我在 web.config 中的代碼

<?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="nuxt.config.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="^nuxt.config.js\/debug[\/]?" />
        </rule>

        <!-- <rule name="Redirect to https" stopProcessing="true">
          <match url="(.*)"/>
          <conditions>
            <add input="{HTTPS}" pattern="Off"/>
            <add input="{REQUEST_METHOD}" pattern="^get$|^head$" />
          </conditions>
          <action type="Redirect" url="https://{HTTP_HOST}/{R:1}"/>
        </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="nuxt.config.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>

在我擁有帶 express 的 server.js 之前忽略 nuxt.config.js 但它不起作用，因為我使用的是 ES6，並且當它嘗試運行 nuxt.config 時出現語法錯誤

Answer 1

1）確保安裝節點。

https://nodejs.org/en/download/

2）使用以下命令創建 nutx 應用程序：

npm init nuxt-app testnu

3）進入應用程序文件夾並運行以下命令來構建站點：

npm run generate

此命令將在您的應用程序文件夾中生成 dist 文件夾。

4）在IIS中創建站點，將dist文件夾路徑指向站點路徑，並分配站點綁定信息。

5）不要忘記將iis_iusrs和iusr權限分配給站點文件夾。（我的情況是站點文件夾是testnu）

6）更改后刷新並重新啟動站點並瀏覽站點。

Answer 2

問題是您絕對必須使用 server.js 文件來運行 node.js 服務器。 語法錯誤可能是在 config.js 中的 export 上，可以通過將export default { ...更改為module.exports = { ...輕松修復

您的 server.js 文件應如下所示：

const express = require('express');
const consola = require('consola');
const { Nuxt, Builder } = require('nuxt');
const app = express();

const config = require('./nuxt.config.js');
config.dev = process.env.NODE_ENV !== 'production';

async function start() {
  const nuxt = new Nuxt(config);
  const { host, port } = nuxt.options.server;

  if (config.dev) {
    const builder = new Builder(nuxt);
    await builder.build();
  } else {
    await nuxt.ready();
  }

  app.use(nuxt.render);

  app.listen(port, host);
  consola.ready({
    message: `Server listening on http://${host}:${port}`,
    badge: true
  });
}

start();

該文件與nuxt.config.js處於同一級別（當您選擇 express 作為自定義服務器框架時，請隨意將其移動到server/index.js ，就像nuxt-create-app所做的那樣，並將配置導入更改為const config = require('../nuxt.config.js'); ）。

並且不要忘記將重寫規則和 iisnode 模塊的路徑更改為web.config中的 server.js 文件。

如果您想在生產模式下運行它，您還需要將<iisnode node_env="development" />添加到您的web.config中。

還可以考慮為每個環境添加一個單獨的配置文件，然后在package.json中你可以像這樣切換它們：

  "scripts": {
    "dev": "nuxt",
    "build-local": "nuxt build",
    "build-dev": "nuxt build --config-file nuxt.config.dev.js",
    "build": "nuxt build --config-file nuxt.config.prod.js",
    "start": "nuxt start",
    "generate": "nuxt generate"
  }

然后像npm run build-dev或yarn build-dev那樣構建。

Answer 3

嘗試使用 IIS 托管任何類型的 Javascript SPA 或節點應用程序的人都應該知道 URL 重寫。 就像下面的例子一樣。 我已經嘗試過使用靜態反應、角度、nextjs SPA。

https://gist.github.com/maxan/0d124ed677ebe41e1aeaf4a9e1e6aa45

Answer 4

操作說明：

1.添加或安裝IIS

1.a)打開“打開或關閉Windows功能” ，然后找到“Internet信息服務”

2.b)從“Internet 信息服務” > “萬維網服務”檢查除“CGI”以外的所有項目

3.c)單擊確定按鈕並重新啟動系統

2.安裝IISNode （如果您的系統上不存在，請下載並安裝）

3.Install Url Rewrite （如果您的系統上不存在，請下載並安裝）

4.將nuxt.config.js文件的第一行從export default {改為module.exports = {

5.在你的項目中運行命令npm install nuxt-start

6.安裝express => npm install express

7.將Server文件夾和web.config文件復制到你項目路徑的根目錄下

8.構建你的 nuxt 應用 => npm run build

IIS使用說明：

1.添加網站

2.設置名稱 將物理路徑更改為項目的根目錄

3.輸入自定義端口，如“3000”，然后單擊“確定”按鈕

3.單擊應用程序池（在“站點”旁邊的IIS窗口左窗格中）然后右鍵單擊“您的網站池”，然后右鍵單擊它並選擇高級設置

4.將身份更改為“LocalSystem”，然后單擊“確定”按鈕

注意：如果您有任何錯誤，請打開項目根目錄下的 iisnode 文件夾以查看日志。