🎾 vue-tennis | 서울 테니스 클럽 웹앱 : Development Log

🎾 서울 테니스 클럽 웹앱

주변 테니스장 찾기 & 게스트 모집 플랫폼 웹앱 개발

Link : https://tennis9in.netlify.app
Github : https://github.com/protect-me/vue-tennis
Project Summary : https://velog.io/@protect-me/vue-tennis-summary
Development Log : https://velog.io/@protect-me/vue-tennis-log (Current)

1. 프로젝트 환경설정

1-1. 프로젝트 생성

• $ vue create vue-tennis : vue-tennis라는 이름으로 vue 프로젝트 생성

Vue CLI v4.5.13
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, Lint
er
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in producti
on) Yes
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
? Save this as a preset for future projects? No

1-2. 경로 이동 및 서버 테스트 실행

• $ cd vue-tennis : 경로 이동
• $ yarn serve : 서버 실행
• http://localhost:8080/ : LOCAL URL
• $ Control + C : 서버 내리기
• editor(VScode)를 해당 경로로 다시 열기

1-3. Vuetify 설치

$ vue add vuetify
(해당 프로젝트 내부에서 명령어 입력)

? Choose a preset: Configure (advanced)
? Use a pre-made template? (will replace App.vue and HelloWorld.vue) Yes
? Use custom theme? No
? Use custom properties (CSS variables)? No
? Select icon font Material Design Icons
? Use fonts as a dependency (for Electron or offline)? No
? Use a-la-carte components? Yes
? Select locale English

1-4. .gitignore 파일 수정

.DS_Store
node_modules
/dist


# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
node_modules

---

2. Firebase 설정

Firebase

• firebase 구글 로그인
• 프로젝트 추가

Authentication

• 이메일/비밀번호: 사용 설정
• Google: 사용 설정

Firestore Database

• Database에 적합
• Cloud Firestore의 보안 규칙: 테스트 모드
• Cloud Firestore 위치 설정: asia-northeast3(Seoul)

Realtime Database

• 설정값에 적합
• 미국으로 설정(차후 가까운 지역이 나오면 그쪽으로 설정)
• 테스트모드로 설정

프로젝트 설정

• 일반 > 내 프로젝트 >공개 설정 > 지원 이메일 설정
• 일반 > 내 앱 > 플랫폼 선택: 웹(</>)
  : 웹 앱에 Firebase 추가 > 앱 등록

Firebase 설치

• $ Firebase login
• $ Firebase init

firebase init

     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

You're about to initialize a Firebase project in this directory:

  /Users/***/Documents/Develope/vue-tennis

? Which Firebase CLI features do you want to set up for this folder? Press Space to select 
features, then Enter to confirm your choices. Database: Configure Firebase Realtime Databas
e and deploy rules, Firestore: Deploy rules and create indexes for Firestore, Functions: Co
nfigure and deploy Cloud Functions, Hosting: Configure and deploy Firebase Hosting sites, S
torage: Deploy Cloud Storage security rules

=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add, 
but for now we'll just set up a default project.

? Please select an option: Use an existing project
? Select a default Firebase project for this directory: vue-tennis (vue-tennis)
i  Using project vue-tennis (vue-tennis)

=== Database Setup
i  database: ensuring required API firebasedatabase.googleapis.com is enabled...
✔  database: required API firebasedatabase.googleapis.com is enabled


Firebase Realtime Database Security Rules allow you to define how your data should be
structured and when your data can be read from and written to.

? What file should be used for Realtime Database Security Rules? database.rules.json
✔  Database Rules for vue-tennis-default-rtdb have been written to database.rules.json.
Future modifications to database.rules.json will update Realtime Database Security Rules when you run
firebase deploy.

=== Firestore Setup

Firestore Security Rules allow you to define how and when to allow
requests. You can keep these rules in your project directory
and publish them with firebase deploy.

? What file should be used for Firestore Rules? firestore.rules

Firestore indexes allow you to perform complex queries while
maintaining performance that scales with the size of the result
set. You can keep index definitions in your project directory
and publish them with firebase deploy.

? What file should be used for Firestore indexes? firestore.indexes.json

=== Functions Setup

A functions directory will be created in your project with a Node.js
package pre-configured. Functions can be deployed with firebase deploy.

? What language would you like to use to write Cloud Functions? JavaScript
? Do you want to use ESLint to catch probable bugs and enforce style? No
✔  Wrote functions/package.json
✔  Wrote functions/index.js
✔  Wrote functions/.gitignore
? Do you want to install dependencies with npm now? Yes

> protobufjs@6.11.2 postinstall /Users/***/Documents/Develope/vue-tennis/functions/node_modules/protobufjs
> node scripts/postinstall

npm notice created a lockfile as package-lock.json. You should commit this file.
added 227 packages from 204 contributors and audited 227 packages in 6.657s

8 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities


=== Hosting Setup

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory? dist
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
? Set up automatic builds and deploys with GitHub? No
✔  Wrote dist/index.html

=== Storage Setup

Firebase Storage Security Rules allow you to define how and when to allow
uploads and downloads. You can keep these rules in your project directory
and publish them with firebase deploy.

? What file should be used for Storage Rules? storage.rules

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

✔  Firebase initialization complete!

• $ yarn add firebase@8.2.3

버전별로 import하는 방식이 다르게 나와서 꽤나 혼란스러움.
v8로 설치 시, 본 블로그 글의 내용과 같이 import가 가능하나,
v7 이하 혹은 v9 이상에서는
import * as firebase from 'firebase/app'과 같이 import
=> 자세한 사항은 firebase Document 참고

firebase 연결

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import vuetify from './plugins/vuetify'
import './plugins/firebase.js' // plugin 설정

Vue.config.productionTip = false

new Vue({
  router,
  store,
  vuetify,
  render: (h) => h(App),
}).$mount('#app')

plugins/firebase.js

import Vue from 'vue'
import firebase from 'firebase/app'
import firebaseConfig from '../../firebaseConfig'
import 'firebase/auth'
import 'firebase/firebase-firestore'

firebase.initializeApp(firebaseConfig)
Vue.prototype.$firebase = firebase

App.js

<script> 
  (...)
  mounted() {
    console.log('here', this.$firebase)
  },
  (...)

.env 설정

$ npm install dotenv

• .env 파일 생성
  : firebaseConfig.js의 내용을 기입

VUE_APP_apiKey=''
VUE_APP_authDomain=''
VUE_APP_databaseURL=''
VUE_APP_projectId=''
VUE_APP_storageBucket=''
VUE_APP_messagingSenderId=''
VUE_APP_appId=''
VUE_APP_measurementId=''

• firebaseConfig.js 내용 수정

export default {
  apiKey: process.env.VUE_APP_apiKey,
  authDomain: process.env.VUE_APP_authDomain,
  databaseURL: process.env.VUE_APP_databaseURL,
  projectId: process.env.VUE_APP_projectId,
  storageBucket: process.env.VUE_APP_storageBucket,
  messagingSenderId: process.env.VUE_APP_messagingSenderId,
  appId: process.env.VUE_APP_appId,
  measurementId: process.env.VUE_APP_measurementId,
}

.gitignore 추가

.env

---

3. Netlify 배포

Netlify deploy

New site from Git > Github > 로그인 및 권한 설정 > 해당 repository 선택 > 기본 설정 유지, Deploy site

환경변수 설정

site Settings > Build & deploy > Environment > Environment variables > .env의 환경변수 기입

functions bundling error

2. Functions bundling                                         
11:16:27 PM: ────────────────────────────────────────────────────────────────
11:16:27 PM: ​
11:16:27 PM: Packaging Functions from functions directory:
11:16:27 PM:  - index.js
11:16:27 PM: ​
11:16:27 PM: ​
11:16:27 PM: ────────────────────────────────────────────────────────────────
11:16:27 PM:   Dependencies installation error                               
11:16:27 PM: ────────────────────────────────────────────────────────────────
11:16:27 PM: ​
11:16:27 PM:   Error message
11:16:27 PM:   A Netlify Function is using "firebase-functions" but that dependency has not been installed yet.

위와 같은 에러를 만난 경우

• 원인 : Netlify와 firebase의 각각의 funtions가 있는데,
  Netlify가 배포할 때 fireabase의 funtions 폴더를 찾아들어가서 함수를 찾기 때문에 에러가 발생.
• 해결 : 최상위 경로에 netlify.toml 파일 생성 후 아래와 같이 작성

[build]
  functions="NetlifyFunctions"

즉, Netlify 배포 시, netlify의 funtions는 NetlifyFunctions 경로에 들어가서 찾도록 설정함.
물론 폴더가 없거나 만들더라도 빈 폴더이기 때문에 아래와 같은 log를 남기고 넘어갈 수 있음
(추가로 netlify funtions를 작성한 경우 제외)
The Netlify Functions setting targets a non-existing directory: NetlifyFunctions

4. KakaoMap 설정

kakao developers

앱 키 설정

• 애플리케이션 추가 > 앱 키 확인
  : REST API 키
  : JavaScript 키

• .env 파일에 내용 추가

VUE_APP_KAKAO_ADDRESS_REST_API_KEY=''
VUE_APP_KAKAO_MAP_JAVASCRIPT_KEY=''

플랫폼 설정

: 플랫폼 > web > Netlify에서 배포한 주소 추가

ERROR

Mixed Content

• Error
  Mixed Content: The page at 'https://tennis9in.netlify.app/Map' was loaded over HTTPS, but requested an insecure script 'http://dapi.kakao.com/v2/maps/sdk.js?autoload=false&appkey=*****'. This request has been blocked;
• Solve
  public > index.html > head 아래 내용 추가
  <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
• Ref
  Mixed content 문제 해결(https 사이트에서 http 사이트 요청 시 발생하는 보안 문제)