Firebase Hosting Quickstart - Firecasts #8YouTube↗  IA↗(long shot)
Science & Technology  17.1K views 176 likes 4 dislikes   05 Apr 2016
Google for Developers 2.7M subscribers United States YouTube↗


Please select the problem
You must specify your email and describe the problem in detail
Describe your problem in detail if it's not obvious

Click to Play Video Click to Play Video
안녕하세요. 데이비드입니다.
Hey, todos, David aquí.
오늘은 Firebase 호스팅을
Y hoy en Firecasts, voy
할 때 필요한 모든 것에 대해
a enseñarles todo lo que necesitan saber
알아 보겠습니다.
para utilizar Firebase Hosting.
Firebase호스팅은 정적 웹호스팅 서비스죠.
Firebase Hosting es un sitio web estático
세 가지 요소가 필요합니다.
proveedor de alojamiento con tres principales rasgos: velocidad,
속도, 보안, 쉬운 배포
seguridad, y fáciles implementaciones.
업로드 하는 모들 파일은 정적인 것으로서
Como cada archivo que carguen es estático, lo cual es
HTML, CSS, Javascript, Img
HTML, CSS, JavaScript, o una imagen,
이 모든 것을 CDN 안에 캐시하여
podemos almacenar en caché estos archivos en CDN Nx
전세계에 대해 빠르게 전송합니다.
con puertas por todo el mundo para entrega rápida a sus usuarios.
Firebase 호스팅으로 생성한 사이트는
Y cada sitio creado en Firebase Hosting
자동적으로 SSL 인증서가 제공돼요.
se le aprovisiona automáticamente un certificado SSL
그래서 안전하죠.
Por lo que es seguro, a su salida.
적용 절차는 터미널에서 명령어로 합니다.
Y el proceso de implementación es un simple comando
그럼 Firebase CLI를 설치해 볼까요.
desde su terminal. Así que hoy voy a mostrar como instalar el
그 다음에 앱을 배포해 봅시다.
Firebase CLI. Y luego voy a inicializar y desplegar un app.
시작해 볼까요?
Entonces empecemos.
이건 내 로컬 서버로서
Aquí en mi máquina, tengo
Firebase 호스팅에 배포할 블로그입니다.
un blog que quiero implementar al Firebase Hosting.
머테리얼 디자인의 가벼운 블로그죠.
Y es en realidad el el blog de Diseño Material Lite
mdl.io 로 갑니다.
Así que puedo ir a por mdl.io.
템플릿 섹션으로 가면
Y si vas a la sección de plantillas,
수많은 템플릿이있는데 블로그를 선택하세요.
esto traerá un montón de plantillas, que una de ellas es el blog.
이 사이트를 배포하려면
Así que para implementar este sitio
Firebase CLI가 필요한데 NPM에서 다운받아요.
necesitas el <i>Firebase CLI</i>, que puede ser descargado a través de <i>NPM</i>.
NPM 웹사이트로 가서
Así que si vas al sitio web de <i>NPM</i>,
firebase-tools 아래 있는 패키지를 찾습니다.
encontrarás el paquete en <i>firebase-tools.</i>
이 설명문 속에 링크가 있어요.
Y el enlace para este está en la descripción.
설치 섹션으로 넘어갑니다.
Así que bajo a la sección de instalación.
이 명령어를 복사하고
Y voy a copiar este comando aquí.
커멘드라인에 붙여 넣어요.
Y voy pegarlo en una línea de comandos.
이 터미널에서 붙여넣습니다.
Aquí en el terminal, procedo a pegar
그런데 에러가 나네요.
este comando. Pero esto en realidad podría causarte un error.
그냥 명령어를 넣는 게 아니라
Así que antes de ejecutar este comando,
sudo를 먼저 해야 하겠네요.
puedes escribir <i>sudo</i> al principio
그럼 암호를 묻습니다.
y luego ejecutarlo, lo que pedirá tu contraseña.
즉시 실행을 합니다.
Así que sólo voy a hacer esto en este momento.
설치가 되면 터미널을 clear 합시다.
Y una vez instalado, puedo despejar el terminal.
몇 가지 셋업 명령어를 추가로 해야 해요.
Ahora haré un par de comandos de configuración.
우선 Firebase 계정으로 로그인해야
Lo primero que haré es
배포할 수가 있어요.
entrar con mi cuenta de Firebase para poder implementar.
firebase login 을 입력하면
Para eso, voy a iniciar el acceso a firebase, lo cual
firebase.com으로 이동하고
traerá a firebase.com donde
이 버튼을 누르게 됩니다.
necesito hacer clic en este botón.
클라이언트 인증을 마치면
Así que tras autorizar el cliente,
다시 터미널로 돌아옵니다.
puedo regresar al terminal.
이제 로그인됐으므로 Firebase 호스팅 사이트를
Ahora que estoy conectado, voy a inicializar mi Firebase
시작할 수 있습니다.
Hosting.
firebase init이라고 입력해요.
Y para hacer eso, voy a escribir <i>Firebase init</i>,
이 명령어는 한 번만 하면 됩니다.
que es un comando que haces una sola vez.
앱을 셋업할 때 한 번만 필요하죠.
Así que sólo necesitas hacer esto cuando configuras tu app.
그럼 Firebase 앱 이름과
Esto nos lleva a un mensaje que me pide
정적 파일이 들어 있는 폴더 이름을
el nombre de mi app en Firebase y que carpeta contiene
물어 옵니다.
todos mis archivos estáticos.
내 Firebase 앱 이름은 fcs008이므로
Así que el nombre de mi app en Firebase es <i>fcs008</i>,
그걸로 선택하죠.
así que seleciono eso.
그 다음 public root의 디렉토리를
Y luego me va a solicitar que directorio
묻습니다.
debe ser la raíz pública.
public root란 모든 정적 파일이
Y la raíz pública, como dije,
들어 있는 디렉토리로서
es la carpeta que contiene todos tus archivos estáticos,
HTML, CSS, JS, .png
de modo que todos tus HTML, CSS y JS, o .png,
이런 게 정적 파일이죠.
todo lo que es un archivo estático.
index.html 파일이 들어 있는 폴더이므로
Y por lo general sabes que carpeta es esta porque
잘 알 겁니다.
incluye tu index.html.
저의 경우 그냥 public입니다.
Y en mi caso, el nombre de la carpeta es en realidad sólo <i>Public</i>.
init 프로세스는 firbase.json파일을 생성합니다.
Así que el proceso init crea un archivo <i>firebase.json.</i>
이 파일을 cat으로 보면
Y si rastreo este archivo, se puede ver
그냥 설정 파일입니다.
que es sólo un archivo de configuración.
이 설정 파일 안에는 Firebase 앱 이름
Y este archivo de configuración contiene el nombre del app de Firebase,
public 폴더, 심지어는 배포할때 제외할
la carpeta pública, así como cualquier archivo
모든 파일들이 적혀 있습니다.
a ignorar al momento de la implementación, que en este caso,
firebase.json, 점으로 시작하는 파일,
ignora el <i>firebase.json</i>, los archivos dot, y todos
노드 모듈은 제외됩니다.
los módulos de nodo.
Firebase호스팅에 올릴 때
Así que al implementar el Firebase Hosting,
firebaseapp.com에서 서브 도메인을 받습니다.
obtienes un subdominio en firebaseapp.com.
서브도메인 이름은
Y el nombre en ese subdominio es
Firebase 앱 이름입니다.
el nombre de su app de Firebase.
이 경우 fcs008.firebaseapp.com입니다.
Así pues, en este caso, voy a tener fcs008.firebaseapp.com.
이 주소로 가 봅시다.
Y si voy a ese URL, puedes ver aquí arriba
fcs008.firebaseapp.com가
fcs008.firebasepp.com, obtenemos
Site Not Found로 나옵니다.
este "Sitio no encontrado".
문제를 해결하려면
Para solucionar,
파일을 배포하면 됩니다.
voy a implementarlo.
firebase deploy라고 입력합니다.
Para implementarlo, voy a escribir <i>firebase deploy.</i>
그러면 모든 파일을 Firebase호스팅으로
Voy a salir y volcar todos mis archivos en Firebase
보냅니다.
Hosting.
다 끝나면 이 URL로 가 봅시다.
Y una vez hecho, puedes ir a este URL--
fcs008.firebaseapp.com
pues fcs008.firebaseapp.com.
아니면 firebase open이라고 입력해요.
O puedes escribir<i> firebase open</i>, lo cual
그러면 브라우저로 앱이 떠요.
abrirá el app en tu navegador por defecto.
이제 내 웹앱이 Firebase 호스팅에 배포되어
Y ahora mi app web se despliega en Firebase Hosting con un
SSL 인증서와 정적 파일이 CDN에 캐시됩니다.
certificado SSL y todos los archivos almacenanados en caché en un CDN.
드디어 Firebase 호스팅을 시작했습니다.
Eso es todo para iniciarse en Firebase Hosting.
더 자세한 내용은
Si quieres ver el material más avanzado,
firebase.com/docs/hosting 에 있습니다.
puedes ir a los documentos en firebase.com/docs/hosting
아래 있는 링크를 눌러 주세요.
o haces clic en los enlaces de abajo.
이 에피소드는 Firecaset 시즌 1의
Y esto es en realidad el último episodio
마지막 편이었습니다.
de la Temporada 1 de Firecasts.
Google I/O 이후에 다시 시작할게요.
Pero regresamos después de Google I/O, porque
육아 휴가 떠나거든요.
me voy de paternidad a ocuparme del
애들 보러요.
cuidado de unos niños.
그럼 나중에 봐요.
Así que nos vemos luego. La salida es por aquí. <i>No, por acá,</i> No, no, por acá.
En realidad, sólo bromeo, era por aquí. No sé dónde está la salida. <i>Por acá, David.</i> Ok.
Gracias. Muy bien.
Similar videos:

Introduction to Firebase Security Rules - Firecasts #7
Google for Developers
18.9K views 208 likes 6 dislikes 29 Mar 201666% match

Retrieving data in realtime with Firebase Events - Firecasts #2
Google for Developers
70.2K views 561 likes 12 dislikes 23 Feb 201658% match

Realtime RecyclerViews with FirebaseUI - Firecasts #3
Google for Developers
50.8K views 456 likes 5 dislikes 01 Mar 201658% match

Introducing Firebase Hosting
Firebase
562.2K views 546 likes 49 dislikes 18 May 201656% match

Getting started with Firebase and Android - Firecasts #1
Google for Developers
113.8K views 1.1K likes 19 dislikes 16 Feb 201654% match

Getting started with Firebase and Angular - Firecasts #4
Google for Developers
24.6K views 377 likes 4 dislikes 08 Mar 201650% match

AdMob with Firebase - Mobile Ads Garage #6
Google for Developers
82.7K views 295 likes 51 dislikes 30 Jun 201631% match

Google Developers Channel - Trailer
Google for Developers
181.5K views 116 likes 21 dislikes 03 Sep 201531% match

DevBytes - Your App, At Scale with Google App Engine
Google for Developers
103.5K views 237 likes 4 dislikes 24 Mar 201430% match

An Introduction to Android Wear
Google for Developers
251.3K views 1.3K likes 86 dislikes 18 Jun 201429% match

Getting Started with Firebase Hosting on the Web - Firecasts
Firebase
133.5K views 771 likes 38 dislikes 12 Jul 201629% match

What is App Engine?
Google for Developers
89K views 453 likes 33 dislikes 03 Feb 201429% match

DesignBytes: Material Design in the Google I/O App
Google for Developers
139.8K views 1.2K likes 21 dislikes 05 Aug 201429% match

Google Play Services 8.3
Google for Developers
51K views 342 likes 37 dislikes 05 Nov 201528% match


IoT Prototyping with Node.js and Firebase (Ubiquity Dev Summit 2016)
Google for Developers
38.8K views 629 likes 25 dislikes 12 Jan 201628% match

An Introduction to Brillo, the OS for IoT
Google for Developers
64.4K views 215 likes 4 dislikes 27 Oct 201527% match

DevBytes - The Beauty of Scale with Google Cloud Platform
Google for Developers
38.3K views 221 likes 4 dislikes 28 Feb 201427% match

Google I/O 2016 Highlights
Google for Developers
46.6K views 649 likes 15 dislikes 26 May 201627% match

VR & Cinema - Google I/O 2016
Google for Developers
76.6K views 683 likes 47 dislikes 19 May 201627% match

VR at Google - Google I/O 2016
Google for Developers
73K views 484 likes 16 dislikes 19 May 201627% match

DevBytes - What is BigQuery?
Google for Developers
95.7K views 373 likes 19 dislikes 24 Mar 201426% match

Banner Ad Best Practices - Mobile Ads Garage #3
Google for Developers
44.3K views 357 likes 27 dislikes 12 May 201626% match

Accessing Google APIs: Common code walkthrough
Google for Developers
45.9K views 188 likes 14 dislikes 13 Nov 201426% match

An Introduction to CocoaPods (Route 85)
Google for Developers
74.8K views 1.3K likes 20 dislikes 29 May 201526% match

Polymer: Creating responsive UIs
Google for Developers
42.9K views 323 likes 14 dislikes 25 Jun 201426% match

Listing your files in Google Drive
Google for Developers
40.2K views 125 likes 20 dislikes 13 Nov 201426% match

AdMob Interstitial Ads - Mobile Ads Garage #4
Google for Developers
94.4K views 301 likes 46 dislikes 26 May 201625% match

AdMob Banner Ads - Mobile Ads Garage #2
Google for Developers
129.7K views 450 likes 66 dislikes 28 Apr 201625% match

DevBytes: Android L Developer Preview
Google for Developers
46.3K views 801 likes 13 dislikes 18 Jul 201425% match


Settings Privacy About Contact Donate