CDC(씨다씨) - 노랑로당 🌻

해커그라운드 해커톤에 참여하는 CDC(씨다씨)팀의 노랑로당 🌻입니다.

참고 문서

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

• 순한맛
• 매운맛

제품/서비스 소개

제품/서비스 소개 보기

오픈 소스 라이센스

오픈소스 라이센스 보기

설치 방법

사전 준비 사항

• GitHub Account
• Visual Studio Code
• GitHub CLI
• Azure CLI
• Azure Developer CLI
• Azure Account
• Azure Resource Group
• Node js
• npm
• pnpm
• yarn

AI 및 DB 시작하기

Note. Github Actions와 Bicep을 사용하였습니다

1. 이 리포지토리를 포크하고 다음 명령어로 클론합니다.

$GITHUB_USERNAME = "{{자신의 GitHub ID}}"
git clone https://github.com/$GITHUB_USERNAME/hg-CDC-team.git
cd hg-CDC-team

2. 다음과 같이 에저를 프로비저닝 합니다. (윈도우 기준)

$AZURE_ENV_NAME="CDC-team"
$AZURE_LOCATION="koreacentral"
$AZURE_RESOURCE_GROUP="rg-CDC-team"

az login
azd auth login
azd init -e $AZURE_ENV_NAME
azd env set AZURE_ENV_NAME $AZURE_ENV_NAME
azd env set AZURE_LOCATION $AZURE_LOCATION
azd env set AZURE_RESOURCE_GROUP $AZURE_RESOURCE_GROUP
azd config set alpha.resourceGroupDeployments on

# azd up을 하기전 생성된 azure.yaml파일을 아래와 같이 수정해주세요.
name: hg-CDC-team

infra:
  provider: "bicep"
  path: "infra"
  module: "main"

pipeline:
  provider: "github"

# Deploy
azd up

3. 다음과 같이 github workflow 시크릿을 설정합니다. (윈도우 기준)

# AI Deploy
az webapp deployment list-publishing-profiles --name "$AZURE_ENV_NAME-ai" --resource-group $AZURE_RESOURCE_GROUP --xml > ai_publish_profile.xml

gh auth login
gh secret set AZURE_AI_APP_NAME --repo hackersground-kr/hg-CDC-team --body "${AZURE_ENV_NAME}-ai"
cat ai_publish_profile.xml | gh secret set AZURE_AI_WEBAPP_PUBLISH_PROFILE --repo hackersground-kr/hg-CDC-team

4. 포크한 리포지토리의 Github Push를 해 Actions를 활성화 해줍니다.

git add .
git commit -m "initial commit"
git push origin main

5. 깃허브에 접속해 github actions workflow를 실행을 확인합니다.

6. 배포가 완료될때까지 기다립니다. (10분 가량 소요됩니다.)

7. 다음과 같이 백엔드 배포를 확인합니다.

iwr https://$AZURE_ENV_NAME-ai.azurewebsites.net/location

백엔드 시작하기

1. 백엔드 폴더로 이동해줍니다.

cd backend # 경로의 유의 해주세요. (자신의 현재 경로에 맞게)

2. pnpm install 명령어를 입력해줍니다.

pnpm install

3. .env파일 설정하기 (값을 입력해주세요.)

DB_HOST=
DB_PORT=
DB_USERNAME=
DB_PASSWORD=
DB_DATABASE=
JWT_SECRET=
JWT_ACCESS_TOKEN_EXPIRATION=
JWT_REFRESH_TOKEN_EXPIRATION=
CONNECTION_STRING=

4. 백엔드를 로컬에서 실행해줍니다.

pnpm start:dev

5. 깃허브 액션에서 사용할 시크릿을 사진과 같이 설정해줍니다.

6. 깃허브 액션 파일이 작성되어있으니 git push를 통해 액션을 돌립니다.

   다음과 같이 성공된 모습을 볼 수 있습니다.

프론트엔드 시작하기

1. 프론트엔드 폴더로 이동해줍니다.

cd frontend # 경로의 유의 해주세요. (자신의 현재 경로에 맞게)

2. 환경변수를 설정해줍니다.

REACT_APP_KAKAO_KEY=746c698dca1feb40e6d1748fc65304af # 맵 키

3. yarn 명령어를 입력해줍니다.

yarn

4. yarn 명령어를 이용해 프론트엔드를 시작해줍니다.

yarn start # 로컬에서 잘 실행되는지 확인 해주세요.

5. 로컬에서 잘 실행된다면 배포단계로 넘어갑니다

Azure Portal에 접속해 App Service를 클릭합니다.

App Service에서 만들기 > "웹 앱" 을 선택해줍니다.

만들기 메뉴에서 위 사진과 같이 리소스 그룹, 인스턴스 정보 게시 등 별표가 있는 필수요소를 입력해줍니다. 다음으로 태그 를 입력해줍니다.

마지막으로 검토 후 만들기를 누릅니다.

생성이 될때 까지 잠시 기다린 후 Go to resource를 눌러줍니다. (리소스 보러 가기)

다음으로 VSCode를 열어주고 위의 3가지 익스텐션을 설치 해줍니다.

설치 후 Azure Icon을 눌러서 Sign in to Azure를 눌러줍니다.

Azure에 로그인 후 AppService Icon을 눌러 주고 배포할 AppService를 오른쪽 클릭해 Deploy to WEB App을 클릭해 줍니다.

다음으로 Browser로 클릭해주고 "빌드한" 리액트 프로젝트의 "build 폴더" 를 클릭해줍니다.

그 후 Deploy와 Browse Website를 눌러 배포 상태를 확인합니다.

다음과 같이 배포가 잘 된 모습을 볼 수 있습니다.