Vue/CliをIISにデプロイ

やりたいこと

• Vue/Cliで作ったものをIIS上で動かす
• ついでに、Vue 2.xとVue 3.xで作ったものを、両方動かす

必要な手順だけに絞って、なるべくシンプルに整理してみた。

前提条件

• Windows10に、IISがインストールされていること
• Windows10に、Node、Vue/Cliがインストールされていること

手順

• Vueのサンプルを作成
• 基点ディレクトリを設定
• Vueのプロジェクトをビルド
• IISにVueのプロジェクトをデプロイ

Vueのサンプルを作成

プロジェクトを作成

まずは、Vue 2.xでサンプルを作成する。
> vue create vue_v2
～ 選択肢で「Default ([Vue 2] babel, eslint)」を選択

プロジェクトを修正

あとで、Vue 3.xでのサンプルを作成するので、今回作成したものが、Vue 2.xのサンプルであることが分かるように、ソースコード「vue_v2\src\App.vue」を一部修正しておく。
～ ハイライト部分を追記

動作確認

正しく動作していることを確認する。まず、プロジェクトフォルダに移動して、npm run serveで開発用WEBサーバが起動する。

次に、ブラウザを起動しhttp://127.0.0.1:8080/にアクセスして、動作していることを確認する（127.0.0.1は、自身を表すIPアドレス）。

動作確認後、開発用WEBサーバは、Ctrl + Cで強制終了させる。

同じように、Vue 3.xでサンプルを作成し、動作確認する。Vue 2.xの開発用WEBサーバとVue 3.xの開発用WEBサーバは、そのままでは同時に起動できないので、Vue 3.xでのサンプルの動作確認をするときは、Vue 2.x側を強制終了して停止させておくこと。

ディレクトリ構成

ここまでで、以下のディレクトリが作成されているハズ（一部省略して記載）。

Z:\
└ vue_work
  ├ vue_v2
  │ ├ node_modules
  │ ├ public
  │ ├ src
  │ │ ├ assets
  │ │ ├ components
  │ │ ├ App.vue          ... 修正した
  │ │ └ main.js
  │ ├ babel.config.js
  │ ├ jsconfig.json
  │ ├ package.json
  │ ├ package-lock.json
  │ ├ README.md
  │ └ vue.config.js
  └ vue_v3
    ├ node_modules
    ├ public
    ├ src
    │ ├ assets
    │ ├ components
    │ ├ App.vue          ... 修正した
    │ └ main.js
    ├ babel.config.js
    ├ jsconfig.json
    ├ package.json
    ├ package-lock.json
    ├ README.md
    └ vue.config.js

基点ディレクトリの設定

最終的に http://x.x.x.x/vue_v2/にアクセスするとVue 2.x側に繋がり、http://x.x.x.x/vue_v3/にアクセスするとVue 3.x側に繋がるという環境を作りたい。そのために、基点となるディレクトリを設定する。

Vue 2.x側の設定

vue_v2\vue.config.jsを修正する。
～ ハイライト部分を追記

Vue 3.x側の設定

Vue 2.xと同じように、vue_v3\vue.config.jsを修正する。
～ ハイライト部分を追記

動作確認

この設定によって、開発用WEBサーバを起動した際に、ブラウザでアクセスするアクセス先は、http://127.0.0.1:8080/vue_v2/ (Vue 2.xの場合) に変わるので注意。

Vueのプロジェクトをビルド

Vue 2.x側のビルド

プロジェクトディレクトリに移動し、npm run buildでビルドする。ビルド後、ディレクトリ「dist」が作成される。

(ビルド結果)

(ビルド後ディレクトリ)

Vue 3.x側のビルド

Vue 2.xと同様に、Vue 3.x側もビルドする。

IISにVueのプロジェクトをデプロイ

「インターネット インフォメーション サービス(IIS) マネージャ」を起動する。

アプリケーションプールの作成

「アプリケーションプール」を右クリックし、「アプリケーションプールの追加」を選ぶ。

「名前」に識別しやすい名称（ここではVue 2.x用として、vue_v2）を入力し、「.Net CLRバージョン」でマネージコードなしを選択して、［OK］を押す。

同じように、Vue 3.x用のアプリケーションプールも作成しておく（ここでは、vue_v3）。

アプリケーションの追加

「サイト」の中の「Default Web Site」を右クリックし、「アプリケーションの追加」を選ぶ。

まず、Vue 2.x用のアプリケーションを追加する。エイリアスに「vue_v2」を入力する（ここは、vue.config.jsで設定したpublicPathと同じパスを入力する。先頭の「/」は不要。というか、入力できない）。アプリケーションプールでは、作成したアプリケーションプールを選択する。物理パスでは、ビルドで作成したdistディレクトリを選択する。項目入力後、［OK］を押す。

Vue 3.x用のアプリケーションも同様に追加する。

動作確認

Vue 2.x側の確認

ブラウザでhttp://127.0.0.1/vue_v2/にアクセスし、正しく表示されることを確認する。

Vue 3.x側の確認

ブラウザでhttp://127.0.0.1/vue_v3/にアクセスし、正しく表示されることを確認する。