연습 - 시작하기

완료됨

이 연습에서는 웹 사이트를 자동으로 빌드하고 게시하는 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
   

앱으로 이동

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

Angular에 대한 로컬 호스트는 http://localhost:4200입니다.

React에 대한 로컬 호스트는 http://localhost:3000입니다.

Svelte에 대한 로컬 호스트는 http://localhost:5000입니다.

Vue에 대한 로컬 호스트는 http://localhost:8080입니다.

데이터 또는 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. ile: Open Folder...를 입력합니다.

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

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

Visual Studio Code에서 Azure에 로그인

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

2. Azure: Sign In을 입력하고 프롬프트에 따라 인증합니다.

   중요

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

구독 선택

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

2. Azure: Select Subscriptions를 입력하고 Concierge Subscription을 제외한 모든 선택 항목을 선택 취소합니다.

   

변경 내용 커밋

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

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

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

3. 파일 맨 위에 initial commit을 입력합니다.

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

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

정적 웹앱 만들기

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

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

2. Azure Static Web Apps: Create Static Web App...을 입력하고 선택합니다.

   명령 팔레트 프롬프트의 나머지 부분에 대해 다음 값을 입력합니다.

   prompt	값
   Subscription	Concierge Subscription을 선택합니다.
   이름	my-static-web-app-and-api를 입력합니다.
   지역	가장 가까운 지역을 선택합니다.
   미리 설정	Angular를 선택합니다.
   애플리케이션 코드 위치	angular-app을 입력합니다.
   출력 위치	dist/angular-app을 입력합니다.

2. Azure Static Web Apps: Create Static Web App...을 입력하고 선택합니다.

   명령 팔레트 프롬프트의 나머지 부분에 대해 다음 값을 입력합니다.

   prompt	값
   Subscription	Concierge Subscription을 선택합니다.
   이름	my-static-web-app-and-api를 입력합니다.
   지역	가장 가까운 지역을 선택합니다.
   미리 설정	React를 선택합니다.
   애플리케이션 코드 위치	react-app을 입력합니다.
   출력 위치	dist를 입력합니다.

2. Azure Static Web Apps: Create Static Web App...을 입력하고 선택합니다.

   명령 팔레트 프롬프트의 나머지 부분에 대해 다음 값을 입력합니다.

   prompt	값
   Subscription	Concierge Subscription을 선택합니다.
   이름	my-static-web-app-and-api를 입력합니다.
   지역	가장 가까운 지역을 선택합니다.
   미리 설정	Svelte를 선택합니다.
   애플리케이션 코드 위치	svelte-app을 입력합니다.
   출력 위치	public을 입력합니다.

2. Azure Static Web Apps: Create Static Web App...을 입력하고 선택합니다.

   명령 팔레트 프롬프트의 나머지 부분에 대해 다음 값을 입력합니다.

   prompt	값
   Subscription	Concierge Subscription을 선택합니다.
   이름	my-static-web-app-and-api를 입력합니다.
   지역	가장 가까운 지역을 선택합니다.
   미리 설정	Vue를 선택합니다.
   애플리케이션 코드 위치	vue-app을 입력합니다.
   출력 위치	dist를 입력합니다.

참고

이 리포지토리는 과거에 사용했던 다른 프로젝트와 다릅니다. 4개의 폴더에 4개의 서로 다른 앱이 포함되어 있습니다. 각 폴더에는 다른 JavaScript 프레임워크에서 만든 앱이 포함됩니다. 일반적으로 리포지토리의 루트에는 하나의 앱만 있으므로 앱 경로 위치에 대한 기본값인 /이 있습니다. 이것은 Azure Static Web Apps를 통해 앱 빌드 방법을 완전히 제어할 수 있는 위치를 처음부터 구성할 수 있는 방법에 대한 좋은 예입니다.

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

   

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

   

4. 작업 메뉴를 펼쳐 GitHub Actions로 배포 진행 상황을 볼 수 있습니다.

   

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

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

   

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

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

참고 항목

앱이 아직 빌드되거나 배포되지 않았다는 내용이 웹 페이지에 표시되더라도 걱정하지 마세요. 잠시 후 브라우저를 새로 고쳐 보세요. GitHub 작업 서비스는 Azure Static Web Apps가 만들어질 때 자동으로 실행됩니다. 따라서 시작 페이지가 표시되면 앱이 아직 배포되고 있는 것입니다.

GitHub에서 변경 내용 가져오기

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

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

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

3. Enter 키를 누릅니다.

다음 단계

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