Ръководство стъпка по стъпка с примерен проект

Има няколко начина, по които можете да създадете уебсайт с Vue.js, като Java с Vue, NodeJS с Vue, NGINX, обслужващ Vue и т.н. За приложенията с една страница всичко, което трябва да направите, е да заредите първоначалния index.html. След като заредите index.html, библиотеката Vue се включва и върши останалата част от работата, като зареждане на компонент, извикване на API повиквания и т.н. Какво ще стане, ако няма извиквания на задния край и искате да създадете статичен уебсайт с Vue .js?

GCP 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 код в кофата.

Трябва да изберем място, където да съхранявате данните. Ако искате висока наличност, можете да изберете Multi-region. Можем да изберем региона за тази статия.

Имаме четири вида класове за съхранение: Standard, Nearline, Coldline и Archive за различни случаи на употреба. Просто ще изберем Standard за този случай на употреба.

Трябва да изберем контрол на достъпа за нашата кофа. Тя е или финозърнеста, или еднородна. За да направите индивидуалните обекти във вашата кофа публично достъпни, трябва да превключите режима на Контрол на достъп на вашата кофа на Дребно. Като цяло, да направите всички файлове във вашата кофа публично достъпни е по-лесно и по-бързо.

Накрая натискаме бутона Create, за да създадем кофата.

Направете го публичен

Създадохме кофа и е време да я направим публична. Нека щракнем върху бутона за препълване и щракнете върху Редактиране на разрешения за кофа.

Трябва да добавим член, наречен allUsers с ролята Storage Object Viewer и Allow Public Access, за да го направим публичен.

След като сте изпълнили горните стъпки, можете действително да видите състоянието на публичен достъп като Публичен в интернет

Изградете проекта 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 CLI. „Ето връзката за това. Можете да продължите да го изтегляте и инсталирате.»
  • Ако имате име на домейн и трябва да създадете име на кофа със същото име. Например, ако името на вашия домейн е 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 акаунт, проект и да активирате акаунт за таксуване в проекта като предпоставка.
  • Можете да създадете статичен уебсайт с помощта на Console, Google Cloud CLI, SDK и REST API.
  • Трябва да създадете потребителски интерфейс на Vue с относителния път, същият като името на кофата.

Заключение

Облачното съхранение на GCP е една от опциите за статично хостване на уебсайтове и дори можем да добавим API с облачни функции, за да получим всякакви API данни или динамични данни. Ще ги видим в следващите публикации.