[vue.js] VUE.JS + HTML + Firebase Hosting
관리자
2024-10-12 02:55
206
0
본문
VUE.JS + HTML + Firebase Hosting
1. y-think 폴더 생성
mkdir F:\app\y-thinkr.com\app\y-think
cd F:\app\y-thinkr.com\app\y-think
2. Vue CLI를 설치합니다. 글로벌로 설치되며, 한 번만 설치하면 됩니다.
npm install -g @vue/cli
y-think 폴더에서 Vue.js 프로젝트를 생성합니다. 필요한 설정은 기본값으로 사용해도 무방합니다. vue create .
생성된 Vue 프로젝트의 모든 의존성을 설치합니다.
npm install
3. Firebase 프로젝트 설정
Firebase CLI가 없을 경우 글로벌로 설치합니다.
npm install -g firebase-tools
Firebase 계정에 로그인합니다. (이미 로그인되어 있으면 생략 가능합니다.)
firebase login
Firebase 콘솔에서 프로젝트 생성
- 웹 브라우저에서 Firebase 콘솔로 이동하여 y-think라는 프로젝트를 생성합니다.
- 프로젝트를 생성한 후, Firebase Hosting을 사용할 수 있도록 설정합니다.
4. Firebase Hosting 설정
프로젝트 루트 폴더(즉,
F:\app\y-thinkr.com\app\y-think)로 이동합니다. cd F:\app\y-thinkr.com\app\y-think
Firebase 초기화
Firebase Hosting을 설정합니다. 이 명령어를 실행하면 Firebase CLI가 초기화 프로세스를 안내합니다.
firebase init hosting
"public directory"는
dist 폴더로 설정합니다. firebase.json
{
"hosting": {
"site": "y-think",
"public": "dist",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
5. Vue 프로젝트 빌드
vue.config.js 파일을 생성하여 빌드된 파일들이 dist 폴더에 저장되도록 설정합니다. const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
outputDir: 'dist'
})
Vue 프로젝트 빌드
npm run build
6. Firebase Hosting에 배포
firebase deploy --only hosting:y-think
배포 확인:
- Firebase 콘솔에서
y-think프로젝트가 배포된 URL을 확인합니다. - 브라우저에서 해당 URL로 접속하여 사이트가 정상적으로 배포되었는지 확인하세요.
- https://y-think.web.app
- https://y-think.firebaseapp.com/
7. 추가: 브라우저 캐시 문제 해결
- 배포된 결과가 제대로 보이지 않을 경우, 브라우저의 강력 새로고침을 시도해 보세요. (Ctrl + Shift + R 또는 Shift + F5)
댓글목록0
댓글 포인트 안내