Пошаговое руководство с примером проекта

Существует несколько способов создания веб-сайта с Vue.js, например Java с Vue, NodeJS с Vue, NGINX, обслуживающий Vue, и т. Д. Для одностраничных приложений все, что вам нужно сделать, это загрузить начальный index.html. Как только вы загружаете index.html, включается библиотека Vue и выполняет остальную работу, например, загружает компонент, вызывает вызовы API и т. д. Что делать, если внутренних вызовов нет и вы хотите создать статический веб-сайт с Vue .js?

GCP Cloud Storage - это глобально унифицированное, масштабируемое и высоконадежное объектное хранилище для разработчиков и предприятий. Мы можем настроить корзину Cloud Storage для размещения статического веб-сайта для вашего домена. index.html из пользовательского интерфейса Vue можно поместить в корзину вместе со всеми соответствующими файлами HTML, CSS и JavaScript.

  • Почему этот подход
  • Пример проекта
  • Предварительные требования
  • Создание сегмента с общедоступным доступом
  • Создайте проект Vue с относительным путем
  • Загрузить и протестировать
  • Дальнейшие действия
  • Резюме
  • Заключение

Почему такой подход

Статический веб-хостинг GCP Cloud Storage дает вам возможность обслуживать весь веб-сайт прямо с него. Вам следует рассмотреть этот подход, когда

  • На стороне клиента много динамической логики, а не на стороне сервера.
  • В вашем проекте есть микросервисы, и вам нужно вызывать те, у которых включен CORS.
  • Ваш веб-сайт прост, например, страница профиля
  • Идеально подходит для кеширования веб-сайтов, которые в основном читают.
  • С Cloud CDN вы можете распространять контент по всему миру с меньшими задержками и значительно улучшать производительность.

Пример проекта

Вот пример проекта, который мы можем поместить в GCP Cloud Storage для статического хостинга веб-сайтов. Это простая страница профиля с заголовком и несколькими разделами.

// clone the project
git clone https://github.com/bbachi/my-profile-vuejs.git
// install dependencies and start the project
npm install
npm run serve

Вы можете клонировать проект и запустить его на своем компьютере. Вот демонстрация, когда вы запускаете его на своем локальном хосте и на порту 8080.

Предпосылки

Нам нужно создать учетную запись Google Cloud Platform по этому URL-адресу. Вы можете создать учетную запись и войти в Cloud Console.

Создайте проект под названием StaticWeb-Test (можете называть как хотите).

Создать новый проект

После создания проекта вы можете просмотреть панель управления проектом, как показано ниже. Вы можете увидеть все ресурсы, которые вы создаете в рамках этого проекта.

Создать учетную запись для выставления счетов

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

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

Связать платежный аккаунт с этим проектом

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

Создать корзину с общедоступным доступом

Ниже приведен ряд шагов, которые нам необходимо выполнить, чтобы создать статический веб-сайт с облачным хранилищем GCP.

Создать ведро

Давайте создадим сегмент staticvuejsweb и загрузим в него весь код Vue.

Нам нужно выбрать место, где вы храните данные. Если вам нужна высокая доступность, вы можете выбрать несколько регионов. Мы можем выбрать регион для этой статьи.

У нас есть четыре типа классов хранения: Standard, Nearline, Coldline и Archive для различных случаев использования. Мы просто выберем Standard для этого варианта использования.

Нам нужно выбрать Контроль доступа для нашей корзины. Он бывает либо мелкозернистым, либо однородным. Чтобы сделать отдельные объекты в вашей корзине общедоступными, вам необходимо переключить режим Контроль доступа вашего сегмента на Детализированный. Как правило, сделать все файлы в вашей корзине общедоступными проще и быстрее.

Наконец, мы нажимаем кнопку Create, чтобы создать ведро.

Сделать общедоступным

Мы создали корзину, и пора сделать ее общедоступной. Давайте нажмем кнопку переполнения и выберем Изменить права доступа к сегменту.

Нам нужно добавить участника с именем allUsers с ролью Storage Object Viewer и разрешить общий доступ, чтобы сделать его общедоступным.

После того, как вы выполнили описанные выше шаги, вы действительно можете увидеть статус общего доступа как Открытый для Интернета.

Создайте проект Vue с относительным путем

Давайте создадим проект Vue с относительным путем к имени сегмента. Например, у нас есть имя сегмента staticvuejsweb, поэтому нам нужно создать пользовательский интерфейс Vue с этим относительным путем.

Это связано с тем, что все файлы, загруженные в облачное хранилище, доступны с префиксом имени сегмента. Все файлы js и CSS, к которым осуществляется доступ в index.html, должны иметь этот относительный путь.

Нам нужно добавить следующую запись в файл с именем vue.config.js

Когда мы запускаем команду npm run build, она добавит относительный путь staticvuejsweb в index.html..

Загрузить и протестировать

Все файлы из папки dist должны быть загружены в корзину, как показано ниже.

Поскольку у нас есть все объекты с публичным доступом. Давайте скопируем ссылку index.html https://storage.googleapis.com/staticvuejsweb/index.html

Следующие шаги

  • Вы можете очистить все ресурсы и корзины, как только протестируете его.

  • Вы также можете выполнить все эти шаги с помощью интерфейса командной строки Google Cloud. Вот ссылка на это. Вы можете скачать и установить его .
  • Если у вас есть доменное имя, и вам нужно создать имя корзины с таким же именем. Например, если ваше доменное имя - example.com, вам нужно создать сегмент с именем www.example.com.
  • Вы можете установить индексный файл и страницы ошибок с помощью следующей команды с помощью CLI
gsutil web set -m index.html -e 404.html gs://www.example.com

Резюме

  • Существует несколько способов создания веб-сайта с Vue, например Java с Vue, NodeJS с Vue, NGINX с Vue и т. Д.
  • GCP Cloud Storage - это глобально унифицированное, масштабируемое и высоконадежное объектное хранилище для разработчиков и предприятий.
  • index.html из пользовательского интерфейса Vue можно поместить в корзину вместе со всеми соответствующими файлами HTML, CSS и JavaScript.
  • Вам необходимо создать учетную запись GCP, проект и включить платежную учетную запись в проекте в качестве предварительных условий.
  • Вы можете создать статический веб-сайт с помощью консоли, Google Cloud CLI, SDK и REST API.
  • Вы должны создать пользовательский интерфейс Vue с относительным путем, таким же, как имя корзины.

Заключение

Облачное хранилище GCP - это один из вариантов статического хостинга веб-сайтов, и мы даже можем подключить API с облачными функциями для получения любых данных API или динамических данных. Мы увидим это в будущих публикациях.