Cloud Tools for Visual Studio をインストールして使用する

1. 概要

Visual Studio は、Windows と .NET のデベロッパーにとって頼りになる IDE です。Cloud Tools for Visual Studio は、Windows アプリケーションと .NET アプリケーションをローカルでビルドしてテストし、Visual Studio から Google Cloud Platform に直接デプロイするためのプラグインです。

Google Cloud Explorer を使用すると、Visual Studio 内のすべてのアカウントについて Google Cloud プロジェクトやリソースを簡単にブラウジングできます。

この Codelab では、Cloud Tools for Visual Studio をインストールして使用する方法と、Visual Studio から Google Cloud リソースを直接操作する方法について学びます。

学習内容

  • Cloud Tools for Visual Studio をインストールする方法。
  • Google Cloud Platform への認証方法。
  • Google Cloud Explorer を使用してリソースを管理する方法。
  • Google Compute Engine インスタンスを作成して管理する方法。
  • ASP.NET アプリを作成してデプロイする方法
  • Google Cloud Storage を参照する方法。

必要なもの

  • Google Cloud Platform プロジェクト。
  • ChromeFirefox などのブラウザ。
  • Visual Studio 2015 がインストールされている Windows マシン。
  • Windows 用 Google Cloud SDK がインストールされている。

このチュートリアルの利用方法をお選びください。

通読するのみ 内容を読んで演習を完了する

Google Cloud Platform のご利用経験について、いずれに該当されますか?

初心者 中級者 上級者

2. 設定と要件

この Codelab では、Visual Studio とやり取りするための Google Cloud Platform プロジェクトが必要です。既存のプロジェクトがある場合は、そのプロジェクトを使用するか、次の手順で新しいプロジェクトを作成できます。

セルフペース型の環境設定

Google アカウント(Gmail または G Suite)をお持ちでない場合は、アカウントを作成する必要があります。Google Cloud Console(console.cloud.google.com)にログインし、新しいプロジェクトを作成します。

aa2b71cbc7c28c59.png

60b154eb0fd9569a.png

プロジェクト ID を忘れないようにしてください。プロジェクト ID はすべての Google Cloud Platform プロジェクトを通じて一意の名前にする必要があります。以降、このコードラボでは PROJECT_ID と呼びます。

次に、Google Cloud Datastore や Cloud Storage などの Google Cloud Platform リソースを使用するために、Google Cloud コンソールで課金を有効にする必要があります。

Google Cloud Platform の新規ユーザーは、$300 の無料トライアルをご利用いただけます。この Codelab の操作をすべて行っても、費用は数ドル程度です。ただし、その他のリソースを使いたい場合や、実行したままにしておきたいステップがある場合は、追加コストがかかる可能性があります(このドキュメントの最後にある「クリーンアップ」セクションをご覧ください)。

3. インストール

Cloud Tools for Visual Studio は、Visual Studio ギャラリーから Visual Studio 内に直接インストールできます。Visual Studio を起動し、[ツール] メニューから [拡張機能と更新プログラム] を選択します。新しいウィンドウが開きます。左側の [オンライン] を選択し、[Visual Studio ギャラリー] を選択します。右側に [Search Visual Studio Gallery](Visual Studio ギャラリーを検索)というテキスト入力が表示されます。[Google Cloud] を見つけます。検索結果がいくつか表示されますが、Google Cloud Tools for Visual Studio が表示されます。

793794e10f2e6f68.png

[ダウンロード] をクリックします。プラグインがダウンロードされたら、[インストール] をクリックしてインストールします。インストールが完了したら、Visual Studio を再起動する必要があります。

すべてが正しくインストールされていることを確認するには、Visual Studio の [ツール] メニューに新しい [Google Cloud Tools] メニュー項目が表示されていることを確認します。

4. 認証

Cloud Tools for Visual Studio を使用する前に、Google Cloud Platform で認証を行う必要があります。[ツール] > [Google Cloud Tools] > [アカウントの管理] > [アカウントを追加] に移動します。

新しいブラウザ ウィンドウが開き、Google アカウントでログインできます。デフォルトのブラウザが設定されていない場合、「このウェブサイトをどのように開きますか?」というダイアログが表示されたままになることがあります。その場合は、Chrome を既定のブラウザに設定してから、もう一度お試しください。

次に、Cloud Tools for Visual Studio に Google Cloud Platform プロジェクトへのアクセス権を付与する必要があります。完了すると、[Visual Studio からアカウントにアクセスできるようになりました] というメッセージが表示されます。

ブラウザを閉じて Visual Studio に戻ることができます。[Google Cloud Tools > Manage Accounts] をもう一度確認してください。アカウントが一覧表示されます。

5. Google Cloud Explorer

認証が完了すると、Google Cloud Explorer を使用してリソースを管理できるようになります。Visual Studio で、[ツール] > [Google Cloud Tools] > [Google Cloud Explorer を表示] に移動します。

新しいウィンドウが開きます。上部で、Google Cloud Platform プロジェクトを選択します。中央には、Compute Engine、Cloud Storage、Cloud SQL のリソースが表示されます。

801c1722b560f407.png

次のセクションでは、Visual Studio から Compute Engine インスタンスを作成して管理する方法について説明します。

6. Google Compute Engine インスタンスの作成と管理

インスタンスを作成する

このセクションでは、ASP.NET Framework がインストールされた Windows マシンを Compute Engine にデプロイします。これを行うには、[Google Compute Engine] を右クリックし、[新しい ASP.NET インスタンス] を選択します。

ef78cea8bca7ff1e.png

Cloud Launcher が新しいブラウザ ウィンドウで開きます。プロンプトに従って、ASP.NET フレームワークで Windows インスタンスをデプロイします。デプロイが完了するまでに数分かかります。完了すると、Visual Studio と Google Cloud コンソールの両方で、Compute Engine インスタンスのリストに新しいインスタンスが表示されます。

Windows のユーザー名とパスワードを作成する

リモート デスクトップを使用して新しい仮想マシンに接続したり、発行設定ファイルを保存(デプロイ時に使用)したりするには、Windows のユーザー名とパスワードを作成する必要があります。新しく作成した Compute Engine インスタンス(「aspnet」で始まる)を右クリックし、[Manage Windows credentials] を選択します。

573d93972b3d6fff.png

次の画面で、Windows ユーザーとパスワードを作成できます(または、Visual Studio プラグインで自動生成することもできます)。「Google Cloud SDK のベータ版コンポーネントをインストールする必要があります」というエラーが表示された場合は、手順に沿ってベータ版コンポーネントをインストールしてから、ユーザーの作成に進みます。ユーザーを作成すると、ユーザーのリストに表示されます。

新しい Windows ユーザーでインスタンスに RDP 接続できることをテストするには、Compute Engine インスタンスをもう一度右クリックして [リモート デスクトップ セッションを開く] を選択し、プルダウン メニューから作成した Windows ユーザーを選択します。[Open]、[Connect] の順にクリックします。証明書に関する警告が表示された場合は、警告を無視して [はい] を選択して続行します。数秒後に、Compute Engine で実行されている Windows インスタンスへのリモート デスクトップ セッションが開きます。

6792760b1829ebd1.png

発行設定を保存

Visual Studio から Compute Engine インスタンスに対して実行できる操作は他にもあります。たとえば、ファイアウォール ルールの設定やインスタンスの停止などです。完全なリストを表示するには、インスタンスを右クリックします。

自分で確認することもできますが、公開設定ファイルを保存しておきましょう。[Save publishing settings] を選択し、Windows のユーザー名を選択してファイルをダウンロードします。このファイルは、このセクションでシンプルな ASP.NET アプリを Google Cloud Platform にデプロイするために使用します。

7. ASP.NET アプリを作成してデプロイする

Google Cloud Platform プロジェクト テンプレートから ASP.NET MVC アプリを作成する

Cloud Tools Visual Studio には、いくつかの Google Cloud Platform プロジェクト テンプレートが付属しています。このセクションでは、これらのテンプレートのいずれかを使用してシンプルな ASP.NET MVC アプリを作成し、以前に保存したパブリッシュ設定ファイルを使用して Google Cloud Platform にデプロイします。

まず、Visual Studio で [New > Project > Visual C# > Google Cloud Platform] に移動します。Google Cloud Platform テンプレートには、MVC 用と Web API 用の 2 つがあります。[Google ASP.NET 4 MVC] テンプレートを選択します。プロジェクト名、ソリューション名、場所を必要に応じて調整し、[OK] をクリックします。これにより、新しいソリューションと ASP.NET アプリのプロジェクトが作成されます。

アプリをローカルで実行する

アプリをローカルでテストするには、[デバッグ] > [デバッグの開始] に移動します。これにより、まず NuGet 依存関係がダウンロードされ、次にアプリがビルドされます。数秒後に、ローカルで実行されている MVC アプリを含むブラウザ ウィンドウがポップアップ表示されます。

6f264456e8038700.png

アプリが想定どおりに動作していることを確認したら、アプリを停止します(Shift+F5)。

Google Cloud にアプリをデプロイする

これで、アプリを Google Cloud Platform にデプロイする準備が整いました。プロジェクトを右クリックして、[公開] をクリックします。

8d230a4bbcc6aa44.png

公開ダイアログが開きます。公開ダイアログで、公開先として [インポート] を選択し、前にダウンロードした公開設定ファイルを指定します。

接続ダイアログが表示され、サーバー名やサイト名などが事前入力されています。[Validate Connection] をクリックして、接続が良好であることを確認します。しばらくすると、緑色の矢印が表示されます。

396613835acc065f.png

[次へ] をクリックし、[ファイル発行オプション] で [発行先の追加ファイルを削除する] がオンになっていることを確認します。

bb25fd89ffcca1e.png

[公開] をクリックします。これにより、アプリがビルドされ、Google Cloud に公開されます。最後に、[出力] ウィンドウに「Publish Succeeded」というメッセージが表示されます。

55a920a8ae2c44e.png

この時点で、Compute Engine インスタンスの外部 IP にアクセスして、デフォルトの MVC アプリを表示できます。最も簡単な方法は、[ツール] > [Google Cloud Tools] > [Google Cloud Explorer を表示] に移動し、Compute Engine インスタンスを右クリックして [ウェブサイトを開く] を選択することです。

b80e32136c037a0.png

8. Google Cloud Storage を参照する

この Codelab のパートでは、Cloud Storage バケットを作成し、そのバケットにランダムなファイルをアップロードしてから、Google Cloud Explorer を使用してそのバケットを参照します。

バケットを作成するには、Google Cloud コンソールに移動し、プロダクトのリストから [Storage] を選択します。

25f93c20933f0b87.png

[バケットの作成] を選択し、一意の名前を付けて [作成] をクリックします。バケットを作成したら、ファイルをアップロードして、ストレージ ブラウザで確認できます。

9912d408cdb51f31.png

Visual Studio に戻り、Google Cloud Explorer を開きます。左上の [更新] ボタンをクリックします。[Google Cloud Storage] に、新しいバケットが表示されます。バケットを右クリックして [Open on Cloud Platform Console] を選択すると、バケットを閲覧できます。

882ff1d836529d2d.png

9. 完了

この Codelab では、Visual Studio から Compute Engine インスタンスと Cloud Storage バケットを管理する方法を学びましたが、他にも多くの機能があります。Visual Studio から Cloud SQL リソースを管理することもできますが、これは読者の演習として残しておきます。詳しくは、以下の次のステップのリストをご覧ください。

学習した内容

  • Cloud Tools for Visual Studio をインストールする方法。
  • Google Cloud Platform への認証方法。
  • Google Cloud Explorer を使用してリソースを管理する方法。
  • Google Compute Engine インスタンスを作成して管理する方法。
  • ASP.NET アプリを作成してデプロイする方法
  • Google Cloud Storage を参照する方法。

次のステップ