49
57

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

.NETアプリケーションをMacで開発してAzureにデプロイする

Posted at

開発環境

OS: OS X Yosemite 10.10.5
Visual Studio: Visual Studio Code Version 0.10.11 (0.10.11)
nodejs: node-5.1.0
Yeoman: 1.7.0

.NET環境のインストール

ASP.NETのリポジトリを追加
$ brew tap aspnet/dnx

パッケージをアップデート
$ brew update

.NETバージョンマネージャ「dnvm」をインストール
$ brew install dnvm

起動スクリプトの設定

毎回、自動で読み込まれるように設定
$ echo source dnvm.sh >> ./bash_profile

.NETバージョンマネージャ「dnvm」の起動

dnvmの起動
$ dnvm
スクリーンショット 2016-03-24 13.57.06.png

最新の.NET frameworkに更新
$ dnvm upgrade

Node.jsとYeomanのインストール

nodejsのインストール
$ brew install node

npmで、Yeomanのインストール
$ npm install -g yo

npmで、ASP.NETのジェネレータをインストール
$ npm install -g generator-aspnet

YeomanでASP.NETのソースを生成

$ yo aspnet

? ==========================================================================
We're constantly looking for ways to make yo better! 
May we anonymously report usage statistics to improve the tool over time? 
More info: https://github.com/yeoman/insight & http://yeoman.io
========================================================================== Yes

     _-----_===========================
    |       |    .--------------------------.
    |--(o)--|    |      Welcome to the      |
   `---------´   |   marvellous ASP.NET 5   |
    ( _´U`_ )    |        generator!        |
    /___A___\    '--------------------------'
     |  ~  |     
   __'.___.'__   
 ´   `  |° ´ Y ` 
? What type of application do you want to create? Empty Application
? What's the name of your ASP.NET application? MyWebAPI
   create MyWebAPI/.gitignore
   create MyWebAPI/Startup.cs
   create MyWebAPI/project.json
   create MyWebAPI/Dockerfile
   create MyWebAPI/wwwroot/README.md
   create MyWebAPI/wwwroot/web.config

プログラムの実行

階層移動
$ cd MyWebAPI

dnuコマンドで、依存するDLLをnugetサーバーから取得
$ dnu restore

dnuコマンドで、ビルドを実行
$ dnu build

Visual Studio Codeをターミナルから呼び出せるようにする

.bash_profileに下記を追記する

.bash_profile
code () {
    if [[ $# = 0 ]]
    then
        open -a "Visual Studio Code"
    else
        [[ $1 = /* ]] && F="$1" || F="$PWD/${1#./}"
        open -a "Visual Studio Code" --args "$F"
    fi
}

ターミナル再起動後にプロジェクトのrootディレクトリに戻りVisual Studio Codeを起動する
$ code .

スクリーンショット 2016-03-29 9.00.14.png

ローカルでのプログラムの実行

Visual Studio Code上でCommand + shift + pによりコマンドパレットを起動する

dnxとコマンドして下記を選択
>dnx: Run Command

さらに下記を選択
>dnx web - (SampleWebApp)

ブラウザを開きhttp://localhost:5000/ にアクセスする
Hello World!と表示されていればローカルでの実行は成功です。

WebアプリをAzure上にデプロイする

Azureポータルにログインして『新規』 → 『Web + モバイル』 → 『Web App』を選択

スクリーンショット 2016-03-29 9.21.14.png

各項目を入力して作成ボタンを押す

新しい Web アプリの Git 発行の有効化

『参照』 → 『App Service』を選択

スクリーンショット 2016-03-29 9.34.49.png

先ほど作成したWebアプリを選択し、設定から『継続的なデプロイ』を選択

スクリーンショット 2016-03-29 9.36.54.png

『ソースの選択』 → 『ローカルGitリポジトリ』を選択

スクリーンショット 2016-03-29 9.38.56.png

『基本認証のセットアップ』を選択して各項目を入力してOKを押し設定を保存する

スクリーンショット 2016-03-29 9.40.51.png

設定 → 『デプロイ資格情報』を選択して各項目を入力して保存

スクリーンショット 2016-03-29 10.06.44.png

設定のプロパティを開き、GIT URLをコピーしておく

スクリーンショット 2016-03-29 9.48.19.png

Azure App Service への Web アプリの発行

VSCodeの左側のナビゲーションバーからGitオプションを選択する

スクリーンショット 2016-03-29 9.52.40.png

『initialize git repository』を選択してワークスペースが Git によるソース管理の対象になるように設定します。

image

ターミナルを開き、ディレクトリを Web アプリのディレクトリに変更します。次のコマンドを入力します。
git config core.autocrlf false
このコマンドは、末尾に CRLF と LF が含まれているテキストに関する問題を防ぎます。

VSCodeで、コミットメッセージを追加し、[すべてコミット] チェックアイコンをクリックします。

image

(".git" で終わる) Git URL を使用して、Web アプリに更新をプッシュするためのリモート参照を作成
git remote add azure [URL for remote repository]

資格情報をローカルに保存するようにGitを構成して、VSCodeから生成されるpushコマンドに資格情報が自動的に追加されるようにする
git config credential.helper store

次のコマンドを入力して、変更内容を Azure にプッシュする。
git push -u azure master

このAzureへの初回のpushを実行した後、VSCodeからすべてのpushコマンドを実行できる。

Azure でのアプリの実行

ブラウザを開いて http://[アプリ名].azurewebsites.net にアクセスする
Hello World!と表示されていればAzureでの実行は成功です。

参考

https://codezine.jp/article/detail/8859
https://azure.microsoft.com/ja-jp/documentation/articles/web-sites-create-web-app-using-vscode/

49
57
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
49
57

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?