-
heroku Client APIを使ってHeroku環境の設定コピーツールを作成する
- 2016年10月31日
- Heroku
- node-heroku-client
- Node.js
- reactjs
この投稿は、筆者のQiitaブログ記事
http://qiita.com/kuniken/items/f14c6d4b5d8acc0daa94
に加筆・修正したものです。
また、アタッチされたアドオンについては「change」ボタンをクリックすることで、アタッチメント元を変更することができます。
コピー出来ない
Herokuはアプリ設定のコピーができない、ということに業務上ストレスを感じることが多々あったので、ツールを作りました。heroku fork
だと細かいチューニングができないのと何がコピーされるのか前もって見れないので画面を作りました。作業時間的には10分の1くらいにはなった気がしています。
作ったものをご紹介
HAM https://hamumai.com/ログイン画面
ログイン自体は前回ご紹介した、heroku OAuthを使ったログイン画面を作るの内容で実装しています。![%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-08-11-9-04-35](https://solutionware.jp/wp-content/uploads/2016/10/1b45d0a5d116f1ab1dfa8e48a6eaa4a0-1024x419.png)
アプリ一覧
ログインすると、アプリ一覧に遷移します。 Organizationごとにアプリが表示されるようになっています。 dashboardボタンからはherokuの各アプリのdashboardに遷移するようになっています。![%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-08-11-10-31-21](https://solutionware.jp/wp-content/uploads/2016/10/9f35d3021f9cbe03c508d3de1759e241-1024x618.png)
コピー
各アプリのコピーボタンからどのような内容でコピーして作成するのかを指定します。 別の組織に作るとか、どのアドオンだけコピーするか、ということも指定できます。 環境変数はアドオン依存のものは設定できないようにしています。 (時間の都合でいろいろ実装機能を絞りました。今後実装予定。)![%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-31-15-20-08](https://solutionware.jp/wp-content/uploads/2016/10/37ca422a5509c052e40de22ccc384076-905x1024.png)
料金プランの変更、アタッチメント元の変更
図のように、各アドオンの料金プランの変更、アタッチメント元の変更を行うこともできます。 業務上、これはいつも使っています。 上の図のように、「change plan」ボタンをクリックすると、料金プランが変更できます。![%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-31-15-23-45](https://solutionware.jp/wp-content/uploads/2016/10/2db0eaf0b4b0b180aa793cbf6a378431-1024x395.png)
![%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-31-15-23-55](https://solutionware.jp/wp-content/uploads/2016/10/e559938e17e91f7b44c02b60854855ec-1024x376.png)
![%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-31-15-29-28](https://solutionware.jp/wp-content/uploads/2016/10/f21f29a8760b0d692c0680c313563fd7-1024x324.png)
![%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-31-15-29-38](https://solutionware.jp/wp-content/uploads/2016/10/1d6f9fe9f5ed439916a761e3b0c7a5bd-1024x353.png)
実装の概要
クライアント:reactjs(react-router、redux、superagent、react-bootstrap) サーバー:nodejs(express) API実装については、以下のモジュールを使用しました。node-heroku-client
herokuはダッシュボード上でポチポチ操作しなくても様々なことがプログラム上から行うことができます。 なぜならAPIが公開されているからです。 Platform API Reference | Heroku Dev Center そんなAPIをnodejs上で簡単に実装できるモジュールも公開されています。 それがnode-heroku-client
です。
node-heroku-client
https://github.com/heroku/node-heroku-client
使い方
インストール
$ npm install heroku-client --save
サンプルソース
機能も少ないので簡単な内容になってしまいますが、以下のように使います。var Heroku = require('heroku-client');
/**
* アプリのリスト取得 'GET /apps'
*/
exports.getAppList = function(req, res, next){
var accesstoken = req.user.accessToken;
var client = new Heroku({ token: accesstoken });//ログインユーザーのアクセストークンを使用してデータを取得する。
client.get('/apps')//getのほかにpostとかpatchとかメソッドが用意されている
.then(function(apps){
var result = [];
apps.map(function(app){
try{
result.push({id: app.id, name: app.name, web_url: app.web_url});
}catch(e){
console.log(e);
}
return null;
})
return res.send(result);
})
.catch(function(err){
return res.status(400).send(err);
});
}
シンプルな内容になっており、使いやすかったです。あとはherokuさんのご機嫌が良ければ。。
Herokuを使ったアプリ構築のご相談を承っております。
月々の保守費用を抑えたい、といったご要望や、WEBアプリ構築のお見積・ご依頼、Herokuについて不明点がおありの場合は、下記よりお気軽にお問い合わせください。ソリューションウェアについて
ソリューションウェアはクラウドアプリケーション構築のエキスパートとしてお客様に最大限のメリットをご提供する基盤を持っています。- 幅広い開発実績(エンタープライズからコンシューマアプリまで)
- 経営・マネジメント、エンドユーザ両方のメリットを意識したITコンサルティング実績
- 大規模パッケージ開発経験者から構成される開発部隊による、抜けや漏れのないシステム実装の実現
- 業務コンサルティングサービス(業務改革、業務改善)
- ITコンサルティングサービス(要求分析、要件定義、プロジェクトマネジメント)
- クラウドSIサービス(AWS、Heroku、SFDCなど)
- クラウド型業務システムの企画・開発
この記事を書いた人 : 國田健史
スタッフブログタグ:
AWS bluebird css CSV docker docker compose electron ES6 es2015 Git Heroku ITコンサルティング JavaScript justinmind less mongoDB Node.js php PostgreSQL Private Space Promise react-router react.js reactjs Salesforce scss Selenium Builder selenium IDE Selenium WebDriver Slack stylus TypeScript VirtualBox VisualStudioCode vue vuejs webpack システム開発プロジェクト ワイヤーフレーム 上流工程 卒FIT 帳票 要件定義 設計 電力小売業界
一覧へ戻る
AWS bluebird css CSV docker docker compose electron ES6 es2015 Git Heroku ITコンサルティング JavaScript justinmind less mongoDB Node.js php PostgreSQL Private Space Promise react-router react.js reactjs Salesforce scss Selenium Builder selenium IDE Selenium WebDriver Slack stylus TypeScript VirtualBox VisualStudioCode vue vuejs webpack システム開発プロジェクト ワイヤーフレーム 上流工程 卒FIT 帳票 要件定義 設計 電力小売業界