연습 - 웹 애플리케이션을 구현하는 코드 작성 - Training

5분

이 단원에서는 개발자 도구를 사용하여 시작 웹 애플리케이션용 코드를 만듭니다.

새 웹 프로젝트 만들기

.NET CLI 도구의 핵심은 dotnet 명령줄 도구입니다. 이 명령을 사용하여 새 ASP.NET Core 웹 프로젝트를 만듭니다.

먼저 Cloud Shell에 적절한 dotnet 버전을 설치합니다. 이 연습에서는 SDK 버전 3.1.102를 사용합니다.

오른쪽에 있는 Azure Cloud Shell에서 다음 명령을 실행하여 dotnet을 다운로드하고 설치합니다.

wget -q -O - https://dotnet.microsoft.com/download/dotnet/scripts/v1/dotnet-install.sh | bash -s -- --version 6.0.404
export PATH="~/.dotnet:$PATH"
echo "export PATH=~/.dotnet:\$PATH" >> ~/.bashrc

다음으로, 다음 명령을 실행하여 “BestBikeApp”이라는 새 ASP.NET Core MVC 애플리케이션을 만듭니다.
```
dotnet new mvc --name BestBikeApp
```

이 명령은 “BestBikeApp”이라는 새 폴더를 만들어서 프로젝트를 보관합니다.

선택적으로 웹앱 테스트하기

새 탭에서 https://shell.azure.com/으로 이동하여 두 번째 명령 셸 세션을 엽니다. Azure에서 애플리케이션을 로컬로 테스트할 수 있습니다. 이렇게 하려면 다음 단계를 수행합니다.

기본 명령 셸 세션에서 다음 명령을 실행하여 웹 애플리케이션을 빌드하고 실행합니다.

cd BestBikeApp
dotnet run

다음과 같은 출력이 표시됩니다.

info: Microsoft.Hosting.Lifetime[0]
      Now listening on: https://localhost:5001
info: Microsoft.Hosting.Lifetime[0]
      Now listening on: http://localhost:5000
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/user/BestBikeApp

출력 내용은 앱을 시작한 후에 발생하는 상황을 설명합니다. 애플리케이션이 실행 중이고 포트 5000에서 수신 대기 중입니다.

두 번째 명령 셸 세션에서 다음 명령을 실행하여 웹 애플리케이션으로 이동합니다.

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 class="border-top footer text-muted">
         <div class="container">
             &copy; 2021 - 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=4q1jwFhaPaZgr8WAUSrux6hAuh0XDg9kPS3xIVq36I0"></script>

 </body>
 </html>

기본 명령 셸 세션에서 Ctrl+C를 눌러 웹앱을 종료합니다.

시작 웹 애플리케이션을 만들기 위해 Java 앱에 일반적으로 사용되는 프로젝트 관리 및 빌드 도구인 Maven을 사용합니다. maven-archetype-webapp 템플릿을 사용하여 웹 애플리케이션용 코드를 생성합니다.

이제 Azure Cloud Shell에서 다음 명령을 실행하여 새 웹앱을 만듭니다.

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

이제 이러한 명령을 실행하여 새로운 “helloworld” 애플리케이션 디렉터리로 이동하고 배포할 애플리케이션을 패키지합니다.
```
cd helloworld
mvn package
```
명령 실행이 완료되면 다음 명령을 실행하여 대상 디렉터리를 열고 해당 콘텐츠를 나열합니다.
```
cd target
ls
```

helloworld.war(이)라는 파일이 나열됩니다. 이 파일이 App Service에 배포될 웹 애플리케이션 패키지입니다.

시작 Node.js 웹 애플리케이션을 만들려면 노드 패키지 관리자(npm)와 JavaScript 코드를 함께 사용하여 실제 웹 페이지 처리를 실행합니다.

이제 Azure Cloud Shell에서 다음 명령을 실행하여 Node.js 애플리케이션을 설명하는 새로운 package.json을(를) 만듭니다.
```
cd ~
mkdir helloworld
cd helloworld
npm init -y
```

그러면 현재 폴더에 새 package.json 파일이 생성됩니다. 터미널 창에 ls를 입력하면 현재 폴더에서 파일을 찾을 수 있습니다. 웹 사이트 논리를 실행하려면 JavaScript 파일이 필요합니다. 이 예제는 기본 예제이기 때문에 index.js 파일 하나만 필요합니다.

터미널에서 다음 명령을 실행하여 파일을 만듭니다.
```
touch index.js
```
이제 두 파일의 몇 가지 부분을 편집해야 합니다. 터미널에서 다음 명령을 실행하여 대화형 편집기를 엽니다.
```
code .
```
package.json 파일을 선택하고, Node.js를 사용하여 웹앱을 시작하도록 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 단축 키를 사용하여 파일을 저장하고 편집기를 종료합니다.

선택적으로 웹앱 테스트하기

helloworld 웹앱을 실행하는 동안 두 번째 명령 셸 세션을 열어 로컬에서 실행 중인지 확인할 수 있습니다.

새 브라우저 탭에서 https://shell.azure.com/으로 이동합니다.
기본 명령 셸 세션에서 다음 명령을 실행하여 웹 애플리케이션을 시작합니다.
```
cd ~/helloworld
npm start
```
두 번째 명령 셸 세션에서 다음 명령을 실행하여 웹 애플리케이션으로 이동합니다.
```
curl http://127.0.0.1:1337/
```
다음과 같은 출력이 표시됩니다.
```
<html><body><h1>Hello World!</h1></body></html>
```
기본 명령 셸 세션에서 Ctrl+C를 눌러 웹앱을 종료한 다음 두 번째 셸 세션 브라우저 탭을 닫습니다.

시작 웹 애플리케이션을 만들기 위해 웹 애플리케이션 프레임워크인 Flask를 사용합니다.

Azure Cloud Shell에서 다음 명령을 실행하여 가상 환경을 설정하고 프로필에 Flask를 설치합니다.
```
python3 -m venv venv
source venv/bin/activate
pip install flask
```
다음 명령을 실행하여 새 웹앱 디렉터리를 만들고 전환합니다.
```
mkdir ~/BestBikeApp
cd ~/BestBikeApp
```
python 대화형 편집기에서 application.py를 열어 웹앱에 대한 새 파일을 만듭니다.
```
code application.py
```

다음 Python 코드를 복사하고 붙여넣어 기본 웹앱 기능을 만듭니다.

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
```

선택적으로 웹앱 테스트하기

애플리케이션을 실행하는 동안 Azure에서 로컬로 테스트할 수 있습니다.

새 브라우저 탭 https://shell.azure.com/에서 두 번째 명령 셸 세션을 엽니다.
기본 명령 셸 세션(오른쪽)에서 다음 명령을 실행하여 가상 환경을 활성화합니다.
```
cd ..
source venv/bin/activate
```
기본 명령 셸 세션(오른쪽)에서 다음 명령을 실행하여 웹 애플리케이션을 시작합니다.
```
cd ~/BestBikeApp
export FLASK_APP=application.py
flask run
```
두 번째 명령 셸 세션에서 다음 명령을 실행하여 웹 애플리케이션으로 이동합니다.
```
curl http://127.0.0.1:5000/
```
다음과 같은 HTML 출력이 표시됩니다.
```
<html><body><h1>Hello Best Bike App!</h1></body></html>
```
기본 명령 셸 세션에서 Ctrl+C를 눌러 웹앱을 종료한 다음 보조 Azure Cloud Shell을 닫습니다.

계속

연습 - 웹 애플리케이션을 구현하는 코드 작성

새 웹 프로젝트 만들기

선택적으로 웹앱 테스트하기

선택적으로 웹앱 테스트하기

선택적으로 웹앱 테스트하기

피드백