Ćwiczenie — pisanie kodu w celu wdrożenia aplikacji internetowej

  • 5 min

W tej lekcji użyjesz narzędzi deweloperskich do utworzenia kodu dla początkowej aplikacji internetowej.

Tworzenie nowego projektu internetowego

Najważniejszym narzędziem interfejsu wiersza polecenia platformy .NET jest dotnet. Za pomocą tego polecenia utworzysz nowy projekt internetowy platformy ASP.NET Core.

Uruchom następujące polecenie, aby utworzyć nową aplikację ASP.NET Core Model-View Cotroller (MVC) o nazwie "BestBikeApp":

dotnet new mvc --name BestBikeApp

Polecenie tworzy nowy folder o nazwie "BestBikeApp" do przechowywania projektu.

Opcjonalne testowanie aplikacji internetowej

Aplikację można przetestować lokalnie na platformie Azure. Aby to zrobić, wykonaj następujące kroki:

  1. Uruchom następujące polecenia, aby skompilować i uruchomić aplikację internetową w tle:

    cd BestBikeApp
dotnet run &

    Powinny zostać wyświetlone dane wyjściowe podobne do następującego przykładu:

    [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

    W danych wyjściowych zanotuj wartości <numeru> procesu i< portu.>

  2. Uruchom następujące polecenie, aby przejść do aplikacji internetowej, zastępując <port portem> zanotowany w ostatnim kroku.

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

    Powinien zostać wyświetlony kod HTML kończący się następującymi wierszami:

    <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. Używając <zanotowany wcześniej numeru> procesu, zatrzymaj dotnet:

    kill <process-number>

Aby utworzyć początkową aplikację internetową, używamy programu Maven, powszechnie używanego narzędzia do zarządzania projektami i kompilowania dla aplikacji Java. Użyjemy szablonu maven-archetype-webapp do wygenerowania kodu dla naszej aplikacji internetowej.

  1. Uruchom następujące polecenia w usłudze Azure Cloud Shell, aby utworzyć nową aplikację internetową:

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

  2. Teraz uruchom następujące polecenia, aby przejść do nowego katalogu aplikacji „helloworld” i utworzyć pakiet aplikacji na potrzeby wdrożenia:

    cd helloworld
mvn package

  3. Po zakończeniu działania polecenia uruchom następujące polecenia, aby otworzyć katalog docelowy i wyświetlić jego zawartość:

    cd target
ls

Masz teraz plik o nazwie helloworld.war , który jest pakietem aplikacji internetowej, który zamierzamy wdrożyć w usłudze App Service.

Aby utworzyć początkową aplikację internetową Node.js, użyjemy środowiska Node Menedżer pakietów (npm) wraz z kodem JavaScript w celu uruchomienia rzeczywistego przetwarzania strony internetowej.

  1. Uruchom następujące polecenia w terminalu, aby utworzyć nowy package.json plik opisujący naszą aplikację Node.js:

    cd ~
mkdir helloworld
cd helloworld
cat >package.json <<EOL
{
  "name": "helloworld",
  "version": "1.0.0",
  "scripts": {
    "start": "node index.js"
  }
}
EOL

Nowy package.json plik zostanie utworzony w bieżącym folderze. Powinien on znajdować się w bieżącym folderze, jeśli zostanie wprowadzony ls w oknie terminalu. Do uruchomienia logiki witryny internetowej potrzebujemy pliku JavaScript. W tym podstawowym przykładzie potrzebujemy tylko jednego pliku: index.js.

  1. Utwórz plik, uruchamiając następujące polecenie w terminalu:

    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

Opcjonalne testowanie aplikacji internetowej

Uruchamiając aplikację internetową helloworld, możesz sprawdzić, czy działa lokalnie, otwierając drugą sesję powłoki poleceń.

  1. Na nowej karcie przeglądarki przejdź do adresu https://shell.azure.com/.

  2. W podstawowej sesji powłoki poleceń uruchom następujące polecenia, aby uruchomić aplikację internetową w tle:

    cd ~/helloworld
npm start &

    Powinny zostać wyświetlone dane wyjściowe podobne do następującego przykładu:

    [1] <process-number>
> helloworld@1.0.0 start
> node index.js

Server running at http://localhost:1337

    W danych wyjściowych zanotuj wartość parametru <process-number>.

  3. W tej samej sesji usługi Cloud Shell uruchom następujące polecenie, aby przejść do aplikacji internetowej.

    curl -kL http://localhost:1337/

    Powinny zostać wyświetlone następujące dane wyjściowe:

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

  4. Używając <zanotowany wcześniej numeru> procesu, zatrzymaj węzeł:

    kill <process-number>

Aby utworzyć początkową aplikację internetową, użyjemy platformy web-application platformy Flask.

  1. Uruchom następujące polecenia w usłudze Azure Cloud Shell, aby skonfigurować środowisko wirtualne i zainstalować platformę Flask w profilu:

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

  2. Uruchom następujące polecenia, aby utworzyć i przełączyć się do nowego katalogu aplikacji internetowej:

    mkdir ~/BestBikeApp
cd ~/BestBikeApp

  3. Utwórz nowy plik o nazwie application.py z podstawową odpowiedzią HTML:

    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

  4. Aby wdrożyć aplikację na platformie Azure, należy zapisać listę wymagań aplikacji wprowadzonych w pliku requirements.txt . W tym celu uruchom następujące polecenie:

    pip freeze > requirements.txt

Opcjonalne testowanie aplikacji internetowej

Aplikację można przetestować lokalnie na platformie Azure, gdy jest uruchomiona.

  1. Uruchom następujące polecenia, aby uruchomić aplikację internetową w tle:

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

    Powinny zostać wyświetlone dane wyjściowe podobne do następującego przykładu:

    [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

    W danych wyjściowych zanotuj wartość parametru <process-number>. Ponieważ proces jest uruchomiony w tle, nie można zamknąć przy użyciu CTRL+C. Należy zatrzymać go przy użyciu numeru procesu.

  2. Uruchom następujące polecenie, aby przejść do aplikacji internetowej.

    curl -kL http://localhost:5000/

    Powinny zostać wyświetlone następujące dane wyjściowe HTML:

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

  3. Korzystając z <zanotowanych wcześniej numerów> procesu, zatrzymaj platformę Flask:

    kill <process-number>