前へ

次へ

手順 - Web アプリケーションを実装するコードを記述する

完了

このユニットでは、開発者ツールを使用して、スターター Web アプリケーションのコードを作成します。

新しい Web プロジェクトを作成する

.NET CLI ツールの中心になるのは、dotnet コマンドライン ツールです。 このコマンドを使用して、新しい ASP.NET Core Web プロジェクトを作成します。

まず、dotnet の 8.0 バージョンを Cloud Shell にインストールしてみましょう。 この演習では、SDK バージョン 3.1.102 を使用します。

1. 右側で次のコマンドを実行して、dotnet 8.0 をダウンロードおよびインストールします。

   wget https://dot.net/v1/dotnet-install.sh -O dotnet-install.sh
   chmod +x ./dotnet-install.sh
   ./dotnet-install.sh --channel 8.0
   export PATH="~/.dotnet:$PATH"
   echo "export PATH=~/.dotnet:\$PATH" >> ~/.bashrc
   

2. 次に、次のコマンドを実行して、"BestBikeApp" という名前の新しい ASP.NET Core MVC アプリケーションを作成します。

   dotnet new mvc --name BestBikeApp
   

コマンドにより、自分のプロジェクトを保持するための "BestBikeApp" という名前の新しいフォルダーが作成されます。

必要に応じて Web アプリをテストする

新しいタブで https://shell.azure.com/ を参照して、2 番目のコマンド シェル セッションを開きます。アプリケーションを Azure 上でローカルにテストできます。 そのためには、次の手順を行ってください。

1. プライマリ コマンド シェル セッションから、次のコマンドを実行して Web アプリケーションをビルド、実行します。

   cd BestBikeApp
   dotnet run
   

   次のような出力が表示されます。

   warn: Microsoft.AspNetCore.DataProtection.KeyManagement.XmlKeyManager[35]
         No XML encryptor configured. Key {b4a2970c-215c-4eb2-92b4-c28d021158c6} may be persisted to storage in unencrypted form.
   info: Microsoft.Hosting.Lifetime[14]
         Now listening on: http://localhost:5022
   info: Microsoft.Hosting.Lifetime[0]
         Application started. Press Ctrl+C to shut down.
   info: Microsoft.Hosting.Lifetime[0]
         Hosting environment: Development
   info: Microsoft.Hosting.Lifetime[0]
         Content root path: /home/cephas_lin/BestBikeApp
   

   出力ではアプリ開始後の状況が説明されます。アプリケーションは実行され、ポート 5022 でリッスンしています。

2. 別の Cloud Shell セッションから、次のコマンドを実行して Web アプリケーションを参照します。

   curl -kL http://127.0.0.1:5000/
   

   次の行で終わる HTML が表示されるはずです。

   <div class="text-center">
       <h1 class="display-4">Welcome</h1>
       <p>Learn about <a href="https://learn.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
   </div>
   
           </main>
       </div>
   
       <footer b-b5g3qljvtd class="border-top footer text-muted">
           <div b-b5g3qljvtd class="container">
               &copy; 2024 - BestBikeApp - <a href="/Home/Privacy">Privacy</a>
           </div>
       </footer>
       <script src="/lib/jquery/dist/jquery.min.js"></script>
       <script src="/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
       <script src="/js/site.js?v=hRQyftXiu1lLX2P9Ly9xa4gHJgLeR1uGN5qegUobtGo"></script>
   
   </body>
   </html>
   

3. プライマリ コマンド シェル セッションで、Ctrl + C キーを押して Web アプリを終了します。

スターター Web アプリケーションを作成するには、Maven を使用します。これは、一般的に使用される、Java アプリ用のプロジェクト管理およびビルド ツールです。 maven-archetype-webapp テンプレートを使用して、Web アプリケーションのコードを作成します。

1. 次に Azure Cloud Shell で次のコマンドを実行して、新しい Web アプリを作成します。

   cd ~
   mvn archetype:generate -DgroupId=example.demo -DartifactId=helloworld -DinteractiveMode=false -DarchetypeArtifactId=maven-archetype-webapp -DarchetypeVersion=1.4
   

2. ここで、これらのコマンドを実行して、"helloworld" の新しいアプリケーション ディレクトリに変更し、デプロイ用にアプリケーションをパッケージ化します。

   cd helloworld
   mvn package
   

3. コマンドの実行が完了したら、次のコマンドを実行して "ターゲット" ディレクトリを開き、その内容を一覧表示します。

   cd target
   ls
   

helloworld.war という名前のファイルが表示されます。 これは、App Service にデプロイする Web アプリケーション パッケージです。

スターター Node.js Web アプリケーションを作成するには、Node Package Manager (npm) と共にいくつかの JavaScript コードを使用し、実際の Web ページ処理を実行します。

1. Azure Cloud Shell で次のコマンドを実行して、Node.js アプリケーションを記述する新しい package.json を作成します。

   cd ~
   mkdir helloworld
   cd helloworld
   npm init -y
   

これにより、現在のフォルダーに新しい package.json ファイルが作成されます。 ターミナル ウィンドウに ls と入力すると、現在のフォルダーにそれが表示されます。 Web サイト ロジックを実行するには JavaScript ファイルが必要です。 これは単に基本的な例なので、必要なファイルは index.js の 1 つだけです。

1. ターミナルで次のコマンドを実行して、ファイルを作成します。

   touch index.js
   

2. ここで、両方のファイルにいくつかの編集を加える必要があります。 ターミナルで次のコマンドを実行して、対話型エディターを開きます。

   code .
   

3. package.json ファイルを選択し、Node.js を使用して Web アプリを起動するように、scripts セクションに対して次の編集を行います。

   {
     "name": "helloworld",
     ...
     "scripts": {
       "start": "node index.js"
     },
     ...
   }
   

4. [...] メニューを選択するか、または Windows と Linux では Ctrl + S キー、macOS では Command + S キーを押してファイルを保存します。

   重要

   エディターでファイルを編集した場合は常に、その後にエディターの右上隅にある [...] メニューを選択するか、または Windows と Linux では Ctrl + S キー、macOS では Command + S キーを押して保存するようにしてください。 エディターを終了するには、Windows および Linux では Ctrl + Q キーを押し、MacOS では、エディターの右上隅をクリックし、[終了] を選択してください。

5. index.js ファイルに切り替えて、次のコンテンツを追加します。 これは、サーバーに対して GET 要求が行われるたびに "Hello World!" で応答する、小規模の Node.js プログラムです。

   const http = require('http');
   
   const server = http.createServer(function(request, response) {
       response.writeHead(200, { "Content-Type": "text/html" });
       response.end("<html><body><h1>Hello World!</h1></body></html>");
   });
   
   const port = process.env.PORT || 1337;
   server.listen(port);
   
   console.log(`Server running at http://localhost:${port}`);
   

6. ファイルを保存してエディターを終了するには、右上にある ... アイコンを選択し、コンテキスト メニューから [保存]、[エディターを閉じる] の順に選択します。または Windows と Linux ではアクセラレータ キー Ctrl + S および Ctrl + Q を使用します。

必要に応じて Web アプリをテストする

helloworld Web アプリを実行している間に、2 番目のコマンド シェル セッションを開いて、ローカルで実行されているのを確認できます。

1. 新しいブラウザー タブから https://shell.azure.com/ を参照します。

2. プライマリ コマンド シェル セッションから、次のコマンドを実行して Web アプリケーションを起動します。

   cd ~/helloworld
   npm start
   

3. 2 番目のコマンド シェル セッションから、次のコマンドを実行して Web アプリケーションを参照します。

   curl http://127.0.0.1:1337/
   

   次の出力が表示されます。

   <html><body><h1>Hello World!</h1></body></html>
   

4. プライマリ コマンド シェル セッションから、Ctrl + C キーを押して Web アプリを終了した後、2 番目のシェル セッション ブラウザー タブを閉じます。

スターター Web アプリケーションを作成するには、Flask Web アプリケーション フレームワークを使用します。

1. Azure Cloud Shell で次のコマンドを実行して仮想環境を設定し、自分のプロファイルに Flask をインストールします。

   python3 -m venv venv
   source venv/bin/activate
   pip install flask
   

2. 次のコマンドを実行して、新しい Web アプリ ディレクトリを作成して切り替えます。

   mkdir ~/BestBikeApp
   cd ~/BestBikeApp
   

3. Python 対話型エディターで application.py を開いて、Web アプリのための新しいファイルを作成します。

   code application.py
   

4. 次の Python コードをコピーして貼り付け、Web アプリの主な機能を作成します。

   from flask import Flask
   app = Flask(__name__)
   
   @app.route("/")
   def hello():
       return "<html><body><h1>Hello Best Bike App!</h1></body></html>\n"
   

5. ファイルを保存してエディターを終了するには、右上の [...] メニューを押して [保存]>[エディターを閉じる] の順に選択するか、Windows と Linux の場合は Ctrl + S の次に Ctrl + Qを押してください。

6. アプリケーションを Azure にデプロイするには、アプリケーションについて作成したアプリケーション要件のリストを requirements.txt ファイルに保存する必要があります。 これを行うには、次のコマンドを実行します。

   pip freeze > requirements.txt
   

必要に応じて Web アプリをテストする

アプリケーションは、それが実行されている間に Azure でローカルにテストできます。

1. 新しいブラウザー タブ https://shell.azure.com/ で 2 番目のコマンド シェル セッションを開きます。

2. プライマリ コマンド シェル セッション (右側) から、次のコマンドを実行して仮想環境をアクティブにします。

   cd ..
   source venv/bin/activate
   

3. プライマリ コマンド シェル セッション (右側にあります) から、次のコマンドを実行して Web アプリケーションを起動します。

   cd ~/BestBikeApp
   export FLASK_APP=application.py
   flask run
   

4. 2 番目のコマンド シェル セッションから、次のコマンドを実行して Web アプリケーションを参照します。

   curl http://127.0.0.1:5000/
   

   次の HTML 出力が表示されます。

   <html><body><h1>Hello Best Bike App!</h1></body></html>
   

5. プライマリ コマンド シェル セッションから、Ctrl + C キーを押して Web アプリを終了した後、セカンダリ Azure Cloud Shell を閉じます。

続行