연습 - 시작하기 - Training

Azure Static Web Apps는 GitHub 리포지토리에서 앱을 빌드하여 프로덕션 환경에 웹 사이트를 게시합니다. 이 연습에서는 GitHub 리포지토리에서 원하는 프런트 엔드 프레임워크를 사용하여 웹 애플리케이션을 빌드합니다.

리포지토리 만들기

이 모듈을 통해 GitHub 템플릿 리포지토리를 사용하여 새 리포지토리를 쉽게 만들 수 있습니다. 각각 다른 프런트 엔드 프레임워크를 사용하여 빌드된 시작 앱을 포함하는 일련의 템플릿을 사용할 수 있습니다.

템플릿 리포지토리의 템플릿에서 만들기 페이지로 이동합니다. 404: 페이지를 찾을 수 없음 오류가 표시되면 GitHub에 로그인하고 다시 시도합니다.
소유자 드롭다운에서 GitHub 계정 중 하나를 선택합니다.
리포지토리 이름을 my-static-web-app으로 지정합니다.
템플릿에서 리포지토리 만들기 단추를 선택합니다.

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

컴퓨터에서 터미널을 엽니다.
먼저 GitHub 리포지토리를 컴퓨터의 원하는 디렉터리에 복제합니다.
```
git clone https://github.com/<YOUR_GITHUB_USERNAME>/my-static-web-app
```
소스 코드 폴더로 이동합니다.
```
cd my-static-web-app
```
다음으로, 다음과 같이 원하는 프런트 엔드 프레임워크의 폴더로 이동합니다.
```
cd angular-app
```
```
cd react-app
```
```
cd svelte-app
```
```
cd vue-app
```
이제 애플리케이션 종속성을 설치합니다.
```
npm install
```
참고

경로를 찾을 수 없음 오류가 발생하는 경우 https://nodejs.org에서 Node.js를 설치했는지 확인합니다. PATH에 추가 옵션 설치를 포함하는 사용자 지정 설치를 수행해야 할 수도 있습니다.
마지막으로, 프런트 엔드 클라이언트 애플리케이션을 실행합니다.
```
npm start
```
```
npm start
```
```
npm run dev
```
```
npm run serve
```