소개

그랬더니 몹시 간단하게 할 수 있어… 이었다( ･ὢ･ )$ 는 우울 명령 앞에 붙여 있을 뿐이므로 $ 부분은 치지 말아 주세요.

Step1

Firebase에 오신 것을 환영합니다 에 로그인

Step2

내 프로젝트 만들기
이번 지역은 '일본'으로 하고, Cloud Firestore의 위치는 'us-east1'로 했습니다.


이런 느낌의 화면이 나오면 완료입니다.
덧붙여서 이번에 작성한 프로젝트의 이름은 붉은 테두리의 「miniminiApp」입니다.

Step3

Firebase 서비스 Hosting 사용
아래와 같이 Hosting 사용해보기를 탭
Hosting에 대해 알고 싶은 분은 아래 링크 참조 (이미지의 링크 부분)
Firebase Hosting
빠르고 안전한 웹 호스팅


사용해 보는 탭 후에 이러한 화면이 나오므로 그대로 진행됩니다.


mac는 터미널을 엽니다. windows는 명령 프롬프트? 를 엽니다.
그럼 빨리 갈거야!

$　npm install -g firebase-tools

한 번 친 적이 있다고 에러 나오는 것 같다. 그러나 다음 명령 로그인이 가능하므로 괜찮을 것 같아?

그런 다음 원하는 디렉토리를 만들고 이동합니다.
그 자리에서 만든다면 $　mkdir sample $　cd sample 하지만 괜찮습니다.

디렉토리로 이동하면 우선 로그인

$　firebase login

여기에서 웹 화면 열리는 적이 있었지만 그대로 진행하면 OK입니다. (로그인이 끝났다고 생각하면 터미널이나 프롬프트로 돌아와주세요.)

firebase 프로젝트 만들기

$　firebase init

여기서 조금 질문을 받으니 대답해 봅시다.
※덧붙여서 mac라면 선택은 스페이스로 할 수 있습니다.

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

 /miniminiApp

? Which Firebase CLI features do you want to setup for this folder? Press Space 
to select features, then Enter to confirm your choices. (Press <space> to select
)
 ◯ 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

google 번역 버전 + 사적 의역
@u83unlimited 씨에게 번역을 정정해 주셨습니다.

このディレクトリでFirebaseプロジェクトを初期化しようとしています:

  /miniminiApp

? このフォルダでなにやるの？行う設定にチェックしてください。
 ◯ Firebase Realtime Database(旧形式のDB機能)用にルールを展開します
 ◯ FireStore(新形式のDB機能)用にルールを展開し、インデックスを作成します
 ◯ Cloud Functions（プログラム実行機能）用に設定、展開します
❯◉ Firebase Hosting sites（ホスティング機能）用に設定、展開します
 ◯ Cloud Storage（ファイル保管機能）用にセキュリティルールを展開します

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.

? Select a default Firebase project for this directory: (Use arrow keys)
　[don't setup a default project] 
  fir-demo-project (Firebase Demo Project) 
  imayannderuno (imayannderuno) 
  ojisannyouseiwo (ojisannyouseiwo) 
❯ [create a new project] 

google 번역 버전 + 사적 의역

あとで色々できるけどとりあえずデフォルトの設定してください。

？ 作るの選んで
  セットアップなんてしない
  デモ
  今病んでるの
  おじさん妖精を
❯ 新しいプロジェクト

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? (public) miniminiAppdirectory

google 번역 버전 + 사적 의역

公開されるディレクトリはこの中身になるでしょう

? ディレクトリ名何する? miniminiAppdirectory

계속해서 점점 듣습니다.

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

그러면 지금 디렉토리 안은 이런 느낌으로.
miniminiAppdirectory라든지 했지만 html라든지 하는 편이 무난했을까라고 생각하거나 생각하지 않거나…

Step4

조속히 공개

$　firebase deploy

오류 발생 프로젝트가 활성화되지 않았습니다! ! --project로 할까 만들까라고 하는 것이므로, 요점은 프로젝트 지정하고 있지 않기 때문에 그것이, 모른다고 하는 것.

No project active. Run with --project <projectId> or define an alias by
running firebase use --add

방금 만든 프로젝트의 id를 사용한다. 이하 화상의 좌상이 그 id이므로 그것을 붙여 주는 것만!

$　firebase deploy --project miniminiapp-4a450

할 수 있었다! ! 대단한 이것만으로 https의 사이트에서 공개할 수 있었다( ・ὢ･ )

setp5

내용을 변경해 본다
방금 전 디렉토리의 내용을 바꾸고 위의 명령으로 다시 배포! ! 할 수 있었다!
덧붙여서 안에 넣고있는 것은 Onsen UI의 데모 앱입니다.




그건 그렇고,이 Onsen UI는 어쩐지 분에게 좋은 소식입니다! !
Onsen UI를 사용하여 miniminiApp을 만들 때까지의 기사를 아래에서 들었으므로 봐 주시면 기쁩니다!
Onsen UI, Vue.js로 앱을 만드는 첫걸음 (개발 → 프로덕션)

setp6

프로젝트 삭제
이하 화상 기어의 곳을 눌러 맨 아래로 가면 삭제를 할 수 있으므로 거기서 삭제합니다.

마지막으로

일단 공개해 보고 싶다면 꽤 이것 아주 좋은 기분이 들었습니다.
반대로, Basic 인증등 특정의 인증 붙이면(자)라면 아직 조사가 필요하다고 생각했습니다! ! (✿´꒳`)

참고

감사합니다!
htps : // 코 m / 포타 4d / ms / 95 에어 f2