해커그라운드 해커톤에 참여하는 가로수 팀의 농락 입니다.
아래 두 링크는 해커톤에서 앱을 개발하면서 참고할 만한 문서들입니다. 이 문서들에서 언급한 서비스 이외에도 더 많은 서비스들이 PaaS, SaaS, 서버리스 형태로 제공되니 참고하세요.
아래 제공하는 설치 방법을 통해 심사위원단이 여러분의 제품/서비스를 실제 Microsoft 애저 클라우드에 배포하고 설치할 수 있어야 합니다. 만약 아래 설치 방법대로 따라해서 배포 및 설치가 되지 않을 경우 본선에 진출할 수 없습니다.
비주얼 스튜디오 코드 설치 깃허브 설치 GitHub 계정 생성 깃허브 CLI 설치 Azure 계정 생성 Azure CLI 설치 Azure 개발자 CLI설치 Azure 리소스 그룹 확인 노드JS 설치 리액트.js 설치 익스프레스.js 설치
먼저 Chrome 또는 Edge를 실행한 후 검색란에 Visual Studio Code를 검색합니다.
3.왼측상단에 visual studio code - code editing. Redefined 클릭
4.파란색 버튼안에 Download for Window버튼을 클릭한다
- 이렇게 우측 상단에 있는 다운로드 기록을 보면 visual studio code가 다운로드가 되고있음을 볼수있다.
우측상단에 다운로드가 다 되었다고 뜨면 폴더를 클릭하여 다운로드 폴더로 이동한다
이렇게 visual studio code가 다운로드 되있는데 보일것이다 지금 보이는 VScodeUserSetup.exe에다가 마우스 포인터를 갖다댄후 더블클릭을 해준다
그럼 이 화면이 나올텐데 동의합니다(A)를 선택후 사진에는 없지만 다음(next)버튼을 눌러서 넘어간다
그다음은 투가 작업선택창이 나올텐데 처음 보면 밑에 2개만 선택 되있을것이다 여기사ㅓ 우리는 모두 선태하고 이번에도 마찬가지로 사진에는 없지만 다음(next)버튼을 눌러서 넘어간다
이제 그럼 이 화면이 나올텐데 여기서 설치 버튼을 누르면 설치가 진행된다 설치가 완료되ㅣ면 화면 닫기를 누른다
- 크롬 검색창에 github를 입력한다
밑에 아이콘과 같이 github라고 되있는 것을 클릭한다
여기서 GitHub: Let's build from here · GitHub 이 부분을 클릭한다.
처음 들어가면 이렇게 화면이 보일것이다 여기서 sigh버튼을 누른다 그럼 이렇게 자신의 이메일을 넣는공간이 나올것이다
enter your email밑에
그럼 이렇게 비밀번호를 만드는곳이 생길것이다. create a password밑에 자신이 원하는 비밀번호를 입력한다
username을 입력하는곳이 나올것이다 enter a username 여기 밑에 입력을 한다
여기에 마지막으로 email을 정보수집 동의를 한다는 체크박스에 표시를 하고 countiue버튼을 누른다
잠시기다리면 로봇이 아닙니다 관련 퀴즈를 풀어야 계정을 생성할수있다
Windows 설치 방법 명령 프롬프트나 PowerShell을 엽니다.
다음 명령어를 입력해 GitHub CLI를 설치합니다:
winget이 설치되지 않은 분들은
마이크로소프트 스토어를 검색 -->열기-->검색 클릭-->앱 설치 관리자 검색--> 설치
하지만 미리보기 버전을 설치하기 위해서는 먼저 패키지 매니저 인사이더 프로그램이나 윈도우 인사이더 프로그램에 가입해야합니다.
Join the Windows Package Manager Insiders Program Windows Insider 이 방법을 사용해도 괜찮습니다만 여기서는 인사이더 프로그램 가입 없이 바로 winget 명령어를 설치하는 방법을 소개하겠습니다.
최근 Microsoft의 소프트웨어 개발 기조가 바뀌면서 Windows Terminal, PowerShell, winget-cli 등 많은 애플리케이션이 오픈소스로 개발되고 있습니다. winget-cli 역시 오픈소스 프로젝트로 개발되고 있으며, GitHub를 통해서 소스코드 및 릴리스 파일이 공개되어있습니다. 아래 GitHub의 릴리스 페이지에서 winget-cli의 최신 버전을 다운로드 받고 설치할 수 있습니다.
Releases · microsoft/winget-cli 릴리스에는 프리뷰가 붙은 버전과 붙지 않은 버전이 있습니다. 이는 마이크로소프트 스토어에서 제공하는 앱 설치 관리자와는 달리 둘 다 커맨드라인 명령어를 제공합니다. 여기서는 preview가 없는 정식 버전을 설치해보겠습니다. 현재 시점에서 최신 버전인 v1.0.11451 버전의 릴리스 페이지로 이동합니다.
Release Windows Package Manager v1.0.11451 · microsoft/winget-cli 이 페이지 하단에서 확장자가 .appxbundle로 끝나는 설치 파일을 다운로드 받고 실행합니다.
커맨드라인 명령어를 포함한 앱 설치 관리자를 설치합니다 커맨드라인 명령어를 포함한 앱 설치 관리자를 설치합니다 앱 설치 관리자를 업데이트할 지 물어봅니다. 설치 과정에서 확인할 수 있듯이, 릴리스 페이지에서 제공하는 파일은 Microsoft에서 공식적으로 개발중인 버전으로 신뢰할 수 있는 Microsoft Store 앱입니다. 업데이트를 클릭해 설치를 진행합니다.
winget 설치가 완료된 화면 설치가 끝나면 위와 같은 화면이 나타납니다. 별도로 종료 버튼이 없으니, 설치 창은 종료해주시기바랍니다.
winget 명령어 설치 확인# 이제 가상 터미널에서 winget 명령어로 패키지를 설치할 수 있습니다. 간단히 테스트를 위해서 Windows Terminal이나 Powershell을 실행해주세요. 아직 Windows Terminal을 설치하지 않았다면 먼저 설치하는 것을 추천합니다. (이미 셸이 실행되어있었다면 터미널을 재실행해야 winget이 정상적으로 실행됩니다.)
관련 글:Windows Terminal(PowerShell, WSL2 등) 설치하는 방법 셸에서 winget 명령어를 입력해보면 v1.0.11451이 설치된 것을 확인할 수 있습니다. winget install --id GitHub.cli 설치가 완료되면, 터미널에서 다음 명령어로 GitHub에 로그인합니다: gh auth login 로그인 과정 중 GitHub.com과 HTTPS를 선택한 후 GitHub 계정 정보를 입력합니다. macOS 설치 방법 터미널을 열고 다음 명령어를 입력하여 Homebrew를 설치합니다(이미 설치되어 있다면 생략 가능): Homebrew 공식 홈페이지
https://brew.sh/ Homebrew 설치하기 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
MacBook 패스워드를 입력 한 후 설치를 계속 진행한다.
계속 진행하기 위해 엔터키를 누르고 이제 설치가 끝날 때 까지 기다리면 된다.
설치 완료 후 터미널에 brew --verwion 명령을 입력한다.
$ brew --version zsh: command not found: brew 만약 위와 같은 오류가 발생한다면 Homebrew 경로를 추가한다.
$ echo 'export PATH=/opt/homebrew/bin:$PATH' >> ~/.zshrc
$ source ~/.zshrc
위와 같이 버전이 정상적으로 표시된다면 이제 Homebrew를 사용할 수 있다.
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" 다음 명령어를 입력해 GitHub CLI를 설치합니다:
brew install gh 설치 후, 다음 명령어로 GitHub에 로그인합니다:
gh auth login 결과 확인 로그인이 완료되면, gh auth status 명령어를 실행하여 로그인 상태를 확인합니다. 성공적으로 로그인되었다면, GitHub CLI가 준비된 것입니다.
- Azure 설정 Azure는 Microsoft의 클라우드 서비스로, 다양한 애플리케이션을 호스팅하고 관리할 수 있습니다. 이 단계에서는 Azure CLI와 Azure Developer CLI를 설치하고 설정합니다.
Azure 계정 생성 Azure 공식 사이트에 접속합니다. 무료로 시작 버튼을 클릭하고, 필요한 정보를 입력하여 계정을 생성합니다. Azure 계정이 생성되면, Azure 포털에 로그인하여 클라우드 서비스를 관리할 수 있습니다. Azure CLI 설치 Azure CLI는 Azure 리소스를 명령줄에서 관리할 수 있는 도구입니다. 이 도구를 사용하면 리소스 그룹 생성, 배포, 모니터링 등을 수행할 수 있습니다.
Windows 설치 방법 PowerShell 또는 명령 프롬프트를 열고, 다음 명령어를 실행합니다:
Invoke-WebRequest -Uri https://aka.ms/installazurecliwindows -OutFile .\AzureCLI.msi; Start-Process msiexec.exe -ArgumentList '/I AzureCLI.msi /quiet /norestart' -NoNewWindow -Wait 설치가 완료되면, az --version 명령어를 실행하여 설치가 정상적으로 완료되었는지 확인합니다.
macOS 설치 방법 터미널을 열고, 다음 명령어를 실행합니다:
brew update && brew install azure-cli 설치가 완료되면, az --version 명령어를 실행하여 설치가 정상적으로 완료되었는지 확인합니다.
Azure Developer CLI 설치 Azure Developer CLI는 개발자들이 Azure에서 애플리케이션을 빠르고 쉽게 배포하고 관리할 수 있도록 돕는 도구입니다.
Windows 및 macOS 공통 설치 방법 터미널 또는 PowerShell을 열고, 다음 명령어를 실행합니다:
az extension add --name azure-dev 설치가 완료되면, azd auth login 명령어를 사용하여 Azure Developer CLI에 로그인합니다.
Azure Resource Group 생성 터미널 또는 PowerShell에서 다음 명령어를 사용해 자원 그룹을 생성합니다. 자원 그룹은 Azure에서 리소스들을 묶어서 관리할 수 있게 해주는 단위입니다:
az group create --name myResourceGroup --location eastus 명령어가 성공적으로 실행되면, Azure 포털에서 myResourceGroup이라는 이름의 자원 그룹을 확인할 수 있습니다.
결과 확인 Azure CLI와 Azure Developer CLI가 정상적으로 설치되고, Azure 계정에 로그인된 상태라면 az account show 명령어를 실행하여 계정 정보를 확인할 수 있습니다.
- Node.js 설치 및 React.js, Express.js 설정 Node.js는 서버 사이드 자바스크립트 환경으로, 웹 애플리케이션 개발에 자주 사용됩니다. React.js와 Express.js는 각각 프론트엔드와 백엔드 개발을 위한 자바스크립트 프레임워크입니다.
Node.js 설치 Node.js 공식 사이트에 접속하여 LTS(Long Term Support) 버전을 다운로드합니다.
운영체제에 맞는 설치 파일을 다운로드한 후 설치를 진행합니다.
설치가 완료되면, 터미널 또는 PowerShell을 열고 다음 명령어를 입력하여 설치된 버전을 확인합니다:
node -v npm -v React.js 프로젝트 생성 VS Code를 실행하고, 터미널을 엽니다.
다음 명령어를 입력하여 React.js 프로젝트를 생성합니다:
npx create-react-app my-app 생성된 프로젝트 디렉토리로 이동합니다:
cd my-app Express.js 프로젝트 생성 VS Code 터미널에서 다음 명령어를 입력하여 Express.js 프로젝트를 생성합니다:
npx express-generator my-express-app 생성된 프로젝트 디렉토리로 이동하고, 필요한 패키지를 설치합니다:
cd my-express-app npm install 결과 확인 각 프로젝트가 생성되면, npm start 명령어를 실행하여 서버가 정상적으로 실행되는지 확인합니다.
- VS Code Extensions 설치 VS Code Extensions는 개발 경험을 향상시키기 위해 추가 기능을 제공합니다. GitHub와 Azure와 같은 도구들과 통합할 수 있는 확장 프로그램들을 설치합니다.
설치할 확장 프로그램 목록 GitHub: GitHub와의 통합 기능을 제공합니다. Azure Tools: Azure 리소스를 관리할 수 있는 확장 프로그램입니다. ESLint: 코드 스타일을 검사하고 정리하는 도구입니다. Prettier: 코드 포맷팅 도구로, 코드를 자동으로 정리해줍니다. 확장 프로그램 설치 방법 VS Code를 열고, 좌측의 Extensions 탭(사각형 아이콘)을 클릭합니다.
각각의 확장 프로그램을 검색하여 설치합니다.
예: ESLint를 검색하고, Install 버튼을 클릭합니다.
결과 확인 모든 확장 프로그램이 설치되면, VS Code에서 코드 작성을 시작할 때 각 확장 프로그램의 기능이 작동하는지 확인합니다.
- Git 및 프로젝트 관리 이 단계에서는 Git을 사용해 프로젝트를 GitHub에 업로드하는 방법을 다룹니다.
GitHub에 프로젝트 업로드 VS Code 터미널에서 아래 명령어를 사용하여 Git 저장소를 초기화합니다:
git init 프로젝트의 모든 파일을 Git에 추가합니다:
git add . 커밋 메시지를 작성하여 변경 사항을 커밋합니다:
git commit -m "Initial commit" GitHub에 새 저장소를 생성한 후, 이를 원격 저장소로 추가합니다:
git remote add origin https://github.com/{YOUR_USERNAME}/{REPO_NAME}.git 마지막으로, 프로젝트를 GitHub에 푸시합니다:
git push -u origin master 결과 확인 GitHub에 업로드된 프로젝트를 확인하려면, GitHub 사이트에서 해당 저장소로 이동하여 파일들이 정상적으로 업로드되었는지 확인합니다.
먼저 hackersground-kr/streetree 저장소를 자신의 GitHub 계정으로 포크해야합니다.
우측 상단의 Fork 버튼을 눌러주세요.
이후 초록색 Create Fork 버튼을 눌러 포크할 수 있습니다.
포크된 저장소로 이동한 후
사진 순서에 따라 포크된 저장소 URL을 복사해줍니다.
이후 터미널을 열고 다음 명령을 입력합니다
git clone 복사한URL cd hg-streetree
아래 명령을 입력하여 Azure Developer CLI, Azure CLI, GitHub CLI에 로그인합니다.
# Azure Developer CLI login azd auth login # Azure CLI login az login # GitHub CLI login gh auth login
이후 아래 명령을 입력하여 로그인 여부를 확인합니다.
# Azure Developer CLI azd auth login --check-status # Azure CLI az account show # GitHub CLI gh auth status
AzureSQL 구축을 위해 https://portal.azure.com/#home에 접속합니다.
이후 SQL databases를 클릭해주세요.
좌측 상단의 만들기 를 눌러주세요.
만들어둔 리소스를 선택해주세요.
데이터베이스 이름을 입력 후 밑에 있는 새로 만들기를 클릭합니다.
서버 이름 작성 후 위치는 korea central를 선택합니다. sql 인증 사용 선택 후 서버 관리자 아이디와 비밀번호를 작성합니다.
이전 페이지로 돌아와서
워크로드 환경으로 개발, 백업 스토리지 중복으로는 지역 중복 백업 스토리지를 선택합니다.
이후 다음:네트워킹> 을 클릭해주세요.
현재 클라이언트 IP 주소 추가를 예로 변경합니다.
추가 설정 탭에서 기존 데이터 사용을 없음으로 설정합니다.
마지막으로 검토 + 만들기를 선택해줍니다.
프로젝트가 있는 깃허브의 레포지토리로 갑니다.
상단의 Settings을 찾은 후 누릅니다.
Security탭 안의 Secrets and variables에서 Actions를 찾아 누릅니다.
New repository secret라고 적혀있는 초록색 버튼을 누릅니다.
Name에 이름을 적고, 밑의 Secret란에는 값을 적어야합니다. 다음을 보고 참고해주세요.
AZDB_USERNAME: AzureSQL의 사용자 이름
AZDB_PASSWORD: AzureSQL의 사용자 패스워드
AZDB_SERVER: AzureSQL의 서버 이름
AZDB_DATABASE: AzureSQL의 데이터베이스 이름
배포 초기 설정을 위해 터미널에서 아래 명령을 실행합니다.
(vscode 기준 Ctrl+` 로 터미널을 열 수 있습니다.)# {{ }} 로 감싸진 텍스트는 모두 지우고 자신의(팀의) 깃허브 아이디를 넣어줍니다. # Mac AZURE_ENV_NAME = "{{ GITHUB_ID }}" # Windows $AZURE_ENV_NAME = "{{ GITHUB_ID }}" azd init -e $AZURE_ENV_NAME
Use code in the current directory을 선택해줍니다.
클라이언트 포트는 80을 입력합니다.
서버 포트는 3000을 입력합니다.
이름으로 streetree를 입력합니다.
다음으로 배포 환경 설정을 위한
azd provision명령을 입력합니다.
구독과 지역을 선택해주세요. (아래 사진처럼 Hackers Ground, Korea Central 권장)
위 작업이 끝난 후 배포를 위한
azd up명령을 실행하면 됩니다.
지역은 koreacentral을 선택합니다.
리소스 그룹을 물으면 rg-streetree를 입력합니다.
다 되었다면, 아래 명령을 입력해 변경사항을 커밋합니다.
git add . git commit -m "[[사용자 지정]]" git push origin main
이후 깃허브 저장소 페이지에 들어갑니다.
Action 탭에서 커밋한 시점의 워크플로우가 성공되는지 확인합니다.
거의 끝났습니다.
az container create ` --resource-group {{ RESOURCE_GROUP }} ` --name dbconfig ` --image {{ IMAGE_NAME }} ` --environment-variables AZDB_USERNAME={{ AZDB_USERNAME }} AZDB_PASSWORD={{ AZDB_PASSWORD }} AZDB_SERVER={{ AZDB_SERVER }} AZDB_DATABASE={{ AZDB_DATABASE }} 윈도우 파워셸이 아닌 환경에선 백텍(`) 대신 역슬레시(\)를 사용하도록 합니다
{{ RESOURCE_GROUP }}텍스트를 자신의(팀의) 애저 리소스 그룹 이름으로
{{ IMAGE_NAME }}텍스트를 컨테이너 이미지의 이름으로
{{ AZDB_USERNAME }}텍스트를 AzureSQL 사용자 이름으로
{{ AZDB_PASSWORD }}텍스트를 AzureSQL 비밀번호로
{{ AZDB_SERVER }}텍스트를 AzureSQL 서버 이름으로
{{ AZDB_DATABASE }}텍스트를 AzureSQL 데이터베이스 이름으로
전부 바꿔 터미널에 실행해주세요.
다시 프로젝트가 있는 깃허브의 레포지토리로 갑니다.
상단의 Settings을 찾은 후 누릅니다.
Security탭 안의 Secrets and variables에서 Actions를 찾아 누릅니다.
name에
SERVER URL과 Secret값에 복사한 서버 애플리케이션 URL을 입력하고 커밋합니다.