이전

다음

연습 - 앱에 Azure Storage 구성 추가

완료됨

.NET Core 애플리케이션에 지원을 추가하여 구성 파일에서 연결 문자열을 검색하겠습니다. 먼저 필요한 배관을 추가하여 JSON 파일의 구성을 관리합니다.

JSON 구성 파일 만들기

1. 아직 변경하지 않은 경우 디렉터리를 PhotoSharingApp 디렉터리로 변경합니다.

   cd PhotoSharingApp
   

2. touch 도구를 사용하여 다음 명령줄을 입력하여 appsettings.json이라는 파일 이름을 만듭니다.

   touch appsettings.json
   

3. 편집기에서 프로젝트를 엽니다. 로컬로 작업 중인 경우, 선택한 편집기를 사용할 수 있습니다. 뛰어난 플랫폼 간 IDE인 Visual Studio Code를 사용하는 것이 좋습니다. Azure Cloud Shell(오른쪽)에서 작업 중인 경우, Cloud Shell 편집기를 사용하는 것이 좋습니다. 다음 명령을 사용하여 아무 환경에서 편집기를 엽니다.

   code .
   

4. 편집기에서 appsettings.json 파일을 선택하고 다음 텍스트를 추가합니다.

   {
       "ConnectionStrings": {
           "StorageAccount": "<value>"
       }
   }
   

5. 바로 가기 키(Ctrl+S)를 사용하여 파일을 저장하거나 상황에 맞는 메뉴(편집기 제목 표시줄 내 줄임표 ... 아이콘을 선택)에서 저장을 선택합니다.

6. 이제 Azure 명령을 사용하여 실제 스토리지 계정 연결 문자열을 가져와야 합니다. Cloud Shell 세션에서 다음 명령을 붙여넣어 <name>을(를) 이전 연습에서 만든 고유한 스토리지 계정 이름으로 바꾼 다음, Enter 키를 눌러 명령을 실행합니다.

   az storage account show-connection-string \
     --resource-group <rgn>[sandbox resource group name]</rgn> \
     --query connectionString \
     --name <name>
   

7. 응답에는 따옴표로 묶인 연결 문자열이 포함되어 있으며, 이는 다음 예제와 매우 유사합니다.

   "DefaultEndpointsProtocol=https;EndpointSuffix=core.windows.net;AccountName=storage1ab;AccountKey=QtSCGB...7AeoW0Hw=="
   

8. 연결 문자열을 복사하고 편집기의 appsettings.json 파일에서 <value> 자리 표시자를 이 연결 문자열로 바꿉니다.

9. Ctrl+S 키를 눌러 파일을 저장합니다.

10. 편집기에서 프로젝트 파일 PhotoSharingApp.csproj를 엽니다.

11. 기존 <ItemGroup>아래에 다음 구성 블록을 복사하여 붙여 넣습니다.

    <ItemGroup>
        <None Update="appsettings.json">
            <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
        </None>
    </ItemGroup>
    

12. Ctrl+S 키를 눌러 파일을 저장합니다. (이 파일은 반드시 저장해야 합니다. 그러지 않으면 다음 패키지를 추가할 때 변경 내용이 손실됩니다!)

JSON 구성 파일을 읽도록 지원 추가

Cloud Shell 콘솔에서 다음 코드를 붙여넣고 실행하여 Microsoft.Extensions.Configuration.Json NuGet 패키지에 참조를 추가합니다.

dotnet add package Microsoft.Extensions.Configuration.Json

구성 파일을 읽는 코드 추가

구성을 읽을 수 있도록 하는 데 필요한 라이브러리를 추가했으므로 콘솔 애플리케이션에서 해당 기능을 사용하도록 설정해야 합니다.

1. 편집기에서 Program.cs를 선택합니다.

2. 파일의 맨 위에는 코드의 주석 처리된 줄이 있습니다. 해당 줄을 삭제하고 파일 맨 위에 다음 코드 줄을 추가합니다.

   using System;    
   using Microsoft.Extensions.Configuration;
   using System.IO;
   

3. Main 메서드(“Hello World!”가 포함된 줄)의 콘텐츠를 다음 코드로 바꿉니다.

   namespace PhotoSharingApp
   {
       class Program
       {
           static void Main(string[] args)
           {
               var builder = new ConfigurationBuilder()
                   .SetBasePath(Directory.GetCurrentDirectory())
                   .AddJsonFile("appsettings.json");
   
               var configuration = builder.Build();
           }
       }
   }
   

   이 코드는 appsettings.json 파일에서 읽을 수 있도록 구성 시스템을 초기화합니다.

   Program.cs 파일이 이제 다음과 같이 표시됩니다.

   using System;
   using Microsoft.Extensions.Configuration;
   using System.IO;
   
   namespace PhotoSharingApp
   {
       class Program
       {
           static void Main(string[] args)
           {
               var builder = new ConfigurationBuilder()
                   .SetBasePath(Directory.GetCurrentDirectory())
                   .AddJsonFile("appsettings.json");
   
               var configuration = builder.Build();
           }
       }
   }
   

4. 파일을 저장합니다.

Node.js 애플리케이션에 지원을 추가하여 구성 파일에서 연결 문자열을 검색해 보겠습니다. 먼저 필요한 배관을 추가하여 JavaScript 파일의 구성을 관리합니다.

.env 구성 파일 만들기

1. Azure Cloud Shell 세션에서 다음 명령을 입력하여 해당 프로젝트의 올바른 작업 디렉터리에 있는지 확인합니다.

   cd PhotoSharingApp 
   

2. 다음 명령을 입력하여 .env 이름의 파일을 만듭니다.

   touch .env
   

3. Cloud Shell 편집기에서 프로젝트를 엽니다.

   code .
   

4. 편집기에서 .env 파일을 선택하고 다음 텍스트를 추가합니다.

   참고 항목

   새 파일을 확인하기 위해 코드에서 새로 고침 단추를 선택해야 할 수 있습니다.

   AZURE_STORAGE_CONNECTION_STRING=<value>
   

   팁

   AZURE_STORAGE_CONNECTION_STRING은 Storage API가 액세스 키를 조회하는 데 사용하는 하드 코딩된 환경 변수입니다.

5. 바로 가기 키(Ctrl+S)를 사용하여 파일을 저장하거나 편집기 제목 표시줄 내 줄임표 아이콘(...)을 선택한 다음 상황에 맞는 메뉴에서 저장을 선택합니다.

6. 이제 Azure 명령을 사용하여 실제 스토리지 계정 연결 문자열을 가져와야 합니다. Cloud Shell 세션에서 다음 명령을 실행하여 <name>를 이전 연습에서 만든 스토리지 계정 이름으로 바꿉니다.

   az storage account show-connection-string \
     --resource-group <rgn>[sandbox resource group name]</rgn> \
     --query connectionString \
     --name <name>
   

7. 응답은 따옴표로 묶인 연결 문자열로 다음 예와 매우 유사합니다.

   "DefaultEndpointsProtocol=https;EndpointSuffix=core.windows.net;AccountName=storage1ab;AccountKey=QtSCGB...7AeoW0Hw=="  
   

8. 연결 문자열을 복사하고 .env 파일에서 <value>을(를) 이 연결 문자열로 바꿉니다.

9. Ctrl+S 키를 눌러 파일을 저장합니다.

환경 구성 파일을 읽도록 지원 추가

Node.js 앱에는 dotenv 패키지를 추가하여 .env 파일에서 읽을 수 있는 지원이 포함됩니다.

1. Cloud Shell 세션에서 npm을(를) 사용하여 dotenv 패키지에 종속성을 추가하기 위해 다음 명령을 실행합니다.

   npm install dotenv --save
   

구성 파일을 읽는 코드 추가

구성을 읽을 수 있도록 하는 데 필요한 라이브러리를 추가했으므로 애플리케이션에서 해당 기능을 사용하도록 설정해야 합니다.

1. 편집기에서 index.js 파일을 엽니다.

2. 파일의 맨 위에는 코드 줄 #!/usr/bin/env node이 있습니다. 해당 줄 아래에 다음 코드 줄을 추가합니다.

   require('dotenv').config();
   

3. Ctrl+S 키를 눌러 파일을 저장합니다.

이제 JSON 구성이 모두 정리되었으므로 스토리지 계정을 사용하기 위해 코드를 추가할 수 있습니다.

계속