Как запустить сервер MVP за час

1656556825 kak zapustit server mvp za chas

Исроэль Яковсон

0od-Rq0otXbWORjls-in-zNuBLmOVTI9NIvh

Создание сервера с полным стеком

В этой статье вы узнаете, как создать живой, качественный API и серверный интерфейс. Это займет у вас около часа. И, кстати, будет бесплатно!

Это вторая из серии из 3 статей о полных стеках графов. Узнайте, как создать передовой сервер сейчас.

Я предполагаю, что вы умеете кодировать, но не продвинутый. Это полный стек проект. Это касается многих новых инструментов, так что вам не нужно пугаться, если вы не все понимаете. Впереди вас ждет несколько кривых обучения, но не слишком крутые.

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

Как я писал в первой статье, я ушел с проектом GRANDstack. Я не утверждаю, что это единственный жизнеспособный подход, но я рекомендую вам по крайней мере проверить его. Моя команда решила, что мы хотим использовать React, GraphQL, Apollo и базу данных графиков. GRANDstack состоит именно из них, поэтому открытие меня взволновало.

Но настоящий ажиотаж начинается с пакета neo4j-graphql-js. Он генерирует (стиль Prisma) набор мутаций и резольверов из TypeDefs. Если вы не знаете, что это значит, читайте дальше.

На странице GRANDstack Kickstarter видео показывает, как создать полный стек от начала до конца. Именно с этого я начал.

Одной из проблем с написанием этих статей является то, что рекомендуемые пакеты находятся в стадии разработки. Многие вещи, которые вам все еще нужно сделать сегодня, могут стать автоматическими через несколько недель. Я хочу подытожить шаги и объяснить, как сделать некоторые из необходимых вещей, которых еще не хватает. Но сотрудники Neo4j работают над ними. Если вы видите, что эта информация устарела, пожалуйста, опубликуйте обновления ниже.

Альтернативные подходы

Прежде чем мы начнем, позвольте мне повторить, что я не называю GRANDstack единственным или даже самым лучшим подходом к стеку полного графика.

Многие альтернативы используют Prisma для преобразования схемы GraphQL в базовую базу данных. Обязательно просмотрите GraphCool. К моменту написания этой статьи эти системы более развиты и оставляют меньше работы для разработчика. Хорошим примером является авт.

Подход Prisma также имеет меньшую приверженность конкретной базе данных. На практике изменить базу данных с GRANDstack будет не так уж сложно. Но шифровые запросы и директивы уникальны для Neo4j.

Тем не менее проект GRANDstack явно сосредоточен на идее полного стека графиков. Я рекомендую их, потому что они отзывчивы и преданы видению. Это тоже очень просто.

Настройка

Создайте проект

  1. Загрузите стартер. Нажмите DOWNLOAD STARTER с GRANDstack или загрузите его со страницы GitHub. Я использовал страницу GitHub, чтобы убедиться, что у меня последняя версия (она все равно должна быть).
  2. Распакуйте в папку и назовите ее для проекта программы
  3. Разумно переместить новую папку программы в общую демонстрировать папку.

Настройте Git

Я рекомендую вам ничего не делать, пока вы не начнете использовать Git для управления версиями.

  1. Установите Git если у вас его нет.
  2. В текстовом редакторе внесите изменения .gitignore в корневом каталоге проекта, чтобы включить under #dependencies строка для api/node_modules и строка для ui/node_modules. На момент написания этой статьи .gitignore содержится только node_modules.
  3. Перейдите в корневой каталог проекта в терминале и создайте новый проект git:
git init git add .   # adds the relevant filesgit status  # optional to view the files if you are interestedgit commit -m “Initial App Files” #or whatever name you'd like

Вы можете выполнять git add . и git commit -m "some description" так часто, как вам нравится. Просмотрите бесконечную документацию о Git в Интернете. Вы можете узнать о разветвлениях, комитах, возвратах и ​​все о контроле версий.

Сделайте образец Back End

Обратите внимание, что код вашего проекта имеет два каталога: api и ui. Эти статьи сосредоточены только на api каталог для создания сервера API и серверной части. Чтобы узнать больше о ui, просмотрите видео GRANDstack Kickstarter. Также можно просмотреть учебные пособия на GRANDstack.

Создайте заднюю часть

Вам нужно создать код. Для этого можно использовать npm. В терминале перейдите к apiи выполните следующие действия:

npm install # pulls in all of the node modules needed for the apinpm start # begins the app

Это должно запустить программу. Вы должны увидеть что-то вроде этого в своем терминале:

$ npm start
> grand-stack-starter-api@0.0.1 start /home/israel/projects/events2/api> nodemon --exec babel-node src/index.js
[nodemon] 1.18.3[nodemon] to restart at any time, enter `rs`[nodemon] watching: *.*[nodemon] starting `babel-node src/index.js`GraphQL API ready at 

Откройте эту ссылку, и вы увидите страницу GraphQL Playground.

p287pjNAiabrD4eyZBNr-GdewMT88YQSWyTq

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

Настройте образец базы данных

Вам нужно будет зарегистрироваться в Neo4j, чтобы использовать их песочницу, как описано ниже. Я рекомендую зайти на их канал Slack с самого начала. В частности, если вы выполните следующие действия, я присоединюсь к #грандиозный стек канал, чтобы вы могли задавать вопросы. Проект стремительно развивается, потому принципиально оставаться на связи. Они достаточно восприимчивы к идеям и реагируют на проблемы. В последние несколько недель они реализовали несколько идей, которые я и другие предложили.

Раскрутите пустую базу данных

  1. Войдите в Neo4j Sandbox. (Как указано в начале, вам нужно создать аккаунт, если у вас его нет.)
  2. Найдите «Пустая база данных» и нажмите на нее. Он должен сгенерироваться и отобразиться через минуту Ваши текущие песочницы.
  3. Нажмите кнопку Подробности вкладку, и вы увидите что-то вроде этого:
g2WzC42HBX1fuPW6kr-3i9Z9HfE83F3yIkpf

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

Подключите свой проект к базе данных

Откройте api/.env файл, содержащий некоторые глобальные переменные, используемые в API:

NEO4J_URI=bolt://localhost:7687NEO4J_USER=neo4jNEO4J_PASSWORD=letmeinGRAPHQL_LISTEN_PORT=4000GRAPHQL_URI=http://localhost:4000

Вам нужно установить некоторые из них на вкладке «Детали» вашей песочницы

  1. Скопируйте IP-адрес (например, в приведенном выше примере) 174.129.54.148), а затем порт болта, например 33199. Используйте их вместе, чтобы создать новое значение для NEO4J_URI в api/.env файл, заменив bolt://localhost:7687. Обратите внимание, что двоеточие разделяет их. Например, первая строчка в этом случае будет NEO4J_URI=bolt://174.129.54.148:33199.
  2. Также скопируйте из Details пароль db песочницы (например, в этом случае adhesives-casualties-loads) и замените пароль по умолчанию letmein.
  3. Конечно, убедитесь, что вы сохранили изменения. Затем вернитесь к терминалу, нажмите ctrl-cеще раз введите npm startвернуться и перезагрузить.
  4. Теперь введите такую ​​мутацию на левой панели:
# Try to write your query heremutation {  CreateUser (id: "borris", name: "borris the spider") {    id  }}

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

19KFekShbwlleukGojgH-4FQ59ZHswV3jrtg

Если да, то поздравляю! У вас уже есть функциональный сервер API, работающий локально.

Не забудьте внести изменения в Git. Вернувшись в корневой каталог программы (не в API), введите:

git add .git commit -m "Working Sandbox Db"

Проверьте данные напрямую

Теперь нажмите ссылку Neo4j Browser в верхней части Подробности в вашей песочнице Neo4j. (В случае, показанном выше, это да https://10-0-1-68-33200.neo4jsandbox.com/.)

2IMvSnlT0Bwd5Q7dOwHYMk06rmkTJTBLcGst

Вы можете прочитать о том, как им пользоваться на Neo4j. Но для наших целей введите следующий запрос в подсказке: MATCH (n) RETURN n. Этот запрос возвращает все узлы базы данных. Нажмите кнопку со стрелкой вправо, чтобы выполнить, и вы увидите новый узел, который вы создали:

iY4PdL88TEOKKOkNlJ3LDZXwkxk5io-ibdal

Вы можете вернуться к терминалу в своем api каталог и введите npm seedDb если ты хочешь. Приблизительно через минуту вы увидите исходные данные, поставляемые со стартовым пакетом для их базы данных образцов. Затем вы можете играть с Playground, создавая следующие запросы:

{  users(name: "Will") {    id    name  }}

Или вы можете просто перейти к следующему шагу.

Разместите свою собственную схему GraphQL

Щелкните зеленую кнопку SCHEMA в интерфейсе Playground. Вы увидите схему, поставляемую вместе с образцом базы данных:

oYUqCcTIe7TNBPn7lXpnUMPm8BhIqR6XfnLw

Теперь пора заменить это своей собственной схемой.

  1. Откройте текущий образец схемы api/src/graphql-schema.js, и просмотрите источник данных. Это в typeDefs Декларация.
  2. Узнайте по меньшей мере, что вам нужно о схемах типов GraphQL. Вы должны иметь возможность реализовать собственные типы и некоторые запросы. Это просто.
  3. Начните с одного-двух типов и экспериментируйте, постепенно наращивая. Чтобы создать запрос, вам придется изменить оба typeDefs и resolvers (внизу typeDefs в том же файле). К счастью, ваши решения будут просты. Просто позвоните neo4jgraphql из пакета neo4j-graphql-ps, как в образце базы данных.
  4. Сохраните изменения в файле и убедитесь, что npm обновляется. Затем обновите вкладку Playground и убедитесь, что новая схема отображается.

Во вводной статье о полных стеках графиков упоминался образец программы для событий. Вот образец графика типа данных программы:

-DvKBsPHFILwdawQmLAXeBgrGNfdYHvk1K-O

Это многое, что можно добавить сразу, но начать нетрудно. Мы работаем сверху вниз, и GraphQL очень прощает.

Понимание neo4j-graphql-js

Это поможет немного понять, как используется сервер neo4j-graphql-js.

Звонок в augmentSchema в index.js это то, что создает все мутации. Это включает в себя функции CRUD (Создание, обновление и удаление) для каждого из созданных типов. Кроме того, функции Добавить и Удалить для создания связей.

Связи меж типами порождают функции отношений. Когда тип X возвращает тип Y в поле, это указывает на связь. Функции добавления и удаления генерируются, когда точное соотношение определено с помощью:

  1. а @cypher директива или
  2. а @relation директива с направлением «OUT».

Другая важная функция neo4jgraphql, реализующий резольвер. Документация пакета объясняет подробности.

Документация была обновлена ​​только на прошлой неделе на странице документации GRANDstack. (Этот текст написан 19 августа 2018). Документация все еще немного минимальна. Например, критическое augmentSchema функция не оговаривается в документации. Они обсуждают мутации и показывают пример, используя это. Но документация полезна. Так же и примеры, содержащиеся в стартовом пакете и примерах, приведенных там.

Вы также можете проверить документацию neo4j-graphql. но некоторые вещи там, возможно, не вошли ps версия еще.

Начальные изменения

Можно удалить все типы в примере, но обратите внимание, что не следует полностью удалять тип запроса. Он вам пригодится для ваших запросов, как вы можете увидеть в документации GraphQL.

Вот пример простейшего возможного начала для схемы программы событий:

export const typeDefs = `type Event {  id: ID!  name: String}type Query {    events(id: ID, name: String): [Event]}`;export const resolvers = {  Query: {    events: neo4jgraphql,  }};

После сохранения проверьте наличие успокаивающего сообщения в терминале где npm start бежит. Что-то вроде этого:

[nodemon] restarting due to changes…[nodemon] starting `babel-node src/index.js`GraphQL API ready at 

Обновите Playground в обозревателе и нажав кнопки SCHEMA. Вы должны увидеть новую схему:

I5Htv0-2MxJQ2B5i8HJfJKUQTmq061wCM01J

Затем вы можете начать добавлять больше типов.

Добавьте свои данные

  1. В подсказке Sandbox введите MATCH (n) DETACH DELETE n. Это приведет к удалению любых данных, добавленных для образца схемы, поставляемой вместе с проектом.
  2. Используйте сгенерированные мутации в новой схеме, чтобы создать некоторые данные. Например:
mutation {  CreateEvent(id: "my event", name: "The Big Event") {    id    name  }}

Идти жить

Единственное, что осталось, это переместить ваш сервер на живой сайт, чтобы ваш интерфейс мог вызвать его. (О, и вам придется создать передний край – перейдите к ui каталог папки вашего приложения, чтобы решить это). Видео на странице GRANDstack Kickstart рекомендует использовать Now.

Выделите Now Desktop и нажмите кнопку «Загрузить». Но: настольная программа пока не работает для Linux. Я работаю на Ubuntu, потому просто использовал их интерфейс командной строки. Именно это я использую в этой инструкции.

  1. После установки на компьютер войдите. Вы сможете вернуться на сайт Now и увидеть свое имя или изображение в правом верхнем углу.
  2. Перейдите к api каталог и тип now. Вам будет несколько раз предложено ввести данные. Если все пойдет хорошо, вы получите длинную серию выводов в терминале, который завершится сообщением об успехе:
$ now> Read more about how to update here:  Deploying ~/projects/events2/api under xxxxxxxxxx@gmail.com> Your deployment's code and logs will be publicly accessible because you are subscribed to the OSS plan.> NOTE: You can use `now --public` or upgrade your plan ( to skip this prompt> Upload [=============-------] 66% 0.1s (192.48KB) [4 files]> Using Node.js 8.11.3 (default)>  [in clipboard] (bru1) [7s]> Synced 4 files (192.48KB) [7s]> Building…> ▲ npm install> ✓ Using "package-lock.json"> ⧗ Installing 13 main dependencies…> Building "nodemon@1.18.1" remotely> Building "nodemon@1.18.1" remotely> Building "nodemon@1.18.1" remotely> Building "nodemon@1.18.1" remotely> Error: Error parsing `package.json` for nodemon-1.18.1.tar>     at extract (/snapshot/ace/lib/extract.js:36:11)>     at process._tickCallback (internal/process/next_tick.js:188:7)>     at <anonymous>> ▲ npm install> > protobufjs@6.8.6 postinstall /home/nowuser/src/node_modules/protobufjs> node scripts/postinstall> > > nodemon@1.18.1 postinstall /home/nowuser/src/node_modules/nodemon> node bin/postinstall || exit 0> > Love nodemon? You can now support the project via the open collective:>  >  > npm WARN grand-stack-starter-api@0.0.1 No repository field.> npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules/fsevents):> npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})> > added 564 packages in 9.426s> ▲ Snapshotting deployment> ▲ Saving deployment image (9.0M)> Build completed> Verifying instantiation in bru1> [0] > [0] grand-stack-starter-api@0.0.1 start /home/nowuser/src> [0] nodemon --exec babel-node src/index.js> [0] > [0] [nodemon] 1.18.1> [0] [nodemon] to restart at any time, enter `rs`> [0] [nodemon] watching: *.*> [0] [nodemon] starting `babel-node src/index.js`> ✔ Scaled 1 instance in bru1 [13s]Open that url, and you should see your playground. Try it to be sure that it’s working:

Самое главное – это линия, указывающая вашу конечную точку в реальном времени:

 [in clipboard]

Откройте этот URL, и вы увидите свою игровую площадку. Попытайтесь, чтобы убедиться, что он работает:

D2UG0F8A2zauoEePjiO-9qkNzyJ48cp88KKL

Чего Вы добились

Вот и все – живой сервер разработки, с очень малым временем и без денег! У вас полная стопка. Но в отличие от стека LAMP этот стек включает сам API. Заметьте, что все, что вам нужно изменить, это было typeDefs и resolvers.

Поймите, что это еще не качество производства:

  • Ваше время очень ограничено, чтобы использовать это без создания постоянной базы данных. Теперь вы можете играть с этим на своем интерфейсе, пока не истечет срок действия вашей Neo4j Sandbox. Это будет 3 дня, но вы можете запросить дополнительные семь. И, конечно, вы всегда можете создать новую песочницу. Если хотите, вы также можете хранить набор мутаций на api/src/seed/seed-mutations.js. Вы можете запустить его с помощью команды npm seedDb всякий раз, когда вы переходите на новую песочницу.
  • Каждый раз, когда вы хотите изменить свою версию сейчас, URL-адрес изменится. Вы можете настроить псевдоним, чтобы ваш код мог обрабатывать это, но это не идеально в долгосрочной перспективе.

Но для MVP и для начальной разработки этого достаточно и бесплатно. Если у вас есть домен, вы можете использовать любую службу хостинга, чтобы настроить запись CNAME, чтобы запустить из него вашу страницу Now.

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

Добавить комментарий

Ваш адрес email не будет опубликован.