Vue CLI 및 firebase를 사용하여 간단한 페이지 만들기

개요

firebase와 Vue로 웹 페이지를 작성한 기록입니다.

환경

macOS Mojave
버전 10.14.6
MacBook Air (13-inch, 2017)

준비

설치
npm 6.10.3
Vue CLI 3.10.0
firebase CLI 7.2.2

브라우저의 firebase 콘솔에서 프로젝트를 생성합니다.

터미널에서 firebase에 로그인합니다.

firebase login

프로젝트 만들기

vue 프로젝트 만들기

cd ~
vue create kotaro-dev

프로젝트 설정 질문에 대해 default를 선택했습니다.

? Please pick a preset:
❯ default (babel, eslint)

git의 로그를 보면이 시점에서 한 번 커밋되었습니다.

git log

firebase 초기화

firebase를 초기화합니다.

firebase init

설정할 프로젝트 유형을 지정합니다.

? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, 
then Enter to confirm your choices. (Press <space> to select, <a> to toggle all, <i> to invert select
ion)
❯◯ Database: Deploy Firebase Realtime Database Rules
 ◯ Firestore: Deploy rules and create indexes for Firestore
 ◯ Functions: Configure and deploy Cloud Functions
 ◯ Hosting: Configure and deploy Firebase Hosting sites
 ◯ Storage: Deploy Cloud Storage security rules

◯ Hosting: Configure and deploy Firebase Hosting sites
를 스페이스 키로 선택하고 Enter로 결정합니다.

firebase 프로젝트를 선택합니다.
firebase 콘솔에서 만든 프로젝트를 선택했습니다.

? Select a default Firebase project for this directory: 

공개 디렉토리 이름을 지정합니다.
firebase의 기본값은 public이지만,
Vue CLI와 일치시키기 위해 dist를 입력하십시오.

? What do you want to use as your public directory? dist

single-page app, 즉 SPA를 설정할지 여부를 지정합니다.
이번에는 설치하지 않았지만 Vue CLI의 경우 Vue Router에서 SPA로 생각합니다.
y를 입력합니다.

? Configure as a single-page app (rewrite all urls to /index.html)? (y/N) y

이것으로 firebase 초기화가 완료됩니다. firebase의 추가 파일을 커밋합니다.

git add .
git commit -m "firebase init"

웹페이지 만들기

쉽게 만들었습니다. 자세한 내용은 GitHub를 참조하십시오.
https://魏Tub. 소 m/짱 rk/코타로. 에 v/코 미 t/3976 키 b2FC29726 아 26778c537 타 0 그림 954557520f

동작 확인

vue로 확인

npm run serve

  App running at:
  - Local:   http://localhost:26397/ 
  - Network: http://192.168.1.18:26397/

이 방법으로 터미널에 표시됩니다. 이 URL을 브라우저에 붙여넣어 확인합니다.

npm run serve에서 실제로 실행되는 명령은 package.json 의 "scripts"부분에 쓰여져 있습니다.

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

firebase로 확인

Vue CLI 프로젝트를 빌드합니다.

npm run build

로컬 firebase 서버를 시작합니다.

firebase serve

i  hosting: Serving hosting files from: dist
✔  hosting: Local server: http://localhost:5000

이렇게 출력됩니다. 브라우저에서 http://localhost:5000을 표시하고 확인합니다.

배포

firebase deploy

firebase의 도메인을 확인합니다.

인터넷에 공개되어 있는 것을 확인할 수 있었습니다.