Java 기반의 Spring 백엔드와 React 기반의 프론트엔드 앱을 GitHub Codespaces 안에서 GitHub Copilot을 이용해서 빌드하고 애저 및 파워 앱에 배포하는 핸즈온랩입니다.
이 핸즈온랩을 끝마치면 여러분은 아래와 같은 내용을 학습할 수 있습니다.
- 인프라스트럭처
- 프론트엔드 애플리케이션
- 백엔드 애플리케이션
- 애저 앱서비스 – Spring 기반
- 애저 Kubernetes 서비스 (AKS) – Spring 기반
- 애저 PostgreSQL 데이터베이스
-
이 리포지토리를 자신의 계정으로 포크합니다.
-
코드스페이스를 실행시킵니다.
-
api/src/main/java/roadshow/demo/api/controller/MessageController.java파일을 열어 아래 라인의 주석을 해제해서 CORS를 활성화 시킵니다.// ⬇️⬇️⬇️ Uncomment the line below to enable CORS ⬇️⬇️⬇️ // @CrossOrigin(origins = ALLOWED_ORIGINS) // ⬆️⬆️⬆️ Uncomment the line above to enable CORS ⬆️⬆️⬆️ @PostMapping public MessageResponse sendMessage(@RequestBody MessageRequest request) throws JsonMappingException, JsonProcessingException {
-
api/src/main/resources/application-dev.properties파일을 생성한 후 아래 내용을 입력합니다.{{Azure_OpenAI_Service_Endpoint}}값과{{Azure_OpenAI_Service_API_Key}}값은 아래 프로비저닝할 애저 OpenAI 서비스 인스턴스를 참조합니다.AOAI_API_ENDPOINT={{Azure_OpenAI_Service_Endpoint}} AOAI_API_KEY={{Azure_OpenAI_Service_API_Key}} CORS_ORIGIN=https://${CODESPACE_NAME}-3000.${GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN}
-
새 터미널을 열고 아래 명령어를 순서대로 적용해 백엔드 앱을 실행시킵니다.
-
mvn사용할 경우cd api mvn spring-boot:run -
mvnw사용할 경우cd api ./mvnw spring-boot:run -
코드스페이스 디버거 사용할 경우
-
-
새 터미널을 하나 열고 아래 명령어를 순서대로 적용해 프론트엔드 앱을 실행시킵니다.
cd web npm install npm run start:codespace -
아래 그림과 같이 3000번 포트와 8080번 포트를 Private 에서 Public으로 바꿉니다.
-
웹 앱에 접속합니다.
-
이 리포지토리를 자신의 계정으로 포크합니다.
-
아래 명령어를 차례대로 실행시켜 애저에 리소스를 프로비저닝합니다.
azd auth login --use-device-code=false azd init azd up azd pipeline config
GitHub 코드스페이스 안에서
azd auth login --use-device-code=false명령어를 사용해서 로그인하는 경우, 최초 404 에러가 날 수 있습니다. 이 때azd auth login --use-device-code=false명령어를 친 터미널을 종료하지 말고, 주소창의http://localhost:...링크를 전체 복사합니다. 코드스페이스 안에서 새 터미널을zsh로 연 후curl명렁어를 통해 실행시키세요. -
아래 명령어를 차례로 실행시켜 애플리케이션을 배포합니다.
gh auth login gh workflow run "Azure Dev" --repo $GITHUB_REPOSITORY
만약
gh auth login명령어를 실행시키는 도중 에러가 발생하면GITHUB_TOKEN=명령어를 실행시켜 토큰을 초기화한 후 다시 실행시킵니다. -
배포가 끝난 후 애저 포털에서 애저 정적 웹 앱 인스턴스를 찾아 실행시켜 제대로 배포가 되었는지 확인합니다.
-
실행이 다 끝났다면 아래 명령어를 통해 리소스를 삭제합니다.
# 리소스 삭제 azd down --force # APIM 완전 삭제 pwsh ./infra/Purge-ApiManagement.ps1 # Cognitive 서비스 완전 삭제 pwsh ./infra/Purge-CognitiveService.ps1
TBD
TBD
TBD