Nuxt.js

Nuxt3をIISで動かす Windows10 + Nuxt3.8.2

公開日:2023-11-28 更新日:2023-12-13

今回はかなりメモ的ですが、Nuxt3プロジェクトをWindowsIISにホストする方法について書きました。

環境

  • Windows 10 Home 22H2
  • Node.js v18.15.0
  • Nuxt 3.8.2

手順

以下のサイトよりHttpPlatformHandler v1.2をインストールします。

https://www.iis.net/downloads/microsoft/httpplatformhandler

Nuxt3プロジェクトの開始

wwwroot配下にnuxtディレクトリを作成します。

cd C:\inetpub\wwwroot
mkdir nuxt

Nuxtプロジェクトを開始します。プロジェクト名はtestiisとしました。

cd nuxt
npx nuxi@latest init testiis

iis_handlerをpresetに指定してビルドします。

cd testiis
npx nuxi build --preset=iis_handler

.outputディレクトリにアプリがbuildされます。

web.configがこのように出力されていることを確認します。

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <handlers>
      <add name="httpPlatformHandler" path="*" verb="*" modules="httpPlatformHandler" resourceType="Unspecified" requireAccess="Script" />
    </handlers>
    <httpPlatform stdoutLogEnabled="true" stdoutLogFile=".\logs\node.log" startupTimeLimit="20" processPath="C:\Program Files\nodejs\node.exe" arguments=".\server\index.mjs">
      <environmentVariables>
        <environmentVariable name="PORT" value="%HTTP_PLATFORM_PORT%" />
        <environmentVariable name="NODE_ENV" value="Production" />
      </environmentVariables>
    </httpPlatform>
  </system.webServer>
</configuration>

IISの設定

Webサイトの追加をします。

物理パスは先ほどbuildした.outputディレクトリを指定します。

ポートはデフォルトは80ですが、空いている番号を適当に指定します。私は83にしました。

これで指定したポートで配信されていることを確認します。

http://localhost:83/

私は83番を指定したので、このようなURLになりました。

Nuxt Welcomeが表示されていることを確認します。

参考

Nitro-Deployment-IIS

https://nitro.unjs.io/deploy/providers/iis

Twitter Share