LoginSignup
20

More than 5 years have passed since last update.

Dropboxでお手軽にHerokuを使う gitなしでコードを反映させる

Last updated at Posted at 2016-02-15

HerokuとDropboxを接続すると、ローカルファイルを修正するとHeroku上のコードも修正される。逆にHeroku上のファイルが修正されるとローカルファイルも更新される。

gitを使わずに済む。また、プログラマーがgitを使い、デザイナーがDropboxを使うというやり方もできる。

以下は私のブログ記事

【名古屋:雨】そのときの天気情報を付けてツイートする

160205-heroku-iftttコミュニケーション図.png

の抜粋で、特にHerokuとDropboxを接続して使う方法を説明します。

Webサービスをアップロードする

以下のページ・・・

・・・の下の方に、このようなボタンがあるので、押します。

herokubuttunimage.png

すると以下のような画面になります。

herokubutton1.png

「App Name」「Runtime Selection」は何もしなくても良いです。

「Deploy for Free」をクリックします。すると私のつくったNode.jsアプリ「Tenkeet」が自動的にサーバーにインストールされ、必要なすべてのモジュールもインストールされます(5分くらい時間がかかります)。

herokubutton2.png

Webサービスが起動していることを確かめる

この時点でWebサービスは起動しています。試しにWebブラウザでアクセスしてみましょう。

まず「Manage App」をクリックします。

herokubutton3.png

「Settings」をクリックします。

herokubutton4.png

すると下の方に「Heroku Domain」という項目があります。

herokubutton5.png

そこに表示されているものは、サーバーのアドレスっぽいですよね。では、ブラウザのアドレス入力欄にそのアドレスを打ち込んで見てみましょう。

herokubutton6.png

すでにWebサービスが稼働していることがわかります。

WebサービスとDropboxを接続する

しかし、このままではIFTTTでメッセージを受け取れません。

思い出して欲しいのですが、Makerチャンネルに接続したときに「秘密キー」を示されましたよね。この秘密キーを、今アップロードしたWebサービスに埋め込むと、このWebサービスからのメッセージでIFTTTのMakerチャンネルが動くようになります。

そのために、まずWebサービスとDropboxとを接続しましょう。

WebサービスとDropboxを接続する

Herokuの画面の上の方にある「Deploy」をクリックします。

dropbox1.png

「Dropbox」をクリックします。

dropbox2.png

「Connect to Dropbox」をクリックします。

dropbox3.png

「Herokuが・・・アクセスをリクエストしています」と表示されるので、「許可」します。

dropbox4.png

すると「Dropboxのこれこれのフォルダに接続されています」と表示されます。

dropbox5.png

実際に見てみると、フォルダやファイルがダウンロードされています。

dropbox6.png

Webサービスに秘密キーを埋め込む

それでは、秘密キーを埋め込みましょう。先ほどのフォルダの中の「index.js」を適当なエディタで開きます。

key2.png

「IFTTTのセキュリティキー」と書かれた部分に、Makerチャンネルに接続したときにもらった「秘密キー」を貼り付けます。

key1.png

保存して、先ほどのHerokuの画面に戻ります。そこで「Deploy」というボタンを押します。

key3.png

すると変更が反映されます。

key4.png

第2ステップが終わりました。お疲れさまです。あと一息です。


以上が抜粋です。気が向いたら元記事も見てみて下さい。何かの参考になれば幸いです。

【名古屋:雨】そのときの天気情報を付けてツイートする

ブログやってます http://weed.nagoya

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
20