Skip to content
This repository has been archived by the owner on Aug 28, 2024. It is now read-only.

hackersground-kr/hg-FiveSelves

Repository files navigation

다섯가지자아 - 주르르

해커그라운드 해커톤에 참여하는 다섯가지자아 팀의 주르르입니다.

참고 문서

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

제품/서비스 소개

제품/서비스 소개 보기

오픈 소스 라이센스

오픈소스 라이센스 보기

설치 방법

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

사전 준비 사항

여러분의 제품/서비스를 Microsoft 애저 클라우드에 배포하기 위해 사전에 필요한 준비 사항들을 적어주세요.

시작하기 (Client)

Step1. 에저포탈에 접속한다.

Step2. 가지고 있는 계정으로 로그인 해준다.

image

Step3. 리소스그룹 클릭

스크린샷 2024-08-26 오전 9 32 00

Step4. 자신이 속한 그룹을 검색하고 들어가준다.

스크린샷 2024-08-26 오전 9 34 19

Step5. 새로운 서비스를 만들어준다.

스크린샷 2024-08-26 오전 9 35 51

Step6. Static Web App을 검색 후 정적 웹앱을 서비스를 만들어준다.

스크린샷 2024-08-26 오후 1 01 35 스크린샷 2024-08-26 오후 1 02 51

Step7. 웹앱 설정을 해준다.

스크린샷 2024-08-26 오전 9 40 28 스크린샷 2024-08-26 오전 9 41 43

먼저 리소스그룹을 선택해준다. Step3에서 선택한 리소스그룹과 같은 그룹을 선택해주면 된다.


스크린샷 2024-08-26 오후 1 06 45

이름을 입력해준다.

스크린샷 2024-08-26 오후 4 57 26

그다음 링크에 들어가서 깃허브 포크를 받아준다.

스크린샷 2024-08-26 오후 4 58 19

그리고 이름을 설정해준다.

스크린샷 2024-08-26 오전 9 46 07

여기서 자신의 이름가 위에서 설정한 포크한 레포지토리 이름을 선택해준다.

중요!

조직 : {자기 GitHub ID}
레포지토리 : {바꾸지 않았다면 hg-FiveSelves 포크할때 바꿔다면 바꾼 레포 이름}
브랜치 : {main}

스크린샷 2024-08-26 오후 6 14 26

main 브랜치를 선택해주어야한다.

그리고 조금 기다리면 빌드세부 정보를 선택할 수 있는데 거기서 앱 위치를 ./client로 설정해준다. (보통은 자동으로 된다.)

스크린샷 2024-08-26 오전 9 48 24

검토 + 만들기를 클릭해서 검토를 먼저해준다.

스크린샷 2024-08-26 오전 9 48 57

만들기를 클릭해서 서비스를 만들어준다.

스크린샷 2024-08-26 오전 9 49 54

조금만 기다려주면

스크린샷 2024-08-26 오전 9 51 06

배포가 완료된다.

Step8. 내 서비스 확인 및 접속해보기

스크린샷 2024-08-26 오전 9 51 59

리소스로 이동을 클릭

스크린샷 2024-08-26 오후 6 24 21

"만약 배포가 완료됨"이 안떴는데 리소스로 이동했다면

스크린샷 2024-08-26 오후 6 27 36

상태가 "준비됨"이 될때까지 기다려주어야한다. 이때 무작정 기다리지 말고 가끔씩 리프레쉬해주어야한다.

스크린샷 2024-08-26 오전 9 53 08

URL 부분을 확인하면 배포 URL을 확인할 수 있다.

스크린샷 2024-08-26 오전 9 53 52

배포는 끝이다

번외

스크린샷 2024-08-26 오전 9 56 58

깃허브에 push를 하게되면 자동으로 CI/CD가 작동하는 것을 확인할 수 있다.

시작하기 (Server) - 만약 선행에 있었던 client부분 중 fork내용을 따라하셨다면 아래에 있는 fork부분은 생략이 가능합니다.

스크린샷 2024-08-26 오후 4 57 26

링크에 들어가서 깃허브 포크를 받아준다.

스크린샷 2024-08-26 오후 4 58 19

그리고 이름을 설정해준다.

스크린샷 2024-08-26 오후 7 55 15 초록색 버튼을 눌려 활성화를 해준다

포크 딴 레포로 넘어가기

스크린샷 2024-08-26 오후 6 37 45 Settings로 넘어가기 스크린샷 2024-08-26 오후 6 42 13 Secrets and variables > Actions > new Repository secret을 누른 후 스크린샷 2024-08-26 오후 6 43 54 위에 있는 사진의 공란에 맞게 아래의 내용을 수행

Name - DOCKER_NICKNAME

Secret - {도커 유저 닉네임}

이것을 한번더 반복

Name - DOCKER_USERNAME

Secret - {도커 유저 네임}

이것을 한번더 반복

Name - DOCKER_PASSWORD

Secret - {도커 비밀번호 입력}

  • NICKNAME, USERNAME, PASSWORD이란?

https://login.docker.com에서 첫 번째 공란이 USERNAME, 아래에 비밀번호 부분이 PASSWORD

스크린샷 2024-08-27 오전 12 28 39

위에 과정을 토대로 로그인을 한 후

스크린샷 2024-08-27 오전 12 29 51

프로필 사진을 누르면 나오는 닉네임이 즉 NICKNAME됩니다.

스크린샷 2024-08-26 오후 11 26 07 Build and Push Docker Image > Run workflow > Run workflow

배포가 완료되는 것이 확인되면 다음으로 넘어가면 된다

Step1. 에저포탈에 접속한다.

Step2. 가지고 있는 계정으로 로그인 해준다.

image

Step3. 리소스그룹 클릭

스크린샷 2024-08-26 오전 9 32 00

Step4. 자신이 속한 그룹을 검색하고 들어가준다.

스크린샷 2024-08-26 오전 9 34 19

Step5. 새로운 서비스를 만들어준다.

스크린샷 2024-08-26 오전 9 35 51

Step6. '컨테이너 앱'을 검색한 후 컨테이너 앱을 선택한다

스크린샷 2024-08-26 오후 5 13 08 - 만들기 -> 컨테이너 앱 클릭

Step7. 새로만들기 클릭

스크린샷 2024-08-26 오후 5 18 57

Step8. 각 항목 입력

스크린샷 2024-08-26 오후 5 17 45 환경이름 - 'fiveSelves' 입력 영역중복 - '사용 안함' 클릭

Step9. 새로만들기 클릭

스크린샷 2024-08-26 오후 5 15 57 구독 - 자신이 속한 그룹 클릭 리소스 그룹 - 자신이 속한 리소스 그룹 클릭 컨테이너 앱 이름 - 'fiveSelves' 입력 배포 원본 - '컨테이너 이미지'클릭 지역 - 'Korea Central' 선택 컨테이너 앱 환경 - Step.8에서 만들었던 '환경이름' 클릭

컨테이너로 넘어가기

Step10. 컨테이너

스크린샷 2024-08-26 오후 5 25 29 이름 - 'fiveSelves'입력 이미지 원본 - 'Docker Hub 또는 기타 레지스트리' 선택 이미지 형식 - '공개' 선택 이미지 및 태그 - '{docker 아이디}/five:latest' 입력 (중괄호 안에는 자신의 도커 아이디 작성)

바인딩을 지나 수신으로 넘어가기

Step11. 수신

스크린샷 2024-08-26 오후 5 30 41 수신 - 체크박스 체크하기 수신 트래픽 - '어디서나 트래픽 허용'클릭 수신 유형 - 'HTTP' 클릭 대산 포트 - '8080'입력

왼쪽 하단에 '검토 + 만들기'를 누른 후 '만들기'를 누르기

배포 진행중 기다리기.. 스크린샷 2024-08-26 오후 5 36 18

끝난 후 리소스로 이동 클릭 스크린샷 2024-08-26 오후 5 45 52

Step12. 배포

스크린샷 2024-08-26 오후 5 51 35 설정 > 배포로 이동한 후 'Github로 로그인'을 선택해줍니다. 스크린샷 2024-08-26 오후 5 53 27

Step13. 배포2

스크린샷 2024-08-26 오후 5 57 09 조직 - 자신의 깃허브 닉네임 클릭 리포지토리 - 클론받은 리포지토리 선택 분기 - 'main'입력 리포지토리 원본 - 'Docker Hub 또는 기타 레지스트리'선택 이미지 - 'anys34/five:latest'입력 로그인 서버 URL - 'docker.io'입력 사용자 이름 - 도커 아이디 입력 암호 - 도커 비밀번호 입력

그 후 '연속 배포 시작' 클릭


이제 메인브렌치가 바뀔 때 마다 배포가 됩니당

번외

스크린샷 2024-08-27 오전 1 05 52

만약 빌드를 하는 과정중에 이 에러가 발생한다면...

스크린샷 2024-08-27 오전 1 07 23 스크린샷 2024-08-27 오전 1 07 40

에저에가서 이 토큰을 메모해두고

스크린샷 2024-08-27 오전 1 10 07

WorkFlow File을 클릭해서 에저 시크릿키 이름을 메모한다.

스크린샷 2024-08-27 오전 1 10 33

위에는 시크릿키 이름을 밑에는 에저에서 복사한 시크릿키를 넣어주면

스크린샷 2024-08-27 오전 1 14 45

정상적으로 잘 작동한다.