Получите быстрое начало на IBM Cloud с Vuejs, Feathersjs и graphql

Томас Рейнке

Вы ищете быстрое начало игры с облаком IBMS? Как насчет взять эту возможность и сочетать его с некоторыми из последних и самых лучших технологий для веб-Vuejs, Feathersjs и graphql? Ну тогда это обязательно прочитано для вас, чтобы снять менее чем за час.

Что мы будем делать:

Обзор приложения
Создайте свежий репозиторий Git на Github
инициализировать приложение внешнего интерфейса, основанного на Вью CLI
инициализировать приложение бэкэнда, основанное на FeathersJS CLI
Добавьте возможности GraphQL на бэкэнду
Проверьте API GraphQL и опубликовать/подписаться
Добавьте зависимости к существующему приложению Frontend
Создайте простой спа, который вызывает бэкэнд GraphQL
Развертывание до облака IBM

Обзор приложения

Создайте свежий репозиторий на GitHub

Если вы еще не имеете учетной записи GitHub, перейдите github.com и создать его. Создайте себе новый репозиторий под названием «VueAndIBMsCloud» (или любое имя вы хотите). Предполагая, что вы хорошо можете использовать консоль, используйте следующий код для создания первого управления проектами:

mkdir VueAndIBMsCloud
cd VueAndIBMsCloud
echo "# VueAndIBMsCloud" >> README.md
git init
git add README.md
git commit -m "first commit"
git remote add origin https://github.com//VueAndIBMsCloud.git
git push -u origin master

Инициализируйте приложение Frontend на основе Vue CLI

Если вам нужно больше деталей для установки Vue CLI, проработайте эту статью и вернемся.

Установка – Vue.js Vue.js – прогрессивный JavaScript Framework vuejs.org

Используйте VUE-CLI для инициализации прогрессивного веб-приложения (PWA) – проекта «Frontend»:

npm install -g vue-cli
vue init pwa frontend

? Project name frontend
? Project short name: fewer than 12 characters to not be truncated on homescreens (default: same as name)
? Project description A Vue.js project
? Author thomasreinecke 
? Vue build runtime
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? No

Теперь скомпилируйте проект и запустите его в первый раз (вместо «NPM», я рекомендую использовать «пряжу»):

cd frontend
yarn
yarn dev

Ваше приложение Frontend работает на http://localhost: 8080

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

приложение бэкенд Initialize на основе feathersJS CLI

Использование CLI FeathersJS для инициализации проекта серверной. Если вам нужна более подробная информация о Feelejs CLI, используйте следующую ссылку и вернитесь:

footersjs/cli CLI – интерфейс командной строки для приложений перьев лесов github.com

npm install -g @feathersjs/cli
mkdir backend
cd backend
feathers generate app

? Project name backend
? Description
? What folder should the source files live in? src
? Which package manager are you using (has to be installed globally)? Yarn
? What type of API are you making? REST, Realtime via Socket.io

yarn start

Ваше Бэкенд работает на HTTP://локальный: 3030/

Добавьте возможности GraphQL на бэкэнду

Откройте визуальный студийный код (или ваш предпочитаемый IDE)> Открыть …> Укажите его на F Старые Vuandibms Облако.

Откройте Backend/SRC/index.html и замените, что там в следующий код:

/* eslint-disable no-console */
const logger = require('winston');
const app = require('./app');
const port = app.get('port');

const createSubscriptionServer = app.get('createSubscriptionServer');

// create subscription server and associate it to the server
const server = app.listen(port, () => createSubscriptionServer(server));

process.on('unhandledRejection', (reason, p) =>
  logger.error('Unhandled Rejection at: Promise ', p, reason)
);

server.on('listening', () =>
  logger.info('Feathers application started on http://%s:%d',  
  app.get('host'), port)
);

В бэкенд/package.json Добавьте следующие дополнительные зависимости для GraphQL:

"express-session": "1.15.6",
"graphql": "0.12.3",
"graphql-subscriptions": "0.5.6",
"graphql-tools": "2.18.0",
"subscriptions-transport-ws": "0.9.5",
"apollo-server-express": "1.3.2",

Беги ” пряжа” В командной строке, чтобы вытащить дополнительные библиотеки в ваш проект Backend. Теперь мы готовы создать сервис GraphQL с помощью более нескольких помощи перьев CLI:

feathers generate service

? What kind of service is it? A custom service
? What is the name of the service? graphql
? Which path should the service be registered on? /graphql

Вы будете реализовать новый каталог: УСЛУГИ/GRAPHQL.

Мы собираемся создать сервис GraphQl немного иначе, чем шаблон сервиса Fearjs. Идите вперед и удалите graphql.hooks.js и graphql.class.js.

rm services/graphql/graphql.hooks.js
rm services/graphql/graphql.class.js

Обновление Услуги/graphql/graphql.service.js со следующим кодом:

const { graphqlExpress, graphiqlExpress } = require('apollo-server-express');
const { execute, subscribe } = require('graphql');
const { SubscriptionServer } = require('subscriptions-transport-ws');
const { makeExecutableSchema } = require('graphql-tools');
const TypeDefinitions = require('./graphql.typeDefs');
const Resolvers = require('./graphql.resolvers');

module.exports = function () {
  const app = this;
  const port = app.get('port');
  const schema = makeExecutableSchema({
    typeDefs: TypeDefinitions,
    resolvers: Resolvers.call(app)
  });
    
  // provide endpoint to graphql for the apollo graphql client lib
  app.use('/graphql', graphqlExpress((req) => {
    return {
      schema,
      context: {}
    };
  }));
    
  // provide endpoint to graphiql : the API explorer module
  app.use('/graphiql', graphiqlExpress({
    endpointURL: '/graphql',
    subscriptionsEndpoint: `ws://localhost:${port}/subscriptions`
  }));
    
  // define the API server here
  app.set('createSubscriptionServer', function
    createSubscriptionServer(server) {
    return new SubscriptionServer({
      execute, subscribe, schema,
      onConnect: () => { console.log('Client Connected'); },
      onDisconnect: () => { console.log('Client Disconnected'); }
    },
    {
      server, path: '/subscriptions',
    });
  });
};

Теперь создайте GraphQL Typedef и Resolvers: создайте два новых файла под Услуги/Graphql. : graphql.typedefs.js. и graphql.resolvers.js и добавить следующий код:

graphql.resolvers.js

const { PubSub } = require('graphql-subscriptions');
const pubsub = new PubSub();
const ITEM_ADDED = 'ITEM_ADDED';

module.exports = function () {
  return {
    Query: {
      Welcome (root, { id }, context) {
        return 'Welcome to VueAndIBMsCLoud example';
      },
      Items (root, { id }, context) {
        return [
          {
            id: 1,
            title: 'Item 1',
            status: 'open',
            created_at: new Date()
          },
          {
            id: 2,
            title: 'Item 2',
            status: 'closed',
            created_at: new Date()
          }
        ];
      }
    },
    Mutation: {
      addItem(root, { id, title, status }, context) {
        const item = {
          id,
          title,
          status,
          created_at: new Date()
        };
        pubsub.publish(ITEM_ADDED, { itemAdded: item });
        return item;
      },
    },
    Subscription: {
      itemAdded: {
        subscribe: () => pubsub.asyncIterator(ITEM_ADDED),
      }
    }
  };
};

graphql.typedefs.js.

const typeDefinitions = `
  type Item {
    id: ID!
    title: String
    status: String
    created_at: String
  }

  type Query {
    Welcome: String,
    Items: [Item]
  }

  type Mutation {
    addItem(id: ID!, title: String!, status: String): Item
  }

  type Subscription {
    itemAdded: Item
  }

  schema {
    query: Query
    mutation: Mutation
    subscription: Subscription
  }
`;

module.exports = typeDefinitions;

Почти готово. Давайте добавим сценарий запуска на package.json в раздел «скриптов»:

"dev": "NODE_ENV=development node src/",

И теперь запустите «пряжа Dev». Вы должны увидеть сообщение, как: информация: приложение Перья началось HTTP://локальный: 3030

Проверьте API GraphQL и опубликовать/подписаться

Попробуйте graphiql как модуль API Explorer http://localhost: 3030/Graphiq и запустить первый тест, как это:

Поздравляем, вы включали API GraphQL в свой проект!

Теперь давайте тестируем некоторые более сложные данные для получения:

И теперь давайте проверим подписку. Откройте GraphiQL в окне 2-го браузера и настройте подписку, как это, и нажмите кнопку «PLAY»:

Теперь вернемся к первому окну graphiql браузера введите следующую мутацию, которая позволяет добавить элемент к элементам массива. Так как мы установки публикации/подписки, мы ожидаем, чтобы подтолкнуть изменения в массив Items для всех абонентов:

Поместите оба окна браузера рядом друг с другом, и нажмите «PLAY» на первом окне. Вы поймете, что Backeng Server собирается нажать на изменение данных в ваше окно 2-го Graphiql:

Как это круто? Congrats, вы также настройки публикации/подписки на основе graphiql на вашем проекте.

Добавьте зависимости к приложению Frontend

В Frontend/Package.json Добавьте следующие дополнительные зависимости, чтобы включить GraphQL, APOLLOJS и поддержку подписки (через WebSockets):

"dependencies": {
  "apollo-cache-inmemory": "1.1.5",
  "apollo-client": "2.2.0",
  "apollo-link": "1.0.7",
  "apollo-link-http": "1.3.2",
  "apollo-link-ws": "1.0.4",
  "apollo-utilities": "1.0.4",
  "graphql": "0.12.3",
  "graphql-tag": "2.6.1",
  "subscriptions-transport-ws": "0.9.5",
  "vue": "^2.5.2",
  "vue-apollo": "3.0.0-alpha.3",
  "vue-router": "^3.0.1"
}

Беги ” пряжа” натянуть зависимости в вашем внешнем интерфейсе проекта.

cd frontend
yarn

Редактировать интерфейс/main.js и заменить код следующим:

import Vue from 'vue'
import App from './App'
import router from './router'

import { ApolloClient } from 'apollo-client'
import { HttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'
import { split } from 'apollo-link'
import { WebSocketLink } from 'apollo-link-ws'
import { getMainDefinition } from 'apollo-utilities'

import VueApollo from 'vue-apollo'

// add unified ressource identifiers for Dev and Prod (IBM Cloud)
const uris = {
  dev: 'localhost:3030',
  prod: 'VueAndIBMsCloud.mybluemix.net'
}

// setup httpLink depending on environment
const httpLink = new HttpLink({
  uri: (window.location.hostname === 'localhost') ? `http://${uris.dev}/graphql` : `https://${uris.prod}/graphql`
  })

// setup web socket link depending on environment
const wsLink = new WebSocketLink({
  uri: (window.location.hostname === 'localhost') ? `ws://${uris.dev}/subscriptions` : `wss://${uris.prod}/subscriptions`,
  options: {
    reconnect: true
  }
})

const link = split(
  ({ query }) => {
    const { kind, operation } = getMainDefinition(query)
    return kind === 'OperationDefinition' && operation === 'subscription'
  },
  wsLink,
  httpLink
)

// define the apolloClient
const apolloClient = new ApolloClient({
  link,
  cache: new InMemoryCache(),
  connectToDevTools: true
})

Vue.use(VueApollo)

const apolloProvider = new VueApollo({
  defaultClient: apolloClient
})

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  apolloProvider,
  router,
  render: h => h(App)
})

Это подготовит ваше приложение Frontend для использования ApollocLient в качестве библиотеки для предоставления запроса GraphQL, мутации и поддержки подписки. На УРИС объект, заменить Vueandibmscloud.mybluemix.net с продуктивной целью развертывания приложения бэкэнда.

Добавить Ui, вызывая Backend GraphQL

В ваших источниках внешнего интерфейса, откройте SRC/App.vue и заменить его следующим кодом:

Сохранить и запустить пряжа dev чтобы начать это. Теперь вы должны увидеть новую целевую страницу вашего внешнего интерфейса приложения (который еще не выглядеть супер интересно, но это первый раз, когда мы видим данные с graphQL бэкэндом в вашем веб-интерфейсе – это не круто?)

Теперь, как у нас есть наша интеграция E2E между нашим бордом Frestend и GraphQl, давайте нажимаем на облако IBMS и запустить его там.

Подготовка IBM Cloud для развертывания

Настройка BlueMix CLI на вашем рабочем столе: https://console.bluemix.net/docs/cli/reference/bluemix_cli/get_started.html#getting-started
Войдите в облако IBM: BX. авторизоваться
Установите контекст цели и пространства в области IBMS интерактивно (перейдите в https://console.bluemix.net/dashboard/apps/ для проверки ваших вариантов): BX Target – CF

Теперь вы должны увидеть это:

API endpoint:      ()
Region:           
User:             
Account:          
Resource group:   default
Org:              
Space:

Теперь вы установите масштаб развертывания для двух приложений.

Развертывание бэкэнда к Bluemix

На проекте Backend создайте новый файл MaineseSt.yml и введите в него следующее содержимое:

applications:
  - path: .
    memory: 1024M
    instances: 1
    domain: eu-de.mybluemix.net
    name: vueAndIbmsCloud-api
    host: vueAndIbmsCloud-api
    disk_quota: 1024M

Добавьте следующий Deploy скрипт для package.json в разделе «скрипты»:

"deploy": "bx cf push vueAndIbmsCloud-api"

(Вы должны изменить это имя приложения, чтобы сделать его уникальным, например, добавить какой-то индекс вашего выбора на Mainest.yml и package.json.)

Установить BlueMix CLI

https://console.bluemix.net/docs/cli/index.html https://developer.ibm.com/courses/labs/1-install-bluemix-command-line-interface-cli-dwc020/

Беги Пряжа развертывает И это будет развернуть ваше приложение Backend к Облаку IBM.

Развертывание интерфейса к Bluemix

Мы используем приложение внешнего интерфейса на основе сервера Nginx, который обеспечивает более высокую производительность (в ResponseTime и пропускной способности), чем сервер узла.

В зависимости от того, какое имя вы выбрали в качестве цели развертывания серверной, давайте удостоверимся, что это правильно отражено в интерфейс/SRC/main.js Отказ В УРИС Объект, замените ‘vueandibmscloud-api.eu-de.mybluemix.net’ с URL-адресом, где находится ваш бэкэндский сервер. Вы можете проверить URL в Console BlueMix> Нажмите в свое приложение> Просмотреть URL-адрес приложения.

На корневой папке приложения Frontend создайте Mainesest.yml и включите следующее содержимое:

applications:
  - path: .
    memory: 1024M
    instances: 1
    domain: mybluemix.net
    name: vueAndIbmsCloud
    host: vueAndIbmsCloud
    disk_quota: 1024M
    buildpack: staticfile_buildpack