연습 - 시작하기

이 연습에서는 웹 사이트를 자동으로 빌드하고 게시하는 GitHub 작업을 포함하여 Azure Static Web App 인스턴스를 만듭니다.

이 모듈에서는 연습을 완료하는 데 필요한 리소스와 함께 Azure 구독에 대한 무료 임시 액세스를 제공하는 샌드박스를 통해 사용할 수 있는 리소스를 사용합니다. 이 페이지의 맨 위에 있는 샌드박스를 활성화해야 합니다. 이 모듈의 연습을 진행하는 동안 각 단위는 이전 연습에서 만든 콘텐츠에 따라 달라집니다. 이러한 이유로 JavaScript 프레임워크를 선택하고 모든 후속 연습에 사용합니다.

리포지토리 만들기

시작하려면 GitHub 템플릿을 사용하여 리포지토리를 만듭니다. 다양한 프런트 엔드 프레임워크에서 구현된 시작 앱을 포함하는 일련의 리포지토리 템플릿을 사용할 수 있습니다.

1. GitHub 템플릿에서 생성 페이지로 이동하여 템플릿 리포지토리를 엽니다.

2. 소유자를 묻는 메시지가 표시되면 GitHub 계정 중 하나를 선택합니다.

3. 리포지토리 이름의 경우 my-static-web-app-and-api를 입력합니다.

4. 템플릿에서 리포지토리 만들기를 선택합니다.

   템플릿에서 프로젝트를 만들 때 GitHub는 백그라운드에서 리포지토리를 빌드합니다.

로컬로 앱 실행

이제 GitHub 계정에 my-static-web-app-and-api 라는 GitHub 리포지토리가 있습니다. 다음으로, GitHub 리포지토리를 복제하고 컴퓨터에서 로컬로 코드를 실행합니다.

1. 컴퓨터에서 터미널 창을 엽니다.

   Windows를 사용하는 경우 시스템 트레이 검색 상자에 입력 cmd 할 수 있습니다.

2. 리포지토리를 컴퓨터에 복제하려면 명령 프롬프트 창에 다음 코드를 붙여넣습니다.

   <YOUR_GITHUB_USERNAME>을 GitHub 사용자 이름으로 바꿔야 합니다.

   git clone https://github.com/<YOUR_GITHUB_USERNAME>/my-static-web-app-and-api
   

   비고

   명령 프롬프트 터미널로 복사하는 데 문제가 있는 경우 제목 표시줄에서 아이콘을 마우스 오른쪽 단추로 클릭하고 속성 탭에서 복사/붙여넣기 시 Ctrl+Shift+C/V를 사용해야 합니다.

3. 복제한 소스 코드의 디렉터리로 변경합니다.

   cd my-static-web-app-and-api
   

4. 기본 프런트 엔드 프레임워크의 디렉터리로 이동합니다.

   cd angular-app
   

   cd react-app
   

   cd svelte-app
   

   cd vue-app
   

5. 애플리케이션 종속성을 설치합니다.

   npm install
   

6. 다음 명령을 사용하여 각 종속성의 최신 버전이 설치되어 있는지 확인합니다.

   npm audit fix
   

7. 프런트 엔드 클라이언트 애플리케이션을 실행합니다.

   npm start
   

   npm start
   

   npm run dev
   

   npm run serve
   

앱으로 이동

애플리케이션 번들을 생성하고 컴파일하면 브라우저 탭이 자동으로 열리고 로컬로 실행 중인 애플리케이션이 표시됩니다.

데이터 또는 API가 아직 없기 때문에 앱에는 데이터를 로드하는 중...이 표시됩니다. 이 단원의 뒷부분에서 웹앱에 대한 API를 추가합니다.

터미널에서 Ctrl+C 를 눌러 일괄 처리 작업을 중지합니다.

축하합니다! 애플리케이션을 빌드하고 브라우저에서 로컬로 실행되는 것을 보았습니다. 다음으로 Azure Static Web Apps에 애플리케이션을 게시할 수 있습니다.

정적 웹앱 만들기

사용자 고유의 GitHub 리포지토리를 만들었습니다. 이제 Visual Studio Code용 Azure Static Web Apps 확장을 사용하여 고유한 정적 웹앱을 만들 수 있습니다.

Visual Studio Code용 Azure Static Web Apps 확장 설치

1. Visual Studio Code를 엽니다.

2. 위쪽 메뉴에서확장보기>를 선택하고 검색 상자에 Azure Static Web Apps를 입력합니다.

3. Visual Studio Code에서 확장 탭이 로드되면 설치를 선택합니다.

애플리케이션 폴더 열기

1. F1 키를 선택하여 Visual Studio Code 명령 팔레트를 엽니다.

2. 파일 입력: 폴더 열기....

3. my-static-web-app-and-api 폴더를 선택합니다.

4. 열기를 선택하여 Visual Studio Code에서 폴더를 엽니다.

Visual Studio Code에서 Azure에 로그인

1. F1 키를 선택하여 Visual Studio Code 명령 팔레트를 엽니다.

2. Azure를 입력합니다. 로그인하고 프롬프트에 따라 인증합니다.

   중요합니다

   브라우저 내 샌드박스를 활성화하는 데 사용한 것과 동일한 계정을 사용하여 Azure에 로그인해야 합니다. 동일한 계정을 사용하면 컨시어지 구독을 사용할 수 있으므로 이 자습서에서 무료 Azure 리소스에 액세스할 수 있습니다.

구독 선택

1. F1 키를 선택하여 Visual Studio Code 명령 팔레트를 엽니다.

2. Azure를 입력 합니다. 구독을 선택하고컨시어지 구독을 제외한 모든 선택 항목을 지웁니다.

   

변경 내용 커밋

애플리케이션 종속성을 설치할 때 프로젝트의 일부 파일이 프로세스에서 업데이트되었습니다. 계속하려면 해당 변경 내용을 리포지토리에 커밋해야 합니다.

1. F1 키를 선택하여 Visual Studio Code 명령 팔레트를 엽니다.

2. Git Commit All을 입력하고 선택합니다.

3. 파일 맨 위에 초기 커밋 을 입력합니다.

4. git 커밋 파일을 저장하고 닫습니다.

   이 시점에서 변경 내용을 서버와 동기화하는 것에 대해 걱정하지 마세요. 정적 웹앱을 게시할 때 업데이트가 GitHub에 복사됩니다.

정적 웹앱 만들기

정적 웹앱을 만들려면 현재 Azure 및 GitHub 인증 세션이 필요합니다. 두 공급자에 아직 로그인하지 않은 경우 확장을 만들 때 로그인하라는 메시지가 표시됩니다.

1. F1 키를 선택하여 Visual Studio Code 명령 팔레트를 엽니다.

3. 앱이 만들어지면 Visual Studio Code에 확인 알림이 표시됩니다.

   

   빌드를 구성하는 동안 Visual Studio Code는 빌드 상태를 보고합니다.

   

4. 작업 메뉴를 확장하여 GitHub Actions를 사용하여 배포 진행률을 볼 수 있습니다.

   

   배포가 완료되면 웹 사이트로 직접 이동할 수 있습니다.

5. 브라우저에서 웹 사이트를 보려면 Static Web Apps 확장에서 프로젝트를 마우스 오른쪽 단추로 클릭하고 사이트 찾아보기를 선택합니다.

   

   데이터 또는 API가 아직 없기 때문에 앱에는 데이터를 로드하는 중...이 표시됩니다. 이 모듈의 뒷부분에서 웹앱용 API를 추가합니다.

축하합니다! 앱이 Azure Static Web Apps에 배포됩니다.

GitHub에서 변경 내용 가져오기

GitHub에서 최신 변경 내용을 끌어와서 Azure Static Web Apps 서비스에서 만든 워크플로 파일을 삭제합니다.

1. CtrlShift+P를 눌러 명령 팔레트를 + 엽니다.

2. Git: Pull을 입력하고 선택합니다.

3. Enter 키를 누릅니다.

다음 단계

다음으로 Azure Functions 프로젝트를 사용하여 API를 빌드하고 실행하는 방법을 알아봅니다.