Firebase에서 index.html 파일을 실행하지 않음
저는 파이어베이스 튜토리얼을 받는 꽤 새로운 프로그래머입니다.튜토리얼(https://codelabs.developers.google.com/codelabs/firebase-web/ #5)의 1-5단계를 거쳤습니다.html 파일에 "Add Firebase to your web app" js 코드를 추가하고 Firebase CLI를 설정했습니다.그러나 Firebase 서버를 실행하면 index.html 파일의 코드가 표시되지 않는 것을 제외하고는 모든 것이 작동하는 것 같습니다.
올바른 디렉토리에 있고 콘솔에 "Server listening at: http://localhost:5000"이라고 표시됩니다.그러나 localhost 5000에서는 일반적인 "Firebase Hosting에 오신 것을 환영합니다:Firebase Hosting을 성공적으로 설정했기 때문에 표시됩니다.이제 index.html 파일의 앱 인터페이스 코드가 아닌 특별한 것을 구축해야 할 때입니다!"라고 말합니다.이것은 제 디렉토리에 있는 유일한 html 파일입니다.아주 간단한 것을 놓치고 있는 것 같습니다.도와주셔서 고맙습니다.
된 웹 는 당에신웹는트이사입니다.index.html의 신의에서.public폴더(또는 파일에 포함하도록 구성한 모든 폴더)를 선택할 수 있습니다.
은 아마 범은아일 입니다.firebase init은 일반적인 제을려합니다를 .index.html당신을 위해 파일.그러나 최신 버전에서는 (과거에는 하지 않았던!) 재정의할지 여부를 묻는 메시지가 표시됩니다.
는 문는입니다.firebase init믿을 수 없을 정도로 조잡합니다.그것은 단지 그것을 무시할 뿐입니다.index.html의 에 있던 .public아무것도 확인도 없고, 안전망도 없고, 아무것도 없습니다.
만약 당신이 졌거나, 실수로.firebase init 덮어기, 사자용index.html파일, 어떻게든 다시 생산해야 합니다.의 index.html파일... 음... 음......▁!... 안됐군요!안 되었군요
Firebase CLI는 어떻게 작동합니까?
일적으의단의 firebase설정은 다음과 같습니다.
firebase loginfirebase inityour-build-command-here파이프라인이firebase deploy
login) 해당 기계에 건물을 처음 설정할 때(또는 새 방화벽 개정판이 릴리스된 경우)
init새 프로젝트를 초기화합니다.즉, 당신이 당신의 것을 가지고 있지 않을 때.firebase.json아직 (그것은 에 의해 만들어질 것입니다.init명령).
재구현은 다음과 같습니다.
your-build-command-here파이프라인이firebase deploy
저는 제 답을 알아냈습니다.게시된 index.html 파일은 "firebase init" 단계에서 생성된 "public" 파일에 있습니다.나는 그 자리 표시자 html 파일을 내 앱용 파일로 교체했습니다.
파이어베이스 호스팅이 앱을 표시하지 않습니까?
이 문제에는 두 가지 이유가 있을 수 있습니다.
첫 번째 단계:
index.html을 포함하는 공용 폴더(firebase.json에서 정의) 'dist'가 firebase init 명령에 의해 수정되지 않았는지 확인하십시오. 만약 그렇다면 원래 프로젝트 인덱스.html로 대체하십시오.
참조용(dist는 표준이지만 사용자가 다를 수 있음)
{ "hosting": { "public": "dist"} }
두 번째 단계:
프로젝트의 index.html에서 기본 href를 구성해야 합니다.
~하듯이
<base href="https://["YOUR FIREBASE PROJECT NAME"].firebaseapp.com/">
및 기타 번들 파일을 다음과 같이 지정합니다.
<script type="text/javascript" src="https://["YOUR FIREBASE PROJECT NAME"].firebaseapp.com/runtime.a66f828dca56eeb90e02.js">
<script type="text/javascript" src="https://["YOUR FIREBASE PROJECT NAME"].firebaseapp.com/main.2eb2046276073df361f7.js">
3단계 실행 명령 - 소방 기지 배치
즐기세요! ;)
새 프로젝트
에를 할 때.firebase init를 포함하는 디렉토리를 선택합니다.index.html공개 디렉토리로서.
기존 프로젝트
갱다하firebase.json와 함께
"hosting": {
"public": "dist/directoryThatContainsIndexHtml",
......
}
편집 내역 할 수 있습니다.편집 내역에서 사용할 수 있습니다.된 버전을 프로덕션의 경우 업데이트된 버전을 사용합니다.
dist의 내용은 각 빌드에서 다시 작성되므로 빌드할 때마다 @dist를 배치하는 모든 내용이 사라집니다.
이걸 마주치는 다른 사람들을 위해서요.익명 모드로 실행해 보십시오. 브라우저가 캐시되었습니다.
https://stackoverflow.com/a/56468177/2047972
, 은 여러분의 ▁your다▁▁to우▁check 확인해야 합니다.index.html프로젝트 배포 후. 다음 명령 단계 후:
firebase login
firebase init
firebase deploy
의 진짜 진index.html 수 .generic file그것이 문제가 발생한 이유입니다.그래서 코드를 변경합니다.index.html프로젝트 배포 후.당신의 웹 페이지에 이 상자가 보이면,
팁: 배포하기 전에 PC의 아무 곳에나 전체 프로젝트를 복사합니다.
그렇지 않으면 디렉터리에서 파일 경로를 확인하십시오. index.dll 경로가 정확해야 합니다.
할 때ng build --prod folderdist 파일 .내 프로젝트 이름이 First Project라고 가정합니다.dist 폴더(dist/FirstProject) 안에 FirstProject라는 하위 폴더가 보입니다.dist dist/[subDirectory]로 합니다.
What do you want to use as your public directory? dist/FirstProject
이것으로 나의 문제가 해결되었습니다.
Angular 애플리케이션을 Firebase에 배포하기 위한 간단하고 빠른 튜토리얼은 여기에서 찾을 수 있습니다.
firebase 프로세스 중에 "File dist/index.html이 이미 존재하는 경우 N을 입력합니다. 덮어쓰기?"가 나타나고 페이지가 원래대로 표시됩니다.
공용 폴더 옵션에서 dist/your-folder-name을 입력합니다.이렇게 하면 폴더에 있는 인덱스 파일을 렌더링할 수 있습니다.
npm install -g firebase-tools
firebase login
firebase init
firebase deploy
firebase open
아래로 스크롤한 후 다음 항목 선택
Hosting: Deployed Site
Angular 앱을 빌드할 때 적어도 Angular 10을 사용하면 Angular는 기본적으로 응용 프로그램의 이름을 가진 폴더를 포함하는 폴더 이름 dist를 만듭니다.예를 들어, 이 예제의 앱의 이름은 blog-front이므로 프로젝트를 빌드할 때(ng build or ong build --prod) Angular는 blog-front라는 폴더를 포함하는 폴더 dist를 만듭니다.
공용 디렉터리를 묻는 방화벽 단계에 도달하면 폴더 이름은 다음 예에 대해 "dist/log-front"이거나 일반적으로 "dist/yourApplicationName"이어야 합니다.
파이어베이스가 잘못된 디렉터리를 사용하고 있는 경우 여기도 참조하십시오. 파이어베이스 CLI가 'firebase init'에 대한 현재 프로젝트 디렉터리를 인식하지 못했습니다.Firebase에서 생성된 모든 파일을 내 프로젝트 디렉토리에 넣을 것으로 예상하는 동안 완전히 연결이 끊기고 모든 파일을 내 /Users/MyUserName 디렉토리에 넣고 거기서 잘못된 index.html을 배포했습니다.
다음은 이 문제를 해결하는 방법입니다(연결된 게시물에 제시된 대로 방화벽을 다시 설치할 필요가 없음).
- /Users/MyUserName 디렉토리(.firebaser, firebase)에서 생성된 모든 Firebase 파일을 삭제합니다.json, index.dll 및 dist-folder)
- 프로젝트 지침에 따라 소방 기지를 운영합니다.
- dist/projectname을 공용 디렉토리로 사용
- 단일 페이지 앱 "예"로 구성
- index.dll을 덮어쓰지 마십시오(덮어쓰지 않으면 배포하기 전에 "ng build"를 다시 작성하십시오).
- 소방 기지 배치
그런데, Angular 7을 사용하는 모든 사람들에게, Angular 7 앱을 파이어베이스 호스팅에 배포하는 것에 대한 이 튜토리얼은 저에게 정말 도움이 되었습니다.
저도 비슷한 상황에 직면했습니다.우리가 소방 기지를 운영할 때, 그것은 몇 가지 질문을 합니다.이때 Firebase에서 배포할 모든 파일을 가져올 디렉토리 경로에 대해 설명합니다.디렉토리에 index.html이 포함되어 있는지 확인합니다.
를 합니다.index.html에 dist폴더를 누릅니다.
그런 다음 다음 명령을 실행합니다.
firebase login
ng build --prod
firebase init
firebase deploy
효과적인 솔루션
First Stop the project and follow these steps
npm install -g firebase-tools
firebase login
firebase init
? Are you ready to proceed? Yes
? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices. Hosting: Configure and deploy Firebase Hosting sites
? What do you want to use as your public directory? dist
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
After initialization is completed makesure to delete the created dist file before next steps
ng build --prod
firebase deploy
다음 명령을 실행하지 않았기 때문에 다음 오류가 표시됩니다.
npm run build- 전에 꼭 사용하세요.
firebase deploy - 그리고 또한 당신이 잘못된 디렉토리를 참조하십시오.
- 이것을 끝낸 후에 실행합니다.
firebase init과정.
ready index.html이 있는 공용 폴더를 받는 경우firebase initindex.html을 자신의 index.html로 바꾸고 다음 명령을 사용할 수 있습니다.
firebase deploy
그 정도면 작동하기에 충분할 겁니다.모든 파일이 있어야 할 위치에 있는지 확인합니다!
작업 솔루션
해요.flutter build web,그리고나서flutter deploy.
firebase initindex. 생성된 먼저 .dll 파일을 생성해야 . 생성된 경우 먼저 작업을 수행해야 합니다.flutter build web 다시 index.dll을 지정합니다.flutter deploy
제 해결책은 잠시 기다리는 것입니다.그럼, 그래도 안 되면요.시도해 보십시오.
솔루션 1: "build" 폴더 내부의 index.html과 자체 프로젝트의 index.html을 확인합니다.그렇지 않은 경우 "build" 폴더 외부에 있는 code index.html을 복사하고 "build" 폴더 내부에 있는 index.html에 붙여넣어야 합니다.
솔루션 2: .firebase 폴더를 삭제합니다.그리고 다시 시작합니다.=> 화재 기지?공용 디렉토리로 사용할 항목은 무엇입니까? 빌드 < == 참고: "빌드"가 내 디렉토리입니까? 단일 페이지 앱으로 구성하시겠습니까? (모든 URL을 /index.dll로 표시)?아니요 <== 선택 안 함 ? 파일 빌드/404.vmdk가 있습니다.덮어쓰기?<== 선택 NO ? 파일 빌드/index.filename이 이미 있습니다.덮어쓰기?아니요 <== NO 선택
이러한 작업을 수행한 후 "Welcome Firebase Setting Host Complete(파이어베이스 설정 호스트 완료 시작)"라는 알림이 표시되고 잠시 기다립니다.그런 다음 웹 사이트를 다시 로드합니다.
다음 단계를 따르십시오.
npm install -g firebase-tools
이미 dist 폴더가 있는 경우 디렉토리에서 제거
firebase login
ng build --prod
firebase init
firebase deploy
index.vmdk 파일에 해당 Firebase 기본 정보가 있습니다.그것이 그것이 그 정보를 보여주는 이유입니다.원본 각 파일에서 index.html을 복사하여 dist index.html에 붙여넣습니다.이것이 제 문제를 해결했습니다.
파이어베이스 서버에 배포하기 전에 공용 디렉터리 폴더에 파일을 추가해야 합니다(앱의 인덱스 파일이 있어야 함).
공용 폴더의 기본 HTML 페이지 이름을 index.html로 변경하는 것이 저에게 효과가 있었습니다.또한 firebase init 단계(첨부된 이미지에 따름)에서 firebase 메시지가 표시될 때 index.html을 다시 작성하지 마십시오.
언급URL : https://stackoverflow.com/questions/38486069/firebase-not-running-index-html-file
'programing' 카테고리의 다른 글
| Git에서 준비되지 않은 변경 내용의 일부 실행 취소 (0) | 2023.07.17 |
|---|---|
| 크기 속성의 크기가 0입니다. (0) | 2023.07.17 |
| 사전 대 객체 - 어떤 것이 더 효율적이고 왜? (0) | 2023.07.17 |
| 파이썬을 사용하여 웹 페이지에 로그인하고 나중에 사용할 쿠키를 검색하는 방법은 무엇입니까? (0) | 2023.07.17 |
| Django 템플릿 내 인덱스별 참조 목록 항목? (0) | 2023.07.17 |