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)」を選択
> ![01_プロジェクト作成.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2850619/8a0eba04-7712-7292-3366-4ea5d1407188.png)

##### プロジェクトを修正

> あとで、Vue 3.xでのサンプルを作成するので、今回作成したものが、Vue 2.xのサンプルであることが分かるように、ソースコード「vue_v2\src\App.vue」を一部修正しておく。
> ～ ハイライト部分を追記
> ![02_編集.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2850619/72ac6fac-3047-38ef-9240-6f4ededd1dbf.png)

##### 動作確認

> 正しく動作していることを確認する。まず、プロジェクトフォルダに移動して、```npm run serve```で開発用WEBサーバが起動する。
> ![03_起動.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2850619/035a9aa7-2da5-0d27-91b3-02b0ad6856b1.png)
> ![04_起動後.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2850619/ca5e8a6e-2d3d-2447-80ab-f6d0ac22f2c1.png)
> 
> 次に、ブラウザを起動し```http://127.0.0.1:8080/```にアクセスして、動作していることを確認する（127.0.0.1は、自身を表すIPアドレス）。
> ![05_起動確認.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2850619/0a5b0f5a-2f79-9e1b-a19f-a42a3a16babd.png)
>
> 動作確認後、開発用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```を修正する。
> ～ ハイライト部分を追記
> ![21_編集.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2850619/d57d9fd3-1c9c-03f8-1f01-44c465b00255.png)

##### Vue 3.x側の設定

> Vue 2.xと同じように、```vue_v3\vue.config.js```を修正する。
> ～ ハイライト部分を追記
> ![22_編集.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2850619/6482a620-79b4-6676-06e7-cbff6baa7b9d.png)

##### 動作確認

> この設定によって、開発用WEBサーバを起動した際に、ブラウザでアクセスするアクセス先は、``http://127.0.0.1:8080/vue_v2/`` (Vue 2.xの場合) に変わるので注意。
> ![23_起動時.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2850619/52ab505d-ad5b-8505-3348-f2d3fc78a15b.png)

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

##### Vue 2.x側のビルド

> プロジェクトディレクトリに移動し、``npm run build``でビルドする。ビルド後、ディレクトリ「dist」が作成される。
> ![31_ビルド.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2850619/aee52fbc-6bcb-1c77-ef6e-a8e86215061c.png)
>
> (ビルド結果)
> ![32_ビルド結果.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2850619/613a7759-3143-16b3-b2b7-9fabe7c3f217.png)
>
> (ビルド後ディレクトリ)
> ![33_ビルド後フォルダ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2850619/5d5d6a59-dd87-869c-90b2-84739689cd85.png)


##### Vue 3.x側のビルド

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


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

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

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

>「アプリケーションプール」を右クリックし、「アプリケーションプールの追加」を選ぶ。
> ![42_IIS.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2850619/949f7e9a-a5f5-84ca-cc4e-4443543cb51f.png)
> 
> 「名前」に識別しやすい名称（ここではVue 2.x用として、vue_v2）を入力し、「.Net CLRバージョン」でマネージコードなしを選択して、［OK］を押す。
> ![43_アプリケーションプール.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2850619/1fa82975-2964-e154-675d-9d9a29d86236.png)
> 
> 同じように、Vue 3.x用のアプリケーションプールも作成しておく（ここでは、vue_v3）。

##### アプリケーションの追加

> 「サイト」の中の「Default Web Site」を右クリックし、「アプリケーションの追加」を選ぶ。
> ![44_アプリケーション.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2850619/6bf445e9-51c6-e789-3ab5-aee16f907999.png)
> 
> まず、Vue 2.x用のアプリケーションを追加する。エイリアスに「vue_v2」を入力する（ここは、vue.config.jsで設定したpublicPathと同じパスを入力する。先頭の「/」は不要。というか、入力できない）。アプリケーションプールでは、作成したアプリケーションプールを選択する。物理パスでは、ビルドで作成したdistディレクトリを選択する。項目入力後、［OK］を押す。
> ![44_アプリケーション追加.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2850619/2243e458-9be7-5c87-d3b1-06df1ddbd7ba.png)
> 
> Vue 3.x用のアプリケーションも同様に追加する。

# 動作確認

##### Vue 2.x側の確認

> ブラウザで``http://127.0.0.1/vue_v2/``にアクセスし、正しく表示されることを確認する。
> ![51_できた1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2850619/bd7b187a-834b-2447-0e1a-7fa3435037ec.png)


##### Vue 3.x側の確認

> ブラウザで``http://127.0.0.1/vue_v3/``にアクセスし、正しく表示されることを確認する。
> ![52_できた2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2850619/fa95b3f6-fbd7-34e8-e45b-a63dddbcc140.png)