VUE.JS + HTML + Firebase Hosting > 소프트웨어

본문 바로가기

소프트웨어

마이홈
쪽지
맞팔친구
팔로워
팔로잉
스크랩
TOP
DOWN

[vue.js] VUE.JS + HTML + Firebase Hosting

profile_image
관리자
2024-10-12 02:55 78 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

배포 확인:

 

7. 추가: 브라우저 캐시 문제 해결

  • 배포된 결과가 제대로 보이지 않을 경우, 브라우저의 강력 새로고침을 시도해 보세요. (Ctrl + Shift + R 또는 Shift + F5)
 

댓글목록0

등록된 댓글이 없습니다.

댓글쓰기

적용하기
자동등록방지 숫자를 순서대로 입력하세요.
게시판 전체검색