VueのSPAをIISで動かすときの設定メモ

VueのSPAアプリをローカルのIISで動かしたときのメモ

参考(https://www.linkedin.com/pulse/hosting-vue-js-spa-build-microsoft-iis-zainul-zain/)

1.Vue JS SPAを 'npm run build'でビルド

2./distフォルダに出力されるのでIISで/distフォルダをwebサイトに設定

3./distフォルダに「web.config」を作成

web.config

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
      <rule name="DynamicRewriteCss" stopProcessing="true">
                <match url="^(.*)/js/(.*)\.js$" />
                <action type="Rewrite" url="js/{R:2}.js" />
            </rule>
      <rule name="DynamicRewriteJsMap" stopProcessing="true">
                <match url="^(.*)/js/(.*)\.js.map$" />
                <action type="Rewrite" url="js/{R:2}.js.map" />
            </rule>
      <rule name="DynamicRewriteJs" stopProcessing="true">
                <match url="^(.*)/css/(.*)\.css$" />
                <action type="Rewrite" url="css/{R:2}.css" />
            </rule>
        <rule name="Handle History Mode and custom 404/500" stopProcessing="true">
            <match url="(.*)" />
            <conditions logicalGrouping="MatchAll">
              <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
              <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
            </conditions>
          <action type="Rewrite" url="index.html" />
        </rule>
        
      </rules>
 
    </rewrite>

      <httpErrors>     
          <remove statusCode="404" subStatusCode="-1" />                
          <remove statusCode="500" subStatusCode="-1" />
          <error statusCode="404" path="/survey/notfound" responseMode="ExecuteURL" />                
          <error statusCode="500" path="/survey/error" responseMode="ExecuteURL" />
      </httpErrors>
      <modules runAllManagedModulesForAllRequests="true"/>
  </system.webServer>
</configuration>

4.IISのアプリケーションプールの設定で.NET CLR Versionをマネージドコードなしに変更

5.下記をインストール
　https://www.iis.net/downloads/microsoft/url-rewrite

6.IIS再起動

※IISがでエラーを吐いたら
　IISの機能の委任でハンドラーマッピングとモジュールを読み取り専用から書き込み権限も追加

おわり。