해커그라운드 해커톤에 참여하는 WE 팀의 WE_IN입니다.
아래 두 링크는 해커톤에서 앱을 개발하면서 참고할 만한 문서들입니다. 이 문서들에서 언급한 서비스 이외에도 더 많은 서비스들이 PaaS, SaaS, 서버리스 형태로 제공되니 참고하세요.
아래 제공하는 설치 방법을 통해 심사위원단이 여러분의 제품/서비스를 실제 Microsoft 애저 클라우드에 배포하고 설치할 수 있어야 합니다. 만약 아래 설치 방법대로 따라해서 배포 및 설치가 되지 않을 경우 본선에 진출할 수 없습니다.
- https://github.com/hackersground-kr/WE 로 접속해서 레포지토리를 fork 해온다.
- fork 해온 레포지토리를 터미널에서 연다.
터미널에 다음 명령어를 순서대로 입력한다.- cd Front/WE_IN 을 입력해 해당 폴더로 들어간다.
- npm install
- npm run build
- dist 파일 생성 되었는지 확인 한다 -> .gitignore 파일에서 dist 관련된 파일을 모두 주석처리한다. (node_modules 밑에 두줄을 주석처리한다)
- git push 해서 dist 파일이 나의 포크레포지토리에 올라온 것을 확인한다.
- https://portal.azure.com/#home 에 접속합니다. (로그인 필요)
- 리소스 만들기 -> 웹/앱 만들기로 들어간다
-
프로젝트 세부 정보
-
인스턴스 정보
이름 : "임의 작성"
게시 : 정적 웹 앱 -
Azure Functions 및 준비 세부 정보 : East Asia를 제외한 모든 나라 중에 하나를 선택하면 된다.(EX) CentralUS)
-
배포 세부 정보 : GitHub
조직 : 본인 깃헙 아이디
리포지토리 : 포크해온 리포지 토리 (=WE)
분기 : main -
빌드 세부 정보 : React
앱 위치 : /Front/WE_IN/dist
API 위치 : (생략)
출력 위치 : build -
검토
-
여러분의 제품/서비스를 Microsoft 애저 클라우드에 배포하기 위해 사전에 필요한 준비 사항들을 적어주세요.
[Frontend]
https://witty-sea-035169410.3.azurestaticapps.net/
애저 SQL
1. 애저 포탈에 접속한다. https://portal.azure.com/#home
-
팀 리소스 그룹에 접속한다.
-
왼쪽 상단의 만들기를 클릭한다.
-
SQL 데이터베이스를 선택한다.
-
만들기를 누른다.
-
리소스 그룹을 정해주고, 데이터베이스 이름을 정하고, 서버를 새로 만든다. 그런 다음, 검토 + 만들기를 누르면 생성이 된다.
-
WE 레퍼지토리를 내 레포지토리로 포크 해온다. https://github.com/hackersground-kr/WE/tree/main
-
사진에 있는 것처럼 pom.xml에 dependency를 추가한다.
-
SQL 데이터베이스에 왼쪽 메뉴에 설정 > 연결 문자열 > JDBC에 있는 SQL 인증을 사진에 맞게 application.properties에 작성한다.
-
추가로 application.properties에 설정한 유저의 아이디와 비밀번호를 작성한다.
-
project를 실행한다.
서버배포
-
팀 리소스 그룹에 접속한다.
-
왼쪽 상단의 만들기를 클릭한다.
-
웹 앱을 선택한다.
-
만들기를 누른다.
-
리소스 그룹을 선택하고, 이름 작성하고 런타임 스택은 각자가 개발하는 것에 맞게 하고 검토 + 만들기 한다.
-
만들어진 서버의 왼쪽의 배포 > 배포 센터에 접속한다.
-
상단의 설정을 눌러서 현재 연결하고자 하는 깃허브 프로젝트와 연결한다.
-
깃허브로 돌아가서 build와 deploy과정을 지켜본다.
-
완료가 되면, server주소를 가지고 접속을 해본다.
https://wein-server.azurewebsites.net
여러분의 제품/서비스를 Microsoft 애저 클라우드에 배포하기 위한 절차를 구체적으로 나열해 주세요.