Aura로 GDSC 페이지 만들기
안녕하세요 GDSC SSU, Developer Relations 팀의 오인규입니다.
저희를 소개하고 활동을 알리는 커뮤니티 홈페이지를 만들어봤는데요,
gdg-x/Aura라는 오픈소스를 사용해서 제작하였고 과정이 쉽고 결과물이 괜찮은것같아서 포스트로 제작과정을 공유하게 되었습니다.
제작과정을 소개하기에 앞서서 결과물을 먼저 조금 보여드리겠습니다.
반응형 + 다크모드 지원이 되고 구글스러운 디자인이 꽤 괜찮다고 느껴져서 Aura를 이용하게 되었습니다.
Aura-client 설정하기
1. gdg-x/aura 에서 gdg그룹으로 포크합니다.
저같은 경우는 이미 gdsc-ssu에 포크를 했기때문에 위에 뜨지만 아직 포크되지 않았다면 아래에 gdsc-xxx 가 있을것입니다. 각자의 그룹에 맞게 선택해주시면 됩니다.
앞으로 gdsc-xxx라고 칭하겠습니다만, 실제로는 gdsc-ssu, gdsc-snu 등의 값이 될것입니다.
2. 포크된 gdsc-xxx/aura를 클론해줍니다.
git clone https://github.com/gdsc-xxx/aura3. 의존성 패키지들을 설치합니다.
cd path/to/aura # 방금 클론한 aura로 진입하세요
npm install
npm install -g @vue/cli4. firebase 프로젝트를 만들어줍니다.
https://console.firebase.google.com 에 접속해서 프로젝트 추가를 눌러주세요.
5. firebase 대시보드에서 DB를 활성화시킵니다.
기본규칙으로 설정된것을 지우고 아래와같이 변경해주세요
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /apiEnd/{apiEndpoint}{
allow read, create : if true;
allow delete : if request.auth.uid != null;
allow update : if request.auth.uid != null;
allow list: if request.auth.uid != null;
}
match /{document=**} {
allow read : if true;
allow delete : if request.auth.uid != null && get(/databases/$(database)/documents/users/$(request.auth.uid)).data.userType == "Super Admin";
allow create : if request.auth.uid != null;
allow update : if request.auth.uid != null;
}
}
}6. firebase web app을 설정합니다
2단계에서 나오는 firebaseConfig가 중요한데요
apiKey: "Axxxxxxxxxxxxxxxxxxx",
authDomain: "xxxxxx.firebaseapp.com",
databaseURL: "https://xxxxxxxx.firebaseio.com",
projectId: "gdsc-xxx",
storageBucket: "xxxxxxx.appspot.com",
messagingSenderId: "xxxxxxxxxxx",
appId: "1:xxxxxxxxx:web:xxxxxxx",
measurementId: 'G-xxxxxxxxx',이렇게 나온 자신만의 키를 src/config/firebase.js 에 넣어줍니다.
그리고 Firebase.json 에 있는 hosting.site도 gdsc-xxx로 변경해주세요!
여기까지 완료했다면 aura-client 의 설정이 거의 끝났습니다!
이제 aura-admin 을 설정해봅시다.
Aura-admin 설정하기
- gdg-x/aura-admin에서 gdsc-xxx/aura-admin으로 포크합니다.
위에서 수행한 gdg-x/aura 포크 과정과 같기 때문에 스크린샷은 생략합니다.
2. gdsc-xxx/aura-admin을 로컬로 클론합니다.
git clone https://github.com/gdsc-xxx/aura-admin3. 의존성 리스트 설치
Aura와 마찬가지로 의존성을 설치합니다.
cd /path/to/aura-admin # clone한 aura-admin의 경로
npm install4. firebase storage 설정
https://console.firebase.google.com 에서 storage 규칙을 설정해줍니다.
아래와 같이 규칙을 업데이트 해줍니다.
service firebase.storage {
match /b/{bucket}/o {
match /{allPaths=**} {
allow read, write: if request.auth != null;
}
}
}이제 firebase console에서 할 일은 끝났습니다.
앞서서 aura-client에서 얻었던 firebaseConfig를 src/config/firebase-config.js에 적용해주세요.
vue.config 의 name도 gdsc-xxx로 업데이트 해주시면 됩니다.
Admin 배포하기
이제 배포하기 위한 모든 준비가 끝났습니다.
배포는 aura-admin, aura-client 순서로 이뤄져야합니다.
aura-admin에서 설정을 해주지않으면 aura-client에서 메인 진입이 안됩니다.
https://github.com/gdg-x/aura-admin 에서 Deployment on Firebase 를 보고 따라해봤지만 firebase-functions 관련 오류로 실패하였습니다.
그래서 firebase 배포가 아닌 다른 방식을 소개하려고 합니다.
Surge를 이용한 무료배포
- aura-admin 디렉토리에서 빌드를 해줍니다.
npm run build2. dist/ 디렉토리에서 surge 를 이용해 배포합니다.
cd /path/to/dist # aura-admin/dist 디렉토리
npx surgesurge가 처음이라면 회원가입 과정이 cli로 진행될 수 있습니다.
그리고 주소를 입력하라고 나오는데 gdsc-xxx.surge.sh 라고 써주시면됩니다.
3. gdsc-xxx.surge.sh 에 접속
이제 어드민 페이지는 들어왔는데 계정은 뭐지? 싶을거다.
firebase 콘솔로 돌아가서 authentication 을 설정해줘야한다.
이제 계정과 비번을 만들었으니 다시 어드민 페이지로 돌아가서 설정을 할 수 있게 되습니다.
들어가서 네브바에 config 관련 설정을 완료해주시면 됩니다.
Aura-Client 배포하기
Aura-Client는 문서 그대로 따라하면 firebase를 통해서 배포할 수 있습니다.
- firebase-tools 설치
firebase-tools는 cli에서 firebase 명령어를 사용가능하게 해줍니다.
npm i -g firebase-tools
2. firebase cli에서 로그인하기
firebase login3. .firebaserc 업데이트
아래 내용으로 업데이트 해줍니다.
{
"project": {
"default": "gdsc-ssu"
}
}4. firebase hosting 설정
5. Firebase.json 업데이트
Firebase.json에서 hosting.site 항목을 gdsc-xxx로 변경해주세요.
절대로 gdsc-xxx.web.app 를 Full로 적으면 안됩니다.
6. firebase deploy
다왔습니다! 이제 명령어 한줄만 치면 끝납니다.
firebase deploy결과물
마치는 말
여기까지구요 진행에 있어서 잘 안되는게 있거나 궁금한 사항이 있으면 댓글로 알려주세요~
저희는 https://gdsc-ssu.web.app 에 배포중이고 프론트엔드 개발자분들이https://github.com/gdsc-ssu/aura 를 저희가 원하는 방향으로 더 커스터마이징 할 예정입니다. 많은 관심 부탁드립니다.
아 그리고 한국외대 aura도 좀 참고했었는데 https://gdsc-hufs.web.app 도 같이 살펴보면 좋을것같습니다.
감사합니다 🙇🏻♂️
thanks to GDSC Soongsil
