Уеб куки на Dialogflow: как да се разработи локално и да се внедрят в облачни функции

Когато нашият екип започна да изгражда чат-бота на Nila на LINE HACK 2018, ние знаехме колкото Джон Сноу за това как да изградим кука в мрежата. Някои от нас имаха известен опит с Firebase и писане на облачни функции, така че предположихме, че ще бъде доста лесно, особено когато намерихме Inline Editor - но в крайна сметка изградихме първата версия изцяло на Glitch, жива среда за работа с Node .js приложения. Въпреки че Glitch е чудесен за учене, бихме могли да улесним живота си, създавайки местна среда за развитие.

Тази статия обяснява как да изградите уеб кука, като развивате локално и разполагате в облака. Това е набор от съвети и трикове, които ще направят разработването на уеб куки по-бързо, практично и по-безопасно:

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

1. Започнете с шаблон и го стартирайте локално

Въпреки че в тази статия акцентът е уеб куки Dialogflow, подозирам, че тези стъпки са същите за разработването на всяка кука в мрежата. Ако използвате Dialogflow, може да започнете с Inline Editor за изпълнение. Първото нещо, което трябва да направите, е да вземете този код и да го промените, за да се изпълнява локално.

В simpleServer.js взех кода за изпълнение на Dialogflow от Inline Editor, премахнах специфичния код на Firebase и добавих експрес, за да обслужвам куката в мрежата. Ще ви е необходим package.json със зависимостите за експресно, диалогово изпълнение-изпълнение и действия-на-google. Пуснете уеб куката от node simpleServer.js и след това отворете http: // localhost: 8080 /, за да проверите дали работи.

2. Използвайте ngrok, за да обслужвате локален http на публичен https

Ngrok е безплатна услуга, която ви предоставя публичен сигурен https URL на вашия локален уеб сървър. Можете да инсталирате ngrok в световен мащаб (изтегляне на двоичен или npm инсталиране глобален), но моето предпочитание е да инсталирам като dev зависимост:

npm инсталирайте ngrok --save-dev

И след това променете вашия package.json:

  ...
  "скриптове": {
    "тунел": "ngrok http 8080"
  }

Сега, когато искате да създадете https URL за вашата местна среда за разработка, просто използвате npm run tunnel. Ngrok ще стартира и ще създаде https URL:

Извършване на ngrok за получаване на публичен https URL за вашия локален сървър

Сега можете да копирате https URL адреса под „Препращане“ (подчертан в червено), за да бъде вашата кука за изпълнение в Dialogflow:

Конфигурирайте Изпълнението на Dialogflow, за да използвате URL адрес за препращане ngrok

В този момент бих тествал, че всичко работи, като изпратя „здравей“ в тестовата конзола на Dialogflow:

Причината да предпочитам да инсталирам като dev зависимост е, че когато друг разработчик се присъедини към екипа, няма нужда да инсталирате нищо допълнително - те могат просто да използват npm run tunnel, за да създадат https URL.

Можете да излезете от ngrok с помощта на Ctrl-C (и той ще спре да показва публичния ви URL адрес). Всеки път, когато рестартирате ngrok, ще получавате нов URL адрес, което означава, че ще трябва да актуализирате URL адреса в конзолата Dialogflow. Един от начините за това е да надстроите до един от платените планове на ngrok.

3. Презареждане (nodemon) и отстраняване на грешки (VS код)

На този етап имате публичен URL адрес, който тунелира целия трафик към нашата локална машина, който работи с основен шаблон Dialogflow. Ще искаме да редактираме кода и да видим промените моментално в нашата кука (например чрез симулатора Dialogflow).

Nodemon е най-добрият приятел на Node.js, рестартирайки сървъра винаги, когато открие промени. Подобно на ngrok, аз го инсталирам като dev зависимост:

npm инсталирайте nodemon --save-dev

И отново променете своите script.json скриптове:

  "скриптове": {
    "dev": "nodemon --inspect simpleServer.js",
    "тунел": "ngrok http 8080"
  }

След това стартирайте вашата dev среда с npm run dev.

Аргументът --inspect дава възможност за отстраняване на грешки. Във VS Code можете да създадете конфигурация за отстраняване на грешки, която работи с nodemon, както следва:

  1. В менюто „Debug“ изберете „Open Configurations“, за да отворите файла start.json.
  2. Използвайте бутона „Добавяне на конфигурация…“, за да добавите нова конфигурация за отстраняване на грешки „Node.js: Прикрепете“. Получената конфигурация трябва да изглежда така:
"конфигурации": [
  {
    "type": "възел",
    "заявка": "прикачване",
    "name": "Прикачване",
    "порт": 9229
  }
]

За да тествате това, натиснете F5, за да започнете отстраняване на грешки (трябва да видите Debugger приложен. На терминала). След това поставете точка на прекъсване в вашия добре дошъл () агент. Отидете на тестовата конзола Dialogflow и кажете отново „здравей“. Отладникът ще спре изпълнението на вашата точка на прекъсване.

4. Код стил (незадължителен)

Докато ние настройваме VS код, може да е подходящ момент за настройка на лайнера. Обичам да използвам стандартния стил на JavaScript, защото е прост - не ми харесва 100% от правилата, но е достатъчно близо и обичам факта, че е фиксиран стил, така че няма спор / губене на време за настройване на ESLint настроики. Също така е лесно да се инсталира:

npm инсталирате стандартно - save-dev

Добавете команда lint към вашия package.json:

"скриптове": {
    ...
    "lint": "стандарт"
  }

След това можете да проверите кода си с npm run lint или да поправите всички грешки с npm run lint - --fix.

Вероятно обаче искате да коригирате функцията в редактора си. VS Code има разширение за Standard. След като инсталирате това, добавете {"key": "cmd + l", "command": "standard.executeAutofix"} към вашия keybindings.json, като промените cmd + l за който и да е бърз клавишен клавиш, който искате да използвате. Сега можете да натиснете този пряк път, за да запазите кода си в стил Стандарт. :)

5. (a) Внедряване в облачни функции за Firebase

След като се сбогувахме с облачните функции, като ги премахнем в стъпка 1, е време да се върнем към внедряването. Спомнете си, че оригиналният ни код за облачни функции изглеждаше така:

export.dialogflowFirebaseFulfillment =
    Функции.https.onRequest ((заявка, отговор) => {...})

Оказва се, че експресното приложение също е функция, която приема заявка / отговор, така че удовлетворява изискванията на облачните функции за (заявка, отговор) => {...}.

Следователно можем да разделим съществуващите си SimpleServer.js на server.js и app.js. Файлът app.js съдържа нашето приложение, което може да се стартира на Node.js или Cloud Functions.

Изпълнение на експресно приложение чрез облачни функции

Тази архитектура ни дава възможност да работим локално с ngrok и node, когато се разработваме и да внедряваме в Cloud Functions за производство.

Резултатът:

Не забравяйте да инсталирате зависимостите за Firebase: npm инсталирайте firebase-функции firebase-admin --save.

На следващо място, внедряването ...

Ако не сте запознати с разполагането на облачни функции, тогава можете да разгледате документацията на Firebase.

Основни стъпки:

  1. Инсталирайте Firebase CLI: npm install -g firebase-tools @ najnovije
  2. Създайте firebase.json, съдържащ:
    {"функции": {"source": ".", "predeploy": ["npm run lint"]}}
  3. Стартирайте firebase use --add в папката на вашия проект, за да изберете вашия проект Firebase и да зададете псевдоним.
  4. Редактирайте своя package.json, за да насочите „основния“ скрипт към „cloudFuncs.js“:
    "main": "cloudFuncs.js",
  5. Ако искате да използвате Node 8 (вероятно го правите!), Тогава също добавете това към package.json:
    "двигатели": {"node": "8"},
  6. Опитайте да разгърнете: разгръщане на firebase - само функции
Разположете уеб кука към облачни функции на Firebase

Ако внедряването завърши успешно, тогава можете да отворите тестовата крайна точка в браузъра си на адрес: https: // us-central1- [yourprojectid] .cloudfunctions.net / app / (обърнете внимание, чертата за наклоняване / е необходима за експресното съответствие на маршрута).

И URL адресът на уеб куката е https: // us-central1- [yourprojectid] .cloudfunctions.net / app / dialogflow.

И накрая, добавете скрипт за разгръщане към вашия package.json, така че да можете да стартирате npm run implemen-cf за внедряване в Firebase по всяко време:

  "скриптове": {
    ...
    "implemen-cf": "разгръщане на firebase - само функции"
  }

Локални Node.js срещу облачни функции

  • Променливите на средата трябва да бъдат зададени чрез командата firebase. Пример:
    firebase функции: config: set apiKey = "Ключът на API"
  • Автоматизирайте получаването и настройката на променливите на средата със скрипт, следвайки съветите на Алан Хасегава.
  • Глобалните променливи няма да се държат както очаквате:
    „Няма гаранция, че състоянието на облачна функция ще бъде запазено за бъдещи извиквания.“ Https://cloud.google.com/functions/docs/bestpractices/tips

5. (б) внедряване в Google App Engine (бонус!)

Наскоро Google добави по-гъвкави функции за мащабиране към App Engine и поддръжка за Node 10. Разликата между пускането на вашата уеб кука в App Engine и облачните функции е доста фина. От това, което разбирам, Firebase потенциално изпълнява много облачни функции заедно в много случаи и управлява кои от тях са деактивирани, когато не се използват. App Engine, от друга страна, стартира приложението ви в един или повече специализирани случаи, които могат да бъдат мащабирани автоматично в зависимост от търсенето.

Когато търсенето е нула, App Engine може да мащабира до нула инстанции - това е по подразбиране, което е добро за управление на разходите, когато експериментирате. App Engine има безплатни квоти (28 екземпляра часа на ден), което означава, че може да нямате разходи за един екземпляр (но не ми цитирайте това!).

Открих, че разполагането в App Engine е много по-лесно от облачните функции.

  1. Инсталирайте инструмента за команден ред gcloud - вижте документацията
  2. Активирайте API за изграждане на облак за вашия проект на страницата за API и услуги на Google Cloud Platform.
  3. Създайте файл с име app.yaml в корена на вашия проект, съдържащ:
    време на изпълнение: nodejs8
    или като алтернатива за най-новия Node.js може да предложи:
    време на изпълнение: nodejs10
    (Ако изберете nodejs10, тогава трябва да промените версията на възела и в „двигателите“ на package.json.)
  4. Разгърнете: внедряване на приложение gcloud --project [yourprojectid]

Ако внедряването е било успешно, отворете браузъра си на https: // [yourprojectid] .appspot.com и вашата кука за уеб ще бъде достъпна на https: // [yourprojectid] .appspot.com / dialogflow.

За пореден път, спретнайте със скрипт за разгръщане към вашия package.json, така че можете да стартирате npm стартиране на разгръщане-ae, за да се разгърнете по всяко време:

"скриптове": {
    ...
    "implemen-ae": "приложение на gcloud разгръщане --project [yourprojectid]"
  }

резюме

Вече трябва да можете да:

  • Създайте локална среда за разработка на вашия уеб проект за куки, с възможности за свързване и отстраняване на грешки - в любимия си браузър
  • Обслужвайте вашата местна среда като публичен https URL с помощта на ngrok
  • Разгърнете приложението в облачни функции на Firebase AND в Google App Engine

Този проект стартира като уеб кука за Dialogflow, но обсъжданите техники ще работят за всеки проект за уеб кука.

Можете да намерите целия код на github: webhook-template. Използвам това като отправна точка за всеки проект за уеб куки - надявам се и вие да го намерите полезен.