ASP.NET MVC AdminLTEをbowerでインストールしてAzureにデプロイする方法

#やりたいこと
+ ASP.NET MVCでAdminLTEを使いたい
+ Azureで動かしたい
+ できたソース
+ https://github.com/shift-role/AdminLTE-MVC-Sample

#環境
+ Visual Studio 2017
+ 快適に作業できるスペックを持ったマシン


#Webプロジェクトを作ります
![image.png](https://qiita-image-store.s3.amazonaws.com/0/194634/497f6136-9cb6-e7aa-fcda-5fdac2b63df5.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/194634/4a0eafae-218f-93ab-258a-378078227509.png)

#bower.jsonの生成

1. コマンドプロンプトを起動し、作成したプロジェクトのフォルダに移動します

2. bower init と入力してEnterすると以下のようにいろいろ聞かれます
![image.png](https://qiita-image-store.s3.amazonaws.com/0/194634/bd545523-184c-c734-1208-7645dae5c217.png)

3. 日本人なのですべてYESで答えなくてはいけません。

##bower.jsonができました
ファイル右クリックでプロジェクトに含めましょう
![image.png](https://qiita-image-store.s3.amazonaws.com/0/194634/f3ac4cd2-2865-ec93-912f-56ce8f4cfe54.png)

##bower.jsonへ追記
```
  "dependencies": {
    "admin-lte": "v2.4.0"
  }
```
![image.png](https://qiita-image-store.s3.amazonaws.com/0/194634/5be02c09-33d6-fc49-5c69-6b1117ded149.png)


+ bower.jsonを保存すると自動的にダウンロードが始まります

![image.png](https://qiita-image-store.s3.amazonaws.com/0/194634/1855c044-ae90-9b87-6711-1247b1e58ace.png)

+ こんな感じでダウンロードされました

![image.png](https://qiita-image-store.s3.amazonaws.com/0/194634/6f019950-8b4d-1a43-0c0c-b78c964b4f20.png)

#AdminLTEの設定
##BundleConfig.csを編集します
```Csharp
using System.Web.Optimization;
using WebHelpers.Mvc5;

namespace WebApplication12
{
    public class BundleConfig
    {
        // For more information on bundling, visit https://go.microsoft.com/fwlink/?LinkId=301862
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new StyleBundle("~/Bundles/css")
                .Include("~/bower_components/bootstrap/dist/css/bootstrap.css", new CssRewriteUrlTransformAbsolute())
                .Include("~/bower_components/select2/dist/css/select2.css")
                .Include("~/bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker3.css")
                .Include("~/bower_components/font-awesome/css/font-awesome.css", new CssRewriteUrlTransformAbsolute())
                .Include("~/bower_components/admin-lte/plugins/iCheck/minimal/blue.css", new CssRewriteUrlTransformAbsolute())
                .Include("~/bower_components/admin-lte/dist/css/AdminLTE.css", new CssRewriteUrlTransformAbsolute())
                .Include("~/bower_components/admin-lte/dist/css/skins/skin-blue.css"));

            bundles.Add(new ScriptBundle("~/Bundles/js")
                .Include("~/bower_components/respond/dist/respond.src.js")
                .Include("~/Scripts/modernizr-*")
                .Include("~/bower_components/jquery/dist/jquery.js")
                .Include("~/bower_components/admin-lte/plugins/jQueryUI/jquery-ui.js")
                .Include("~/bower_components/bootstrap/dist/js/bootstrap.js")
                .Include("~/bower_components/fastclick/lib/fastclick.js")
                .Include("~/bower_components/jquery-slimscroll/jquery.slimscroll.js")
                .Include("~/bower_components/select2/dist/js/select2.full.js")
                .Include("~/bower_components/moment/moment.js")
                .Include("~/bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.js")
                .Include("~/bower_components/admin-lte/plugins/iCheck/icheck.js")
                .Include("~/bower_components/inputmask/dist/jquery.inputmask.bundle.js")
                .Include("~/bower_components/admin-lte/dist/js/adminlte.js")
                .Include("~/Scripts/app.js")
                .Include("~/Scripts/init.js"));
        }
    }
}
```

##nugetから以下パッケージをインストールします
+ WebHelpers.Mvc5
+ RouteJs.Mvc5

###Web.configに追記します
```
    <section name="routeJs" type="RouteJs.RouteJsConfigurationSection, RouteJs" />
```

##app.jsとinit.jsを追加します
https://github.com/shift-role/AdminLTE-MVC-Sample/tree/master/WebApplication12/Scripts

##_Layout.cshtmlを編集します
https://github.com/shift-role/AdminLTE-MVC-Sample/tree/master/WebApplication12/Views/Shared

##Views\Sharedに以下を追加します
+ _ControlSidebar.cshtml
+ _Header.cshtml
+ _Sidebar.cshtml

https://github.com/shift-role/AdminLTE-MVC-Sample/tree/master/WebApplication12/Views/Shared


#Azureへのデプロイ
##AzureでApp Serviceを作ります。
+ 方法は先人達に投稿頂いてますので省略します。
+ https://qiita.com/seigo/items/ca2f3590d99eb0a0ed42


##デプロイします
+ Visual Studioから発行します

難しくないはずなので省略

###動きません
http://webapplication1220171005035112.azurewebsites.net/
![image.png](https://qiita-image-store.s3.amazonaws.com/0/194634/be1d3325-73c8-e66a-6fa5-e977434f1c48.png)


## ここから重要
1. サイトURLに.scmを追加してブラウザで開きます
+ https://webapplication1220171005035112.scm.azurewebsites.net/
2. Kudoが表示されたら「Debug console」から「CMD」を開きます
3. site\wwwrootに移動します
4.![image.png](https://qiita-image-store.s3.amazonaws.com/0/194634/5bf7f9b4-5bfd-e9c5-796e-0a19579818c0.png)
5. bower installコマンドを実行します
6. ![image.png](https://qiita-image-store.s3.amazonaws.com/0/194634/f76b1ca2-3d4a-f1ca-ffa5-82b038cd3dff.png)
+ 割と時間掛かるのでトイレにでも行ってきます

##動きました
![image.png](https://qiita-image-store.s3.amazonaws.com/0/194634/c2b4ab6b-5796-464e-547a-fdd177947b68.png)