При таком большом количестве вариантов запуск простого веб-сайта не должен быть сложным.

Раньше нам было довольно сложно разместить простой веб-сайт. Нам нужно было искать компанию для веб-хостинга. Компания дала нам виртуальную машину, и нам нужно было настроить ее самостоятельно. Это было так утомительно и отнимало много времени.

Сегодня технологии развиваются быстрее, чем когда-либо прежде. Все становится проще и быстрее. Чтобы создать статический веб-сайт сегодня, вам, вероятно, потребуется всего пять минут.

В этом руководстве мы создадим статический веб-сайт и быстро разместим его с помощью Vue.js и Firebase.

Vue.js

Vue.js, или Vue, - очень популярный фреймворк JavaScript, который значительно вырос за последние годы. Vue.js был создан Эваном Ю, когда он работал в Google над Angular.js.

Он разработан с нуля для постепенного внедрения. Одним из основных преимуществ Vue является то, что он взял много хороших ингредиентов от своих конкурентов (Angular и React) и добавил к нему свои специи.

Firebase

Firebase - это мобильная платформа Google, которая помогает быстро разрабатывать высококачественные приложения и развивать свой бизнес.

Firebase - это серверная часть как сервисное решение, которое имеет гораздо больше функций, чем его конкуренты. Он включает в себя базу данных в реальном времени, систему аутентификации, хостинг для хранения, push-сервер и многое другое.

Почему именно Firebase?

  • Быстро создавайте приложения без управления инфраструктурой.
  • При поддержке Google, которому доверяют лучшие приложения.
  • Одна платформа с продуктами, которые лучше работают вместе.

В этом руководстве мы рассмотрим только Хостинг Firebase в Firebase.

Firebase Hosting - это полностью управляемая служба хостинга для статического и динамического контента, а также микросервисов.

Сервис поддерживается SSD-хранилищем и глобальной CDN (сетью доставки контента). SSL с нулевой конфигурацией встроен в Firebase Hosting, поэтому контент всегда доставляется безопасно.

Самое главное, это бесплатно с ним:

  • Хранилище 1 ГБ.
  • Переносится 10 ГБ в месяц.
  • Пользовательский домен и SSL.
  • Несколько сайтов на проект.

Руки вверх

Предпосылки

  • Node.js версии 8.9 или выше (рекомендуется 8.11.0+)
  • Vue CLI
  • Аккаунт Google
  • Firebase CLI

Установка Vue CLI

Чтобы установить новый пакет, используйте одну из следующих команд.

npm install -g @vue/cli
# OR
yarn global add @vue/cli

Вы можете проверить свою версию с помощью этой команды:

vue --version

Для получения дополнительной информации вы можете обратиться к их официальному сайту.

Установка интерфейса командной строки Firebase

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

firebase login

Убедитесь, что интерфейс командной строки установлен правильно и получает доступ к вашей учетной записи, перечислив ваши проекты Firebase.

firebase projects:list

Создайте проект в консоли Firebase

Заходим в Консоль Firebase и добавляем проект.

Шаг 1. Введите название вашего проекта.

Шаг 2. Вы можете включить Google Analytics для своего проекта (необязательно).

Шаг 3. Настройте Google Analytics (необязательно).

Создайте наш проект Vue

В этом руководстве мы создадим проект Vue по умолчанию и сразу разместим его в Firebase. Чтобы создать новый проект, запустите:

vue create my-website

Вам будет предложено выбрать предустановку. Вы можете выбрать предустановку по умолчанию, которая поставляется с базовой настройкой Babel + ESLint, или выбрать Выбор функций вручную, чтобы выбрать нужные вам функции.

После выбора предустановки будет создан проект.

Теперь вы можете протестировать проект Vue на своем локальном компьютере, используя следующую команду:

npm run serve

Теперь приложение работает по адресу http: // localhost: 8080.

Сборка и развертывание в Firebase

Чтобы собрать наш проект Vue.js, выполните следующую команду:

npm run build

Файлы сборки будут готовы в вашем dist каталоге. Теперь мы готовы к развертыванию в Firebase.

Во-первых, нам нужно инициализировать наш локальный проект проектом Firebase, выполнив команду:

firebase init

Затем интерфейс командной строки предложит вам выбрать функции, которые нужно настроить для вашего проекта. Используйте spacebar, чтобы выбрать параметр, и нажмите enter, чтобы подтвердить свой выбор.

Поскольку мы уже создали проект в консоли Firebase, вы можете просто выбрать опцию «Использовать существующий проект». Вы увидите, что ваш проект Firebase находится в списке.

Затем введите dist в качестве общедоступного каталога. Затем введите «y», чтобы настроить одностраничное приложение. Наконец, введите «N», чтобы не перезаписывать свой index.html.

Теперь ваш проект готов к развертыванию. Разверните в Firebase, выполнив команду:

firebase deploy

Попробуй это

Ваш веб-сайт теперь размещен на Firebase. Перейдите по URL-адресу вашего хостинга и проверьте его.

Дополнительные советы

Гугл Аналитика

Во время создания вашего проекта Firebase Google Analytics уже был включен в предыдущем разделе. Чтобы полностью интегрировать его, нам нужно добавить несколько фрагментов кода в наш проект Vue.

В этом разделе мы собираемся реализовать отслеживание просмотров для наших страниц.

Если вы не включили Google Analytics во время создания проекта, вы можете включить его вручную в консоли Firebase.

Нажмите на значок шестеренки рядом с обзором проекта, вы увидите настройки проекта. Нажмите на «Интеграции» и включите Google Analytics.

Прежде чем мы начнем, нам потребуется несколько конфигураций для подключения, например:

  • Ключ API
  • ID проекта
  • ID приложения
  • Идентификатор измерения

Перейдите в настройки проекта, вы можете получить свой ключ API, идентификатор проекта и идентификатор приложения.

Если у вас нет идентификатора приложения, вы можете создать его, нажав на значок HTML-тега и зарегистрировав свое приложение.

Чтобы получить идентификатор измерения, мы должны перейти в нашу учетную запись Google Analytics. Щелкает по настройкам администратора. В разделе Свойство создайте потоки данных.

Введите полный URL-адрес приложения Firebase (например, https://my-website-fa3e5.firebaseapp.com). Идентификатор измерения создается в правом верхнем углу.

Теперь у нас все готово. Pageview предполагает разные заголовки документов для разных страниц. Самый простой способ реализовать это - использовать vue-meta.

Сначала перейдите в каталог проекта и установите библиотеки.

npm install firebase vue-meta --save

Перейдите к main.js и замените его приведенными ниже фрагментами.

Заходим в наш App.vue и заменяем скрипты.

Зайдите на HelloWorld.vue и замените скрипты. Если вам нужно отслеживать другие страницы, добавьте metaInfo на все свои страницы.

Наконец, мы создаем файлы и развертываем их в Firebase. Если вы хотите проверить, правильно ли вы настроили их, вы можете запустить его локально и установить Отладчики Google Analytics для отладки в журналах консоли.

Примечание. Показатели могут отображаться не сразу после настройки. Он появится в течение 24 часов.

Подключиться к личному домену

Вы можете использовать собственный домен (например, yourdomain.com или app.yourdomain.com) вместо домена, созданного Firebase для вашего сайта, размещенного в Firebase.

Firebase Hosting предоставляет SSL-сертификат, подписанный Let's Encrypt, для каждого из ваших доменов и обслуживает ваш контент через глобальную CDN.

Чтобы подключить личный домен, войдите в консоль Firebase. В боковом меню выберите Разработка ›Хостинг› Добавить собственный домен.

Введите свой домен, а затем скопируйте записи TXT к своему провайдеру DNS для проверки.

PageSpeed ​​Insights

PageSpeed ​​Insights (PSI) сообщает об эффективности страницы как на мобильных, так и на настольных устройствах и предоставляет предложения по улучшению этой страницы.

Перейдите на https://developers.google.com/speed/pagespeed/insights/ и войдите на свой веб-сайт для анализа. Будет проведена диагностика более подробной информации о производительности вашего приложения, и вы узнаете, как можно улучшить вашу страницу.

Последние мысли

Вот и все! Теперь вы быстро создали свой статический веб-сайт с помощью Vue.js и Firebase. Пожалуйста, дайте мне знать ваши предложения и комментарии. Удачного кодирования!