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

5 分

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

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

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

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

dotnet new mvc --name BestBikeApp

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

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

アプリケーションを Azure でローカルにテストすることができます。そのためには、次の手順を行ってください。

次のコマンドを実行して、バックグラウンドで Web アプリケーションをビルドして実行します。

cd BestBikeApp
dotnet run &

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

[1] <process-number>
<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:<port>
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

出力で、<process-number> と <port> の値を記録しておきます。

次のコマンドを実行して、Web アプリケーションを参照します。<port> は、最後のステップで記録したポートに置き換えます。

curl -kL http://localhost:<port>/

次の行で終わる 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>

前に記録した <process-number> を使って、dotnet を停止します。
```
kill <process-number>
```

スターター 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
cat >package.json <<EOL
{
  "name": "helloworld",
  "version": "1.0.0",
  "scripts": {
    "start": "node index.js"
  }
}
EOL
```

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

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

cat >index.js <<EOL
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}\`);
EOL

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

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

新しいブラウザータブから https://shell.azure.com/ を参照します。
プライマリコマンドシェルセッションから次のコマンドを実行して、バックグラウンドで Web アプリケーションを開始します。
```
cd ~/helloworld
npm start &
```
次の例のような出力が表示されます。
```
[1] <process-number>
> helloworld@1.0.0 start
> node index.js

Server running at http://localhost:1337
```
出力で、<process-number> の値を記録しておきます。
同じ Cloud Shell セッションで、次のコマンドを実行して Web アプリケーションを参照します。
```
curl -kL http://localhost:1337/
```
次の出力が表示されます。
```
<html><body><h1>Hello World!</h1></body></html>
```
前に記録した <process-number> を使って、ノードを停止します。
```
kill <process-number>
```

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

Azure Cloud Shell で次のコマンドを実行して仮想環境を設定し、自分のプロファイルに Flask をインストールします。
```
python3 -m venv venv
source venv/bin/activate
pip install flask
```
次のコマンドを実行して、新しい Web アプリディレクトリを作成して切り替えます。
```
mkdir ~/BestBikeApp
cd ~/BestBikeApp
```

基本的な HTML 応答を含む application.py という名前の新しいファイルを作成します。

cat >application.py <<EOL
from flask import Flask
app = Flask(__name__)

@app.route("/")
def hello():
    return "<html><body><h1>Hello Best Bike App!</h1></body></html>\n"
EOL

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

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

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

次のコマンドを実行して、バックグラウンドで Web アプリケーションを開始します。
```
cd ~/BestBikeApp
export FLASK_APP=application.py
flask run &
```
次の例のような出力が表示されます。
```
[1] <process-number>
 * Serving Flask app 'application.py'
 * Debug mode: off
WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
 * Running on http://127.0.0.1:5000
Press CTRL+C to quit
```
出力で、<process-number> の値を記録しておきます。プロセスはバックグラウンドで実行されているため、Ctrl + C キーで終了することはできません。プロセス番号を使って停止する必要があります。
次のコマンドを実行して、Web アプリケーションを参照します。
```
curl -kL http://localhost:5000/
```
次の HTML 出力が表示されます。
```
<html><body><h1>Hello Best Bike App!</h1></body></html>
```
前に記録した <process-number> を使って、Flask を停止します。
```
kill <process-number>
```

続行

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

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

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

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

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

フィードバック