이제 만들어진 어플리케이션을 배포할겁니다.
우선 Firebase -> 빌드 -> Hosting을 눌러줍니다.
시작하기를 눌러주시면 명령어가 뜨게됩니다. 복사해주시고 vscode 터미널에 입력하고 실행해줍니다.
다음을 눌러주시고 또 다른 명령어가 나옵니다.
만약 이전 명령어 설치가 완료되었다면 다음 명령어를 복사해서 실행해줍니다.
로그인이 되어있지 않다면 y를 입력하고 브라우저에서 로그인을 진행해주시면 됩니다.
완료되면, 다음 명령어를 복사해서 실행해줍니다.
방향키로 Hosting으로 온 다음 스페이스바로 선택하고, Enter로 실행합니다.
이후 Use an existing project 를 선택해서 Enter
배포하려는 프로젝트 선택 후 Enter.
여기까지 완료하면, What do you want to use as your public directory?
public폴더를 어떤걸로 할지 물어보는 단계가 나옵니다. 여기서 잠시 멈추고 새로운 터미널을 생성 후 npm run build 해줍니다.
그럼 dist 라는 빌드파일이 생성되었는데, 우리는 이걸 배포할겁니다.
다시 배포를 진행하던 터미널로 돌아가
dist를 입력하고,
위와 같이 차근차근 대답해줍니다.
지금까지 진행한 작업은 project의 firebase 초기화 작업입니다.
폴더를 보면 firebase.json이 만들어진 것을 볼 수 있습니다.
이후 package.json으로 가서 스크립트에 명령어를 추가해줄겁니다.
"predeploy": "npm run build",
"deploy" : "firebase deploy"
그럼 nodejs가 predeploy를 실행하고 deploy를 해줄겁니다.
그리고 firebase 브라우저로 돌아가서 다음, 콘솔로이동 을 클릭해줍니다.
vscode 터미넣에 npm run deploy를 입력합니다.
저희의 사이트 주소가 완성되었습니다!
만들어진 주소로 들어가서 로그인하고 post를 작성해보면 제대로 동작하는 것을 알 수 있습니다.
npm run build 명령어를 입력하면 vite가 dist 폴더를 만들고, firebase는 cloud에 업로드 할것입니다.
'Front-end > twitter_clone' 카테고리의 다른 글
[트위터 클론코딩 챌랜지] API key & Security Rules_21 (0) | 2024.04.11 |
---|---|
[트위터 클론코딩 챌랜지] 자신의 게시물만 가져오기_19 (0) | 2024.04.08 |
[트위터 클론코딩 챌랜지] Profile 만들기_18 (2) | 2024.04.08 |
[트위터 클론코딩 챌랜지] Edit 만들기_17 (0) | 2024.04.05 |
[트위터 클론코딩 챌랜지] 트윗 Delete_16 (0) | 2024.04.04 |