일단 firebase에 프로젝트를 만든다.
그 후 터미널 창에
npm install -g firebase-tools 입력하여 설치, (띄어쓰기 주의 firebase와 -tools 사이에는 띄어쓰기가 없다)
만약 error가 뜬다면 sudo 명령어로 권한 받아서 설치를 해야해서 문제가 생길 수 있으므로
sudo npm install -g firebase-tools 로 설치한다.
그리고 npm run build로 dist 폴더를 갱신 혹은 생성한다.
참고로 필자는 package.json의 스크립트 부분은
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
이렇게 되어있다. dist 폴더가 생성되지 않는다면 참고해서 변경
그리고 dist내에 index.html이 있다면 실행시켜봐서 자신의 만든 vue 앱이 잘 돌아가는지 확인
만약 index.html이 없다면 최상위 폴더에 있는 index.html을 복사해서 dist폴더 내에 넣는다.
그리고 index.html 내에 있는 경로 중 "dist/build.js" 이렇게 경로가 설정되어 있는 부분을 에서
dist를 지워서 "build.js"로 수정해준다.
필자 같은 경우 body부분에 있는 부분을 수정했다.
<body>
<div id="app"></div>
<script src="build.js"></script>
</body>
그리고 vue 최상위 폴더로 가서 명령어
firebase init
그리고 세팅을 해야한다
처음에 database와 hosting 선택
두번째로 existing project에서 만들어놓은 프로젝트 선택
세번째 rules는 그냥 엔터로 기본값으로
pubilc directory를 물으면 dist 입력
configure ...뭐시기뭐시기 /index.html 을 물으면 y
rewrite /index.html 물으면 n
세팅 끝
그리고 이제 명령어
firebase deploy
치면 배포 성공!!
'Coding > Vue.js' 카테고리의 다른 글
| Vuex 오류 “TypeError: Cannot read property ‘state’ of undefined” 해결법 (0) | 2020.03.14 |
|---|---|
| Vuex 사용법 (0) | 2020.02.19 |
| Vue.js에서의 Vuex, EventBus (0) | 2020.02.18 |
| Vue 객체, 배열을 index 값으로 바꾸기 (0) | 2020.02.17 |
| Vue.js watch: {} (0) | 2020.02.16 |