Azure에서 Static Web App 만들기: GitHub과 VS Code를 활용한 완벽 가이드

소개

웹 애플리케이션 개발은 다양한 기술과 도구를 필요로 합니다. 이번 가이드에서는 GitHub, Visual Studio Code, Azure Static Web Apps, Node.js 및 SvelteKit을 사용하여 웹 애플리케이션을 배포하는 과정을 단계별로 안내합니다. 이러한 도구들을 활용하면 개발 과정을 보다 쉽고 효율적으로 관리할 수 있습니다.

 

기본적으로 아래 환경은 준비가 되어 있다고 가정하겠습니다.

• Vs Code 설치
• Git 설치
• Node.js 버전 20.11.0 (현재 시점 Azure에서 지원가능한 최신버전은 20.11.0입니다.)

1. GitHub에서 리포지토리 생성

시작하기

GitHub에서 새로운 리포지토리를 만드는 것은 프로젝트를 시작하는 첫 걸음입니다. GitHub 계정이 필요하며, 없다면 먼저 가입하세요.

리포지토리 생성

• GitHub 홈페이지에서 우측 상단의 "+" 아이콘을 클릭한 다음, "New repository"를 선택합니다.
• 리포지토리 이름을 입력하고, 공개 또는 비공개 설정을 선택합니다.
• "Initialize this repository with a README" 옵션을 선택하여 README 파일을 생성할 수 있습니다. 이는 나중에 프로젝트 설명에 유용합니다.

2. VS Code에서 리포지토리 접근

준비사항

Visual Studio Code(이하 VS Code)가 설치되어 있어야 합니다. 설치되어 있지 않다면, 공식 웹사이트에서 다운로드하여 설치할 수 있습니다.

리포지토리 클론

• VS Code를 열고, "View" 메뉴에서 "Command Palette..."를 선택합니다.
• "Git: Clone" 명령어를 입력하고 실행합니다.
• GitHub 리포지토리의 URL을 붙여넣고, 로컬 시스템에서 저장할 위치를 선택합니다.
• 혹은 터미널에서 아래 명령어로 저장할수 있습니다.
• git clone {Git Repository Url}

3. VS Code에 Azure 확장 플러그인 설치

확장 플러그인 설치

• VS Code에서 "Extensions" 뷰를 열거나, 좌측 사이드바에서 확장 아이콘을 클릭합니다.
• 검색창에 "Azure Static Web Apps"을 입력하고, 검색 결과 중 해당 확장을 찾아 설치합니다.

4. Node.js를 사용해서 Svelte Kit 설치

Node.js 설치

SvelteKit을 사용하기 전에, Node.js가 시스템에 설치되어 있어야 합니다. Node.js 공식 웹사이트에서 LTS 버전을 다운로드하여 설치하세요.

SvelteKit 프로젝트 생성

• 터미널을 열고, 프로젝트를 생성할 디렉토리로 이동합니다.
• .gitignore 파일에 기본적으로 node관련된것과 package-lock.json 추가합니다.
• 다음 명령어를 실행하여 SvelteKit 애플리케이션을 생성합니다.
• my-svelte-app은 프로젝트 이름으로, 원하는 이름으로 변경할 수 있습니다.
• 만약 새로운 디렉토리에 생성되는것이 싫다면 my-svelte-app은 삭제해도 괜찮습니다.

npm create svelte@latest my-svelte-app
cd my-svelte-app
npm install

npm run build

npm run dev -- --open

• 중간에 설치과정은 생략되었지만 제가 선택한 옵션은 아래와 같습니다.

• package.json에 node 버전을 명시해 줍니다. (중요)

	"engines": {
		"node": "20"
	},

• 아래 명령어로 git에 push 합니다.

git init && git add -A && git commit -m "Initial commit"

5. VS Code에서 Static Web App 생성

Azure 확장을 통한 배포

• VS Code에서 Azure 확장 아이콘을 클릭합니다.
• "Static Web Apps" 섹션을 찾아 "+" 버튼을 클릭하여 새로운 Static Web App을 생성합니다.
• 명령어 팔레트에 나타나는 지시에 따라 애플리케이션 이름, 리전, 배포할 브랜치 등을 설정합니다. (중요)
• 입력시 권장사항으로 나오는것을 그대로 입력하면 문제없이 동작할것입니다.

6. GitHub에서 Action 확인

CI/CD 파이프라인

• GitHub 리포지토리로 돌아가서 "Actions" 탭을 확인합니다. Azure Static Web Apps를 생성할 때 자동으로 CI/CD 파이프라인이 설정되어 Commit해서 Push 할때마다 자동으로 재 배포 합니다.
• 최근 실행된 작업을 클릭하여 빌드 및 배포 과정을 모니터링할 수 있습니다.

7. Azure에서 웹 링크 확인하여 나오는지 확인

배포 확인

• Azure Portal에서 "Static Web Apps" 서비스로 이동합니다.
• 생성한 Static Web App을 클릭하여 개요 페이지를 엽니다.
• 페이지에서 제공하는 URL을 클릭하여 배포된 웹 애플리케이션에 접근할 수 있습니다.

 

 

 

이 가이드를 따라하면, GitHub, VS Code, Azure Static Web Apps를 사용하여 SvelteKit 기반의 웹 애플리케이션을 쉽게 배포할 수 있습니다. 이 과정을 통해 개발 및 배포 파이프라인을 자동화하고, 효율적으로 프로젝트를 관리할 수 있게 됩니다.

 

아래주소는 위 과정을 통해 만들어진 웹 앱 주소입니다.

https://proud-mushroom-00cef990f.4.azurestaticapps.net/

Home

 

마무리

Azure Static Web Apps를 사용하여 정적 웹 앱을 빌드하고 배포하는 방법을 살펴보았습니다. 이제 Azure의 강력한 기능을 활용하여 웹 애플리케이션을 보다 쉽고 빠르게 개발하고 배포할 수 있습니다. 이제 원하는 페이지를 만들고 수정하여 서버리스 웹 서비스하시기 바랍니다. 관련되어 추가적인 자세한 내용은 Azure 문서를 참조하시기 바랍니다.

 

참고 : https://learn.microsoft.com/ko-kr/training/modules/publish-app-service-static-web-app-api/

Azure Static Web Apps를 사용하여 Angular, React, Svelte 또는 Vue JavaScript 앱 게시 - Training