파이어베이스에 nuxtjs 호스팅하기

Computer 비관심/Vuejs|2019. 11. 5. 13:34
반응형

파이어베이스를 통해 호스팅을 이용하면  1기가를 저장할 수 있고 월 10기가나 데이타를 전송하면서도 무료이다!

내가 만든 심플한 웹앱은 2MB인데 Good Good 심지어 SSL도 제공해주니 이보다 편할 수 없다.

 

자신이 만든 프로젝트나 소형 서비스를 만들때 이용하면 딱인거 같다.

 

 

넉스트의 single page app을 호스팅하는건 쉽다.

 

 

0. nuxt 싱글파일 빌드하기 -> dist폴더가 생성됨

npm run build

 

1. 구글툴즈 설치

npm install -g firebase-tools

 

2. 구글 로그인

firebase login

 

3. Allow Firebase to collect anonymous CLI usage and error reporting information? 

yes / no

 

4. 프로젝트에 파이어베이스 초기화하기

firebase init

 

5.

6. 디플로이

firebase deploy --project <프로젝트 아이디>

 

* 이런 에러가 나오는 경우

Error: HTTP Error: 401, Request had invalid authentication credentials. Expected OAuth 2 access token, login cookie or other valid authentication credential.

 

해결법 : 다시 구글에 로그아웃 했다가 다시로그인 함

https://stackoverflow.com/questions/52891500/http-error-401-while-setting-up-firebase-cloud-functions-for-android-project

반응형

댓글()

nuxtjs에서 vuetify를 쓸때 아이콘이 나오지 않는 문제 해결

Computer 비관심/Vuejs|2019. 9. 29. 10:14
반응형

웹프로그래밍은 다시는 하고 싶지 않았지만, 회사에서 필요한 것을 빨리 만들어 내기 위해 다시 손을 댔다.ㅠ

 

가장 자주 사용했던 vuejs 프래임웍인 nuxtjs에서 vuetify를 기본으로 설정하여 사용하는데 특정한 아이콘이 나오지 않고 대신 텍스트라벨(글씨)만 보여줬다.

 

왼쪽에 있는 아이콘은 잘 나오지만 오른쪽에 있는 search아이콘은 나오지 않고 텍스트를 보여준다.

이유는 vuetify에서 두가지 아이콘을 사용하는데 nuxtjs를 통해 vuetify를 설치하면 한가지 아이콘만 default로 설치 하기 때문이다.

 

디폴트로 설치하는 아이콘은 Material Design Icons 이다. 여기에 포함된 아이콘을 사용하기 위해선 mdi-라는 prefix를 붙여서 사용한다. 

하지만 오른쪽의 search는 Material Design Icons에 속한 아이콘이 아니라 Material Icons에 속한 아이콘이다. 즉, 이것을 정상적으로 나오게 하려면 이것을 불러와야 한다.

 

nuxt에서는 이것을 아래와 같이 바꿔서 nuxt.config.js 파일에 link에 넣어준다.

link: [
      ...
      { href: "https://fonts.googleapis.com/css?family=Material+Icons", rel:"stylesheet"}
    ]

 

반응형

'Computer 비관심 > Vuejs' 카테고리의 다른 글

파이어베이스에 nuxtjs 호스팅하기  (0) 2019.11.05

댓글()