개시하다

새로 쓴 기술계 동인지의 수요가 있는지 궁금해 정태적으로 대접하는 파이어베이스 호스팅으로 착륙 페이지를 만들어 봤다.베타 버전이 공개되면 알림의 메일 주소를 등록해 주세요.

Combine framework GUIDEBOOK
https://combine-book.web.app/
Firebase Hosting은 전혀 모르는 상태에서 적당한 4~6시간이면 하고 싶은 일을 할 수 있을 정도로 간단하다.
따라서 기술류와 애플리케이션을 발매할 때 착륙 페이지를 만들어 보는 것이 어떨까.다음은 대략적으로 할 일을 적으세요.

Firebase Hosting에서 디자인할 때까지.

차리다

Firebase 콘솔에서 먼저 프로젝트 작성

https://console.firebase.google.com/?hl=ja

Firebase CLI 설치

https://firebase.google.com/docs/hosting/quickstart?hl=ja#before_you_begin

"자동 설치 스크립트"권장

https://firebase.google.com/docs/cli?hl=ja#install_the_firebase_cli

전역 npm

사용하지 않음

익숙해지면 npm에서 들어가면 돼요.

단계별로 전 세계에 진출하는 절차이기 때문에 그렇게 할까 봐 두려워서 익숙한 사람만 수동으로 하면 된다고 생각해요

firebase init

Firebase 콘솔을 사용한 다음 항목을 선택하는 것이 더 쉽게 이해할 수 있습니다.
다음 유형을 선택합니다.

Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys

공개 방식

public/index.html처럼 공개

설계 템플릿이 준비된 것은 아닙니다.

HTML landing page templates등으로 불평

URL에는 두 개의 기본값이 있습니다.

기본 사용 항목 ID

아무것도 하지 않아도 SSL 사용 가능

예

https://combine-book.web.app

https://combine-book.firebaseapp.com

기본값은 2개
원본 Firebase app.인터넷, 웹이 있습니다.앱 때문에 추가됐나 봐요

설계 방법

프로그램 및 명령

로컬 파일 보내기

Firebase 콘솔에 역사 기록이 남아 있고 되돌릴 수도 있으니 안심

도 명령으로 현지에서 확인할 수 있음

GiitHub Actions에서 Pull Request를 다시 보내면 미리 보기용 임시 서버로 설계

합병 후main분지 해체

SDK(JS의 SDK)

기본적으로script 탭으로 읽기

도메인이 기본 상태"/__/로 유지되는 경우 도메인의 JS를 읽을 수 있습니다.

https://firebase.google.com/docs/hosting/reserved-urls?authuser=0

사용자 지정 도메인이 검증되지 않은 경우

예

<script src="/__/firebase/9.5.0/firebase-app-compat.js"></script>

<script src="/__/firebase/init.js?useEmulator=true"></script>

init.js에서 설정값을 읽었기 때문에 브라우저의 디버거 등으로 확인하는 것이 좋습니다

useEmulator=true

문서에 적힌 내용이 불분명해서 해봤어요.

로컬 환경

useEmulator=true

init.js에서 응답하는 코드 변경

firebase.firestore 등 시뮬레이터 사용

로컬에firestore와function을 설정하면

host와portvar firebaseEmurators = { ... } 기재

설정되지 않은 경우

var firebaseEmulators = {};

공식 환경

변경 없음

사용자 입력 테이블 작성

제일 중요한 건 이거야.이걸 못하면 의미가 없는데 어떻게 해야 좋을지 모르겠어요.

원래는 착륙 페이지만 만들고 정적 내용을 표시하면 입력할 필요가 없다

관심 있는 사람이 이메일 주소 같은 것을 입력하길 바란다

기본적으로 동적 프로세싱은 JavaScript만 이동합니다.

방법은 크게 두 가지로 나뉜다

방법1

JS에서 Firestore(또는 Realtime Database)를 호출하고 데이터 입력

Vue.js와 React를 사용할 수 있지만, 그것은 당연히 필수적인 것이 아니다

Bootstrap을 디자인하기 위해서는 JQuery가 사용하기 때문에 JQuery도 가능

Firestore와 Realtime Database 두 가지가 있지만 Firestore 권장

인코딩 이미지

Realtime Database 방식이지만 Firestore 역시 이런 느낌입니다.

Submit 버튼 이벤트 발생 후 DB 업데이트

방법2

Function 활용

Node.js가 일하기 때문에 기본적으로 무엇이든지 할 수 있다

https://firebase.google.com/docs/hosting/functions?hl=ja

용례에 의존하지만 JS에서Firestore를 호출하는 것은 간단하고 가볍다

Node.js로 하면 뭐든지 할 수 있는데 결혼식 페이지에서 좀 과장된 것 같아

Google Analytics 활성화

Firebase 프로젝트 완료 후 전체 자동 완료 불가능

프로젝트에서 Analytics의 대시보드에 액세스하여 "속성"을 만드는 것

이름과 항목 동일 가능

제작 후 템플릿적으로 사용할 코드가 나오기 때문에 이걸로 하면 됩니다

Hosting을 선택했을 때/__/firebase/init.js?useEmulator=true 초기화 코드로 자동 생성되었고 그곳에서 apppId 증가

firebase.json에'site'를 추가해서 나오기 때문에 속성을 입력하는 것

테스트 후 대시보드에 표시된 내용을 보고 알려주세요!

다른 서비스와의 구분 사용

다른 서비스라고 적으면 정적 리셉션에는 GiitHub Pages와 Netlify 등이 있다.개발자가 착륙 페이지를 만들면 어떻게 할지 내 지표를 적어 놓을게.

정태적인 내용만 필요하고 폼이 필요하지 않으면...

GitHub Pages

push만 있으면 디버깅이 가능하니 완전히 익숙해졌을 거예요.

Google 형식에 연결된 다음 입력하는 것이 가장 빠를 수 있습니다.

표에 설명 추가 포기

페이지에 양식이 필요하지만 Firestore와 Realtime Database를 사용한 적이 없어 불안하다면...

무료 방안 혼자 하는 경우

Netlify

한 사용자만 무료로 사용할 수 있다

습관적인 AWS/여러 사람이 함께 하는 경우

Amplify Console

https://dev.classmethod.jp/articles/amplify-inquiry-form-101/

끝말

나는 기본적으로 무엇이든 쓸 수 있다고 생각한다.하지만 재미있는 일이나 이번 호에서 추천하는 애니메이션 메시지가 적혀 있다면 하루 자고 다음날 철저히 없애자!