WE팀 - WE_IN (노인과 청년이 함께하는 원데이 클래스)

해커그라운드 해커톤에 참여하는 WE 팀의 WE_IN입니다.

참고 문서

아래 두 링크는 해커톤에서 앱을 개발하면서 참고할 만한 문서들입니다. 이 문서들에서 언급한 서비스 이외에도 더 많은 서비스들이 PaaS, SaaS, 서버리스 형태로 제공되니 참고하세요.

• 순한맛
• 매운맛

제품/서비스 소개

제품/서비스 소개 보기

오픈 소스 라이센스

오픈소스 라이센스 보기

설치 방법

아래 제공하는 설치 방법을 통해 심사위원단이 여러분의 제품/서비스를 실제 Microsoft 애저 클라우드에 배포하고 설치할 수 있어야 합니다. 만약 아래 설치 방법대로 따라해서 배포 및 설치가 되지 않을 경우 본선에 진출할 수 없습니다.

[Frontend]

0. https://github.com/hackersground-kr/WE 로 접속해서 레포지토리를 fork 해온다.
   
1. fork 해온 레포지토리를 터미널에서 연다.
   터미널에 다음 명령어를 순서대로 입력한다.
   • cd Front/WE_IN 을 입력해 해당 폴더로 들어간다.
   • npm install
   • npm run build
   • dist 파일 생성 되었는지 확인 한다 -> .gitignore 파일에서 dist 관련된 파일을 모두 주석처리한다. (node_modules 밑에 두줄을 주석처리한다)


- git push 해서 dist 파일이 나의 포크레포지토리에 올라온 것을 확인한다.

2. https://portal.azure.com/#home 에 접속합니다. (로그인 필요)
3. 리소스 만들기 -> 웹/앱 만들기로 들어간다

   • 프로젝트 세부 정보

   • 인스턴스 정보
     이름 : "임의 작성"
     게시 : 정적 웹 앱
     

   • 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/

[Backend]

애저 SQL

1. 애저 포탈에 접속한다. https://portal.azure.com/#home

2. 팀 리소스 그룹에 접속한다.

3. 왼쪽 상단의 만들기를 클릭한다.

4. SQL 데이터베이스를 선택한다.

5. 만들기를 누른다.

6. 리소스 그룹을 정해주고, 데이터베이스 이름을 정하고, 서버를 새로 만든다. 그런 다음, 검토 + 만들기를 누르면 생성이 된다.

7. WE 레퍼지토리를 내 레포지토리로 포크 해온다. https://github.com/hackersground-kr/WE/tree/main

8. 사진에 있는 것처럼 pom.xml에 dependency를 추가한다.

9. SQL 데이터베이스에 왼쪽 메뉴에 설정 > 연결 문자열 > JDBC에 있는 SQL 인증을 사진에 맞게 application.properties에 작성한다.

10. 추가로 application.properties에 설정한 유저의 아이디와 비밀번호를 작성한다.

11. project를 실행한다.

서버배포

1. 팀 리소스 그룹에 접속한다.

2. 왼쪽 상단의 만들기를 클릭한다.

3. 웹 앱을 선택한다.

4. 만들기를 누른다.

5. 리소스 그룹을 선택하고, 이름 작성하고 런타임 스택은 각자가 개발하는 것에 맞게 하고 검토 + 만들기 한다.

6. 만들어진 서버의 왼쪽의 배포 > 배포 센터에 접속한다.

7. 상단의 설정을 눌러서 현재 연결하고자 하는 깃허브 프로젝트와 연결한다.

8. 깃허브로 돌아가서 build와 deploy과정을 지켜본다.
   

9. 완료가 되면, server주소를 가지고 접속을 해본다.

배포 완성 사진

https://wein-server.azurewebsites.net

배포 후 SQL 보는 법

시작하기

여러분의 제품/서비스를 Microsoft 애저 클라우드에 배포하기 위한 절차를 구체적으로 나열해 주세요.