手順 - Web アプリケーションを実装するコードを記述する
このユニットでは、開発者ツールを使用して、スターター Web アプリケーションのコードを作成します。
新しい Web プロジェクトを作成する
.NET CLI ツールの中心になるのは、dotnet
コマンドライン ツールです。 このコマンドを使用して、新しい ASP.NET Core Web プロジェクトを作成します。
まず、dotnet
の 8.0 バージョンを Cloud Shell にインストールしてみましょう。 この演習では、SDK バージョン 3.1.102 を使用しています。
Azure Cloud Shell ウィンドウで次のコマンドを実行して、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
次に、次のコマンドを実行して、"BestBikeApp" という名前の新しい ASP.NET Core モデルビュー コントローラー (MVC) アプリケーションを作成します。
dotnet new mvc --name BestBikeApp
このコマンドにより、自分のプロジェクトを保持するための "BestBikeApp" という名前の新しいフォルダーが作成されます。
必要に応じて Web アプリをテストする
新しいタブで https://shell.azure.com/ を参照して、2 番目のコマンド シェル セッションを開きます。アプリケーションを Azure 上でローカルにテストできます。 そのためには、次の手順を行ってください。
プライマリ コマンド シェル セッションから、次のコマンドを実行してバックグラウンドで Web アプリケーションをビルドして実行します。
cd BestBikeApp dotnet run &
次の例のような出力が表示されます。
[1] 1275 <username> [ ~/BestBikeApp ]$ Building... 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:5176 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
出力には、アプリを起動した後の状況が示されています。 前の例では、アプリケーションはポート 5176 で実行され、リッスンしており、プロセス番号は 1275 です。 アプリケーションの実行元であり、出力からリッスンしているポートを書き留めます。
同じ Cloud Shell セッションで次のコマンドを実行して、Web アプリケーションを参照し、5000 を最後の手順で書き留めたポートに置き換えます。 次に例を示します。
curl -kL http://localhost:5176/
次の行で終わる HTML が表示されるはずです。
<div class="text-center"> <h1 class="display-4">Welcome</h1> <p>Learn about <a href="https://video2.skills-academy.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"> © 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>
前の出力のプロセス番号を使用して、dotnet を停止します。 前の出力例から:
kill 1275
スターター Web アプリケーションを作成するには、Maven を使用します。これは、一般的に使用される、Java アプリ用のプロジェクト管理およびビルド ツールです。 maven-archetype-webapp
テンプレートを使用して、Web アプリケーションのコードを作成します。
次に Azure Cloud Shell で次のコマンドを実行して、新しい Web アプリを作成します。
cd ~ mvn archetype:generate -DgroupId=example.demo -DartifactId=helloworld -DinteractiveMode=false -DarchetypeArtifactId=maven-archetype-webapp -DarchetypeVersion=1.5
ここで、これらのコマンドを実行して、"helloworld" の新しいアプリケーション ディレクトリに変更し、デプロイ用にアプリケーションをパッケージ化します。
cd helloworld mvn package
コマンドの実行が完了したら、次のコマンドを実行して "ターゲット" ディレクトリを開き、その内容を一覧表示します。
cd target ls
これで、App Service にデプロイする Web アプリケーション パッケージである helloworld.war
という名前のファイルが作成されました。
スターター Node.js Web アプリケーションを作成するには、Node Package Manager (npm
) と共にいくつかの JavaScript コードを使用し、実際の Web ページ処理を実行します。
ターミナルで次のコマンドを実行して、Node.js アプリケーションについて説明する新しい
package.json
ファイルを作成します。cd ~ mkdir helloworld cd helloworld npm init -y
現在のフォルダーに新しい package.json
ファイルが作成されます。 ターミナル ウィンドウに ls
と入力すると、現在のフォルダーにそれが表示されます。 Web サイト ロジックを実行するには JavaScript ファイルが必要です。 この基本的な例では、1 つのファイル (index.js
) のみが必要です。
ターミナルで次のコマンドを実行して、ファイルを作成します。
touch index.js
ここで、両方のファイルにいくつかの編集を加える必要があります。 対話型のエディターを開くには、ターミナルで次のコマンドを実行します。
code .
Node.js を使用して Web アプリを起動するには、
package.json
ファイルを選択し、次のようにscripts
セクションを編集します。{ "name": "helloworld", ... "scripts": { "start": "node index.js" }, ... }
[...] メニューを選択するか、または Windows と Linux では Ctrl + S キー、macOS では Command + S キーを押してファイルを保存します。
重要
エディターでファイルを編集した場合は常に、その後にエディターの右上隅にある [...] メニューを選択するか、または Windows と Linux では Ctrl + S キー、macOS では Command + S キーを押して保存するようにしてください。 エディターを終了するには、Windows および Linux では Ctrl + Q キーを押し、MacOS では、エディターの右上隅をクリックし、[終了] を選択してください。
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}`);
ファイルを保存してエディターを終了するには、右上にある ... アイコンを選択し、コンテキスト メニューから [保存]、[エディターを閉じる] の順に選択します。または Windows と Linux ではアクセラレータ キー Ctrl + S および Ctrl + Q を使用します。
必要に応じて Web アプリをテストする
helloworld Web アプリを実行している間に、2 番目のコマンド シェル セッションを開いて、ローカルで実行されているのを確認できます。
新しいブラウザー タブから https://shell.azure.com/ を参照します。
プライマリ コマンド シェル セッションから、次のコマンドを実行して Web アプリケーションを起動します。
cd ~/helloworld npm start
2 番目のコマンド シェル セッションから、次のコマンドを実行して Web アプリケーションを参照します。
curl http://127.0.0.1:1337/
次の出力が表示されます。
<html><body><h1>Hello World!</h1></body></html>
プライマリ コマンド シェル セッションから、Ctrl + C キーを押して Web アプリを終了した後、2 番目のシェル セッション ブラウザー タブを閉じます。
スターター Web アプリケーションを作成するには、Flask Web アプリケーション フレームワークを使用します。
Azure Cloud Shell で次のコマンドを実行して仮想環境を設定し、自分のプロファイルに Flask をインストールします。
python3 -m venv venv source venv/bin/activate pip install flask
次のコマンドを実行して、新しい Web アプリ ディレクトリを作成して切り替えます。
mkdir ~/BestBikeApp cd ~/BestBikeApp
Python 対話型エディターで application.py を開いて、Web アプリのための新しいファイルを作成します。
code application.py
次の 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"
ファイルを保存してエディターを終了するには、右上の [...] メニューを押して [保存]>[エディターを閉じる] の順に選択するか、Windows と Linux の場合は Ctrl + S の次に Ctrl + Qを押してください。
アプリケーションを Azure にデプロイするには、アプリケーションについて作成したアプリケーション要件のリストを requirements.txt ファイルに保存する必要があります。 これを行うには、次のコマンドを実行します。
pip freeze > requirements.txt
必要に応じて Web アプリをテストする
アプリケーションは、それが実行されている間に Azure でローカルにテストできます。
新しいブラウザー タブ https://shell.azure.com/ で 2 番目のコマンド シェル セッションを開きます。
プライマリ コマンド シェル セッション (右側のウィンドウ) から、次のコマンドを実行して仮想環境をアクティブにします。
cd .. source venv/bin/activate
プライマリ コマンド シェル セッション (右側のウィンドウ) から、次のコマンドを実行して Web アプリケーションを起動します。
cd ~/BestBikeApp export FLASK_APP=application.py flask run
2 番目のコマンド シェル セッションから、次のコマンドを実行して Web アプリケーションを参照します。
curl http://127.0.0.1:5000/
次の HTML 出力が表示されます。
<html><body><h1>Hello Best Bike App!</h1></body></html>
プライマリ コマンド シェル セッションから、Ctrl + C キーを押して Web アプリを終了した後、セカンダリ Azure Cloud Shell を閉じます。