При таком большом количестве вариантов запуск простого веб-сайта не должен быть сложным.
Раньше нам было довольно сложно разместить простой веб-сайт. Нам нужно было искать компанию для веб-хостинга. Компания дала нам виртуальную машину, и нам нужно было настроить ее самостоятельно. Это было так утомительно и отнимало много времени.
Сегодня технологии развиваются быстрее, чем когда-либо прежде. Все становится проще и быстрее. Чтобы создать статический веб-сайт сегодня, вам, вероятно, потребуется всего пять минут.
В этом руководстве мы создадим статический веб-сайт и быстро разместим его с помощью 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. Пожалуйста, дайте мне знать ваши предложения и комментарии. Удачного кодирования!