Рубрики
Без рубрики

Как я автоматизирую все скучные части моей работы с созданием app app devops

Джеймс Й Раухут, как я автоматизирую все скучные части моей работы с Create App app Devossimage Creditwhen, у вас есть обязанности как один из единственных дизайнеров – и, возможно, разработчик S- в вашей команде, автоматизация становится вашим лучшим другом. На работе у меня оба обязанности как

Автор оригинала: FreeCodeCamp Community Member.

Джеймс Й Раухут

Когда у вас есть обязанности одним из единственных дизайнеров – и, возможно, разработчик S- в вашей команде, автоматизация становится вашим лучшим другом.

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

К счастью, есть бесплатные инструменты, которые помогают нам прототипу и выпустить в кратчайшие сроки: создайте ract app, bluemix, github и travis ci. Я собираюсь поделиться с вами, как я использую все эти, чтобы автоматизировать все скучные части моей работы с Создать rac app devops Отказ

Существует три способа адаптировать этот процесс самостоятельно:

Проверьте приложение в прямом эфире: https ://create-react-app-devops.mybluemix.net/

Если вы хотите знать кишки проекта, затем продолжите читать, чтобы сделать это со мной! Там будет шесть разделов:

  1. Используйте Create App App, чтобы получить UI UP
  2. Установите свой сервер с узлом, Express и Babel
  3. Запустите приложение в Интернете с Bluemix
  4. Автоматическое развертывание из GitHub с Trvis CI
  5. Получить данные API при сохранении клавиш
  6. Создать постановку приложения для экспериментов

Используйте Create App App, чтобы получить UI UP

Когда я впервые начал использовать реагирование на передние проекты, я потратил много времени. Многое из того времени было настроить WebPack и различные плагины. К счастью, Create App App была создана, чтобы ваши проекты были настроены правильно. Существует возможность «извлекать» ваше создание проектов приложений RACT, но я избегаю выброса. Это так, чтобы я мог продолжать получать обновления Facebook в проект.

  1. Установить узел управлять пакетами, которые мы используем и сервер.
  2. Установить пряжу (Необязательно) Ускорить установку пакетов. Если вы решите не, просто имейте в виду, что терминальные команды, такие как Бег пряжи --- обычно NPM Run --- Отказ
  3. Настало время открыть свой терминал. Установите Create React App глобально: пряжа Global Add Create-React-App
  4. Теперь позвольте создать rac app приложение сделать ваш проект или вы и ориентироваться в него: create-raction-app Я> ; и CD < Имя приложения>

Боковая заметка : В любое время вы видите «<имя приложения>» в этой записи, вы можете заменить его уникальным именем для вашего проекта, такого как «Super-Cool-App».

?????

Теперь вы можете работать со всей клиентской стороной (пользовательский интерфейс) код! Беги Пряжа начать И CREATE APP APP откроет вкладку в вашем браузере, чтобы показать вам UI. В любое время вы редактируете код на стороне клиента в <имя приложения> ;/src/, браузер будет обновляться с изменениями! ?????

Установите свой сервер с узлом, Express и Babel

Теперь давайте запустим сервер, так что вы можете разместить приложение онлайн. Контроль вашего собственного сервера узла также будет важен позже для получения данных с API от таких услуг, как GitHub.

  1. Давайте добавим все пакеты для сервера узла. Пакеты, связанные с Babel, позволит вам использовать последнюю функцию JavaScript: пряжа Добавить бабел-CLI Babel-Preset-ES2015 Babel-Preset-Stage-2 Compresse Express Express
  2. Теперь сделай index.js Файл в корне папки Project для представления нашего сервера узла:
import compression from 'compression';import express from 'express'; const app = express();const port = process.env.PORT || 8080;app.use(compression()); app.use(express.static('./build')); app.listen(port, (err) => { if (err) {   console.log(err);   return; }
 console.log(`Server is live at http://localhost:${port}`);});

3. Теперь вы можете увидеть все зависимости, которые мы установили в Package.json Отказ Давайте добавим сценарий под названием «Bluemix» для запуска сервера и раздела под названием «Babel» для настройки Babel:

"scripts": {  "bluemix": "babel-node index.js",  "start": "react-scripts start",  "build": "react-scripts build",  "test": "react-scripts test --env=jsdom",  "eject": "react-scripts eject",},"babel": {  "presets": [    "es2015",    "stage-2"  ]}

4. пряжа сборка && пряжа bluemix построит приложение и запустите сервер. Тем не менее, мы хотим добавить режим Dev на сервер, аналогичный нашему клиентскому коду. Таким образом, мы видим изменения от просто сохранения index.js когда мы кодируем. Давайте добавим некоторые зависимости, которые даст нам это сделать: пряжа добавьте бабел-часы одновременно --dev

5. Теперь обновите сценарий «Пуск» в Package.json, чтобы мы запустили режим разработки Create Ract App и наш сервер. Мы также добавим строку «прокси». Эта строка говорит создать приложение RACT, на котором сервер может принимать запросы, которые не найдены в корпусе клиента:

"proxy": "http://localhost:8081","scripts": {  "bluemix": "babel-node index.js",  "start": "concurrently \"PORT=8080 react-scripts start\" \"PORT=8081 babel-watch index.js\"",  "build": "react-scripts build",  "test": "react-scripts test --env=jsdom",  "eject": "react-scripts eject",},

?????

Теперь вы можете работать на стороне сервера в index.js ! Беги Пряжа начать И оба режима Create React App Rev и наш сервер будет реагировать на сохраненные изменения! ?????

Запустите приложение в Интернете с Bluemix

Так как я работаю в IBM, Bluemix – наша хостинговая платформа. Не только мы размещаем наши последние продукты на BlueMix, но мы также принимаем какие-либо прототипы, чтобы поделиться со сверстниками и пользовательским тестом. Я также использую Bluemix для личных проектов, таких как это, потому что у него есть прочный свободный уровень.

  1. Создайте бесплатный аккаунт на Bluemix Отказ
  2. Установите Облако литейный CLI Отказ Поскольку Bluemix построен на верхней части проекта с открытым исходным кодом под названием Cloud Foundry, вы увидите «CF» во многих наших командах.
  3. Похоже на .gitignore Файлы, мы должны сделать файл для предотвращения загрузки ненужных файлов в Bluemix. Сделать .cfignore В корневой папке проекта сделать это:
/node_modules .DS_Store npm-debug.log* yarn-debug.log* yarn-error.log*

4. Теперь мы можем сказать Bluemix все настройки нашего приложения для развертывания с Maineest.yml Файл в корне проекта:

---applications:- name:   buildpack: https://github.com/cloudfoundry/nodejs-buildpack  command: npm run bluemix  disk_quota: 256MB  memory: 128MB

5. Наконец, войдите в Bluemix с вашего терминала с помощью CF Login-https://api.ng.bluemix.net Создайте свое приложение с помощью пряжа строит , а затем нажмите свое приложение в мир с CF Push Отказ

?????

Примерно через пять минут ваш терминал должен сказать, что приложение живут в .mybluemix.net! Теперь мир может его увидеть. Общая ошибка состоит в том, что имя вашего приложения уже было сделано на Bluemix. Просто выберите более уникальное имя, и он должен работать! ?????

Автоматическое развертывание из GitHub с Trvis CI

Одна из самых утомительных частей управления приложением развертывает его каждый раз, когда вы будете готовы. Я бы даже ленил и развернул мою развертывание, когда я, наконец, почувствовал, как это делать. Благодаря Travis CI (непрерывную интеграцию), развертывание может стать так же просто, как Управление вашим GitHub Repo Отказ

  1. Во-первых, вам нужно сделать Аккаунт GitHub и настроить Git на вашем компьютере Отказ
  2. Далее создайте новый репо на Github.com А затем следуйте инструкциям терминала, предоставленные для толкания вашего проекта в GitHUB:
git initgit add .git commit -m 'Initial commit'git remote add origin https://github.com/.gitgit push -u origin master

3. Теперь отправляйтесь на Трэвис CI войти с вашими учетными данными GitHub. Нажмите на значок «+», чтобы активировать новое репо. Если вы не видите, что вы только что создали REPO, нажмите «Учетная запись Sync», а затем он должен появиться.

4. Затем нажмите на настройки проекта в TRAVIS, чтобы выбрать следующие параметры:

Построить только если .travis.yml это Построить Ограничить параллельное Построить тягу (это позволит GitHub все еще запустить какие-либо автоматические тесты, которые вы добавляете в будущее для открытия PRS.) Переменные среды: Bluemix_password = RD>

5. Самый большой шаг здесь добавляет план для TRAVIS как .travis.yml Файл в корне проекта:

sudo: truelanguage: node_jsnode_js:- '5.7'cache:  yarn: true  directories:    - node_modulesenv:  global:  - CF_API=https://api.ng.bluemix.net/  - CF_USERNAME=  - CF_ORG=  - CF_SPACE=devbefore_deploy:  - wget https://s3.amazonaws.com/go-cli/releases/v6.12.4/cf-cli_amd64.deb -qO temp.deb && sudo dpkg -i temp.deb  - rm temp.deb  - cf login -a ${CF_API} -u ${CF_USERNAME} -p ${BLUEMIX_PASSWORD} -o ${CF_ORG} -s ${CF_SPACE}  - cf install-plugin autopilot -r CF-Community  - yarn builddeploy:  - edge: true    provider: script    script: if [ "$TRAVIS_PULL_REQUEST" = "false" ]; then cf zero-downtime-push  -f ./manifest.yml; else echo "PR skip deploy"; fi    skip_cleanup: true    on:      branch: master

Важно: .. Обратите внимание, что там два места, где вы вставляете свою электронную почту Bluemix и одно место, где вы вставляете имя приложения на Bluemix!

Здесь многое здесь много. Поэтому я постараюсь обобщить его: в до_deploy Раздел TRAVIS строит приложение, входящую в систему в Bluemix, а затем загружаю плагин Cloud Foundry под названием Autopilot. Затем в разделе «Развертывание» TRUSIS решает, если развертывание является открытым запросом по тяги или фактическим филиалом для ветки GitHub. Если это фактический коммит, запустите автопилот, чтобы развернуть приложение.

Автопилот практикует сине-зеленое развертывание. Это означает, что новая версия вашего приложения будет предоставлена имя -VEN потрясти на Bluemix. Если новая версия сборки и успешно работает, старая версия приложения удалена, и новая версия переименовала себя на исходное имя. Если развертывание f AILS, t; -veryable остается вверх, чтобы вы могли отладить журналы, а старая версия приложения продолжает работать, поэтому ваши пользователи видят нулевые простоя!

?????

Дуп дежопт, Бэтмен! Перейдите к https://travis-ci.org// . E>/строит, и вы должны увидеть сборку TRAVIS. Если вы нажимаете в него, вы можете посмотреть его начать и следовать за ним развертывание для вас! ?????

Получить данные API при сохранении клавиш

Большинство приложений используют данные из разных источников, чтобы собрать их офферринг. Для приложения для получения внешних данных они используют API для получения данных. Для API, чтобы убедиться, что правильное приложение для получения данных, приложение дает ключ для идентификации самого. Нам нужно держать этот ключ в секрете от нашего репо GitHub, хотя!

  1. Во-первых, давайте попросим Github API для ключа Отказ Под «выбором областей» мы проверим public_repo Чтобы получить информацию о вашей репо. Нажмите «Generate Token», а затем вы получите ключ рядом с зеленой галочкой!
  2. Настало время добавить ключ к нашему проекту локально, как Keys.json В корне нашего проекта:
{  "github": ""}

Однако мы не хотим, чтобы ваш драгоценный ключ был загружен на ваш репо GitHub. Итак, добавьте этот файл в свой .gitignore файл:

# misc.DS_Store.envnpm-debug.log*yarn-debug.log*yarn-error.log*keys.json

3. Теперь, когда у нас есть ключ, мы можем добавить запрос на сервер. Установите запрос на ваш проект с помощью пряжа Добавить запрос а затем отредактируйте свой сервер index.js :

import compression from 'compression';import express from 'express';import fs from 'fs';import request from 'request';
const app = express();const port = process.env.PORT || 8080;app.use(compression());
let keys;if (fs.existsSync('./keys.json')) {  keys = require('./keys.json');} else {  keys = JSON.parse(process.env.VCAP_SERVICES)['user-provided'][0].credentials;}
app.get('/github', (req, res) => {  request({    url: `https://api.github.com/user/repos?affiliation=owner,collaborator&access_token=${keys.github}`,    headers: {      'user-agent': 'node.js',    },  }, (err, response, body) => {    if (!err && response.statusCode === 200) {      res.send(body);    }  });});
app.use(express.static('./build'));
app.listen(port, (err) => {  if (err) {    console.log(err);    return;  }  console.log(`Server is live at http://localhost:${port}`);});

Вы сначала заметите, если выясните заявление, если у нас есть местный Keys.json файл. «Else» в этом заявлении будет охватывать, когда приложение на Bluemix позже. У нас есть конечная точка, где пинггинг http://localhost: 8080/github вернет репос вашего профиля!

4. Откройте SRC/App.js Чтобы получить эти данные на ваш UI с вашего сервера. После этих дополнений Пряжа начать Следует показать все репо, перечисленные в ваш проект:

import React, { Component } from 'react';import logo from './logo.svg';import './App.css';
class App extends Component {
  state = {    repos: [],  }
  componentDidMount() {    fetch('/github')    .then(response => response.json())    .then((data) => {      const repos = data.map((repo) =>        
{repo.name}
      );
      this.setState({ repos })    });  }
render() {    return (      
        
          logo          
Welcome to React
        
        
          To get started, edit src/App.js and save to reload.        
        
App Creator's Repos:
        {this.state.repos}      
    );  }}
export default App;

5. Теперь, когда мы можем надежно использовать API GitHub API в режиме Dev, давайте убедитесь, что ваше приложение Bluemix также может получить ключ API. Мы собираемся создать предоставленную пользователем услуги на Bluemix в терминале: CF Cups Keys -P Keys.json Отказ Тогда скажи манифест .json что приложение всегда должно связываться с этим услугой:

---applications:- name:   buildpack: https://github.com/cloudfoundry/nodejs-buildpack  command: npm run bluemix  disk_quota: 256MB  memory: 128MB  services:     - keys

Набок Примечание. Если вам когда-нибудь нужно обновить клавиши на Bluemix, вы можете запустить CF UUPS Keys -p keys.json !

?????

После того, как TRUMIS обновляет ваше приложение BlueMix, вы должны увидеть, как UI Precteing все ваши REPOS живут в Интернете! Мы прошли много неприятностей, сохраняя ключи от github.com. Это потому, что другие разработки могут злоупотреблять вашими ключами API, если они получат много из них. ?????

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

Теперь, когда наша производственная версия приложения DEVOPS установлена, давайте построим приложение для постановки. Это поможет нам поделиться Works-прогрессом для тестирования пользователей и экспертной экспертизы!

  1. Нам нужно сделать файл манифеста для Bluemix, который указывает наше новое постановка приложения. В корне вашего проекта сделайте Манифест - постановка .yml файл:
---applications:- name: -staging  buildpack: https://github.com/cloudfoundry/nodejs-buildpack  command: npm run bluemix  disk_quota: 256MB  memory: 128MB  services:     - keys

2. Продолжай и разверните это приложение для постановки непосредственно в Bluemix с новым файлом манифеста: CF Push -f Манифест.

3. Тогда мы собираемся редактировать сценарии развертывания в .travis.yml Отказ Нам нужно изменить оригинальный сценарий развертывания для при этом, когда мы придерживаемся мастера, чтобы обновить новое постановка приложения. Нам также необходимо добавить новый сценарий развертывания для оригинального производственного приложения:

deploy:  - edge: true    provider: script    script: if [ "$TRAVIS_PULL_REQUEST" = "false" ]; then cf zero-downtime-push -staging -f ./manifest-staging.yml; else echo "PR skip deploy"; fi    skip_cleanup: true    on:      branch: master  - edge: true    provider: script    script: if [ "$TRAVIS_PULL_REQUEST" = "false" ]; then cf zero-downtime-push  -f ./manifest.yml; else echo "PR skip deploy"; fi    skip_cleanup: true    on:      tags: true

Итак, теперь, когда мы обновляем приложение постановки, совершив на ветку GitHub Master, как мы обновляем производственное приложение? Вы будете использовать Функциональность выпуска Github Как будто ваше приложение является настоящим оплотом. ?

4. Продолжай и нажмите последние изменения в GitHub! Затем перейдите к «релизу» на REPO GitHUB и создайте новый выпуск.

?????

На основании последнего шага вы должны увидеть два строя в очереди на Trvis CI. Одним из них будет обновление постановки приложения из-за последней коммиты. Другой будет ваша продукция обновления приложения из-за нового выпуска! ?????

Финальная, самая важная ценность дежопа

Я хочу закончить эту запись, подчеркивая самую важную часть DevOps: автоматизированное тестирование Отказ Всякий раз, когда TRAVIS работает, в том числе в открытых запросах потягивания, это проведет, что команда Тест пряжи проходит перед принять меры. Создать App App уже имеет Тест пряжи настроен с Jest Отказ Тем не менее, вы можете добавить доступность, линтацию и любую другую структуру тестирования, с которыми вы знакомы!

Чтобы повторить, что мы сделали: Во-первых, мы быстро получили наш проект React Constate Branded, благодаря созданию приложения RACT. Затем мы построили простой сервер. Мы подтолкнули приложение в мир. Затем мы получили TRAVIS, развернув приложение (с нулевым простоя) для любых наших изменений. Затем мы использовали API Github, сохраняя наш ключ от общественных глаз. Наконец, мы также устанавливаем постановку приложения, чтобы мы могли проверить предварительный выпуск.

Я надеюсь, что этот проект помог сделать ваш рабочий процесс проще, когда вы делаете Epic Web Apps! Большой ? идет вкладчиками B Авель, C Приложение Reate React, Е Xpress, N Ода, и все остальные использованные пакеты. Кроме того, все ❤️️ идет в BlueMix, Github и Travis CI для своих свободных ярусов.

Пожалуйста, поделитесь в комментариях или Чирикать мне Если это помогло тебе! Я также хотел бы услышать разные рабочие процессы!

Вы также можете связаться со мной, оставив комментарий, по электронной почте мне или Tweeting на @seejamescode Отказ Я работаю в ATX для IBM Design, и всегда люблю разговоры с сообществом веб-дизайна.

Вам также может понравиться…

Как пролить свой прогрессивный веб-приложение Google Mayhouse до 100 Если есть одно сообщение, что команда Chrome Dev хочет водить домой к разработчикам, именно это: производительность. medium.freecodeCamp.com.

Проверьте Создать rac rac app devops на github

Читайте ещё по теме: