Учебник VuePress

# Firebase Hosting

Firebase Hosting - это продукт Google Firebase, позволяющий легко разворачивать и размещать веб-сайты. Он поддерживает собственные домены и бесплатные SSL-сертификаты для них. Кроме того, размещенный контент доставляется быстро, благодаря серверам Firebase CDN по всему миру.

# Создание проекта Firebase

# Сайт Firebase

Перейдите на сайт FireBase и щелкаем на кнопку Get started.

firebase_homepage

# Сайт консоль Firebase

Перейдите к консоли Firebase Console_FireBase и нажимаем кнопку Add project

firebase_add_project

# Создание проекта в три шага

Введите имя проекта в поле с надписью Project name. При желании, отредактируйте идентификатор проекта и местоположение. Нажмите кнопку Continue:

firebase_create_project1

Следующий экран подключения статистики Google, можно оставить без изменений.

firebase_create_project2

Выберите аккаунт по умолчанию Default Account for Firebase

firebase_create_project3

Нажмите Create project - Создать проект.

firebase_creating

После завершения нажимаем кнопку Continue - продолжить.

firebase_finished

# Консоль Firebase управление проектом

На странице управления проектом, в нажимаем на опцию Hosting.

firebase_option_hosting

Далее нажимаем Get started

firebase_hosting_get_started

И переходим к настройкам хостинга.

firebase_hosting_settings1

# Установите инструменты Firebase

Firebase предоставляет отличный инструмент для работы с клиентами, который имеет много целей. Давайте начнем с его установки.

npm install -g firebase-tools
1

Процесс установки

firebase_install_tools_proccessing

Завершение установки:

firebase_install_tools_done

После установки Firebase tools нажимаем кнопку Next- Далее и следуем дальнейшей инструкции.

firebase_hosting_settings1

Переходим ко второй настройке

firebase_hosting_settings2

# Первая публикация проекта

Перед развертыванием сайта проект Firebase необходимо инициализировать. Логин позволяет Firebase CLI быть в контексте любой учетной записи Google и соответствующих проектов Firebase. Перво-наперво, давайте войдем в систему. В консоли вводим команду и нажимаем Enter

firebase login
1

Если учетная запись Google не активна в браузере системы который выбран по умолчанию, то вы увидите окно в котором необходимо залогиниться тем Google аккаунтом, в котором вы создали проект Firebase. Далее в консоли выведется надпись Already logged in as mymail@gmail.com - означающая, что вы уже залогинились.

Далее для инициализации необходимо перейти в консоли window (или терминале) переходим в рабочую папку проекта. В нашем примере это:

D:\first_project>
1

Затем выполните команду и нажимаем Enter

firebase init
1

Это приводит пользователя к нескольким вопросам установки

D:\first_project>firebase init

     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

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

  D:\first_project

? Are you ready to proceed? (Y/n)
1
2
3
4
5
6
7
8
9
10
11
12
13
  • Are you ready to proceed? (Y/n) - y (Вы готовы приступить? нажимаем y и Enter)

# Увидим следующее:

? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confi
rm your choices.
 ( ) 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
1
2
3
4
5
6
7

Стрелками вверх/вниз выбираем опцию хостинг, нажимает клавишу пробел на клавиатуре. Должна появиться * напротив выбранной опции. Далее нажимаем Enter.

# Увидим следующее:

? Select a default Firebase project for this directory: (Use arrow keys)
  [don't setup a default project]
> first_project (first_project)
  [create a new project]
1
2
3
4

Стрелками вверх/вниз выбираем first_project (first_project), и нажимаем Enter.

# Следующий вопрос:

What do you want to use as your public directory? (public)
1

Надо указать относительный путь к директории, куда собирается проект. В нашем случае находясь в папке first_project укажем путь: docs/.vuepress/dist. Нажимаем Enter.

# Следующий вопрос:

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

Перевод: Конфигурировать сайт на одностраничное приложение? Выбираем n - нет, нажимаем Enter.

  • Rewrite all urls to index.html (Переписать все URL в index.html) No. (Нет.)

  • Overwrite 404.html (Перезаписать 404.html) No. (Нет.)

  • Overwrite root index.html (Перезаписать корень index.html) No. (Нет.)

В корневом каталоге проекта first_project появились дополнительные файлы и папки. Конфигурация сохраняется в firebase.json, а информация о проекте - в .firebaserc.

Перед развертыванием мы хотим убедиться, что мы создали последнюю версию нашего веб-сайта. Запустим еще раз сборку проекта:

vuepress build docs
1

Публикация проекта следующей командой:

firebase deploy
1

Процесс публикации должен быть подобен:

D:\first-project>firebase deploy

=== Deploying to 'first-project'...

i  deploying hosting
i  hosting[first-project]: beginning deploy...
i  hosting[first-project]: found 2 files in docs/.vuepress/dist
+  hosting[first-project]: file upload complete
i  hosting[first-project]: finalizing version...
+  hosting[first-project]: version finalized
i  hosting[first-project]: releasing new version...
+  hosting[first-project]: release complete

+  Deploy complete!

Project Console: https://console.firebase.google.com/project/first-project/overview
Hosting URL: https://first-project.firebaseapp.com

D:\first-project>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

Команда + Deploy complete! - означает что публикация прошла успешно!

# Повторная публикация проекта

# 1. Перейти в папку с проектом

Открыть консоль виндос или терминал и перейти в папку с проектом.

D:\first-project>
1

# 2. Выполнить сборку проекта кондной vuepress build docs

D:\first-project>vuepress build docs
wait Extracting site metadata...
tip Apply theme @vuepress/theme-default ...
tip Apply plugin container (i.e. "vuepress-plugin-container") ...
tip Apply plugin @vuepress/register-components (i.e. "@vuepress/plugin-register-components") ...
tip Apply plugin @vuepress/active-header-links (i.e. "@vuepress/plugin-active-header-links") ...
tip Apply plugin @vuepress/search (i.e. "@vuepress/plugin-search") ...
tip Apply plugin @vuepress/nprogress (i.e. "@vuepress/plugin-nprogress") ...

√ Client
  Compiled successfully in 18.44s

√ Server
  Compiled successfully in 12.45s

wait Rendering static HTML...
success Generated static files in docs\.vuepress\dist.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 3. Логинимся в firebase командой firebase login

D:\first-project>firebase login
Already logged in as your-mail-example@gmail.com
1
2

# 4. Публикуем проект командой firebase deploy

D:\first-project>firebase deploy

=== Deploying to 'first-project'...

i  deploying hosting
i  hosting[first-project]: beginning deploy...
i  hosting[first-project]: found 126 files in docs/.vuepress/dist
+  hosting[first-project]: file upload complete
i  hosting[first-project]: finalizing version...
+  hosting[first-project]: version finalized
i  hosting[first-project]: releasing new version...
+  hosting[first-project]: release complete

+  Deploy complete!

Project Console: https://console.firebase.google.com/project/first-project/overview
Hosting URL: https://first-project.firebaseapp.com
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

← Настройки стандартной темы →