LoginSignup

This article is a Private article. Only a writer and users who know the URL can access it.
Please change open range to public in publish setting if you want to share this article with other users.

More than 5 years have passed since last update.

@sikkim(Taro TAKAHASHI)

オープンソースの営業支援システム「FreeSFA」をHeroku上で動かす手順

Last updated at Posted at 2018-11-05

はじめに

自社用に開発した営業支援システム「FreeSFA」を、この度オープンソースとして公開しました。
営業支援システム(SFA : Sales Force Automation)とは営業職の生産性を上げ、効率化を目指すシステムのことです。

ランディングページ
https://free-sfa.tk/

ソースコード
https://github.com/sikkimtemi/FreeSFA

開発経緯
https://qiita.com/sikkim/private/d65775425ea4a5b8e562

image.png

FreeSFAは外回りを行う営業メンバーのためにつくりました。弊社の営業職にヒアリングした結果をもとに、様々な営業活動の中でも特に訪問と架電を効率化することを目標にして設計しています。

この記事ではHerokuとGCPを使ってFreeSFAの動作環境を構築する手順を説明します。
手順にしたがって作業すれば、下記のデモサイトと同様のWEBアプリを自分専用に構築することができます。

デモサイト
https://free-sfa-demo.herokuapp.com/

HerokuとGCPには無料枠があるので、規模によっては無料で営業支援システムを運用することも可能です。

なお、この記事の内容やFreeSFAの使用により問題が起こったとしても、保証はいたしませんので、予めご了承ください。

前提

FreeSFAはPython3とDjango2.0で開発されています。
これらの知識がなくてもFreeSFAを動かすことは可能ですが、カスタマイズをしたい場合はプログラミングする必要があります。
今のところ弊社ではFreeSFAのカスタマイズやサポートは行っておりません。

準備するもの

  • Herokuアカウント
  • Googleアカウント
  • 適当なメールアカウント
  • Gitを実行できる環境
  • Heroku CLI
  • Google Cloud Platformアカウント（要クレジットカード）

上から3つまでは必須です。
Googleアカウントとメールアカウントの取得方法は省略します。
メールはGmailでも問題ありません。

FreeSFAを動かすだけならGitの実行環境とHeroku CLIは不要です。
カスタマイズをしたい場合やプログラミングの勉強をしたい場合は準備してください。

Google Cloud Platform（GCP）のアカウントはソーシャルログインと地図の表示、および住所から緯度経度を取得するのに利用します。GCPのアカウントがなくても一応FreeSFAを動かすことは可能ですが、「近くの顧客を探す」という目玉機能が利用できなくなるので、ぜひGCPのアカウントもご用意ください。

Herokuアカウントの準備

HerokuはPaaS（Platform as a Service)の一種で、様々なWebアプリケーションを比較的簡単にクラウド上で動かすことができます。
無料枠が充実しているので、小規模なアプリケーションなら無料で運用することも可能です。
アカウントがない場合は以下のURLにアクセスして新規登録してください。

以前はクレジットカードの登録が必要でしたが、現在はクレジットカードなしでもアカウントを作れるようです。

アカウントを作成してログインすると下図のような画面になるはずです。

image.png

ここまでできたら、以下の選択肢の中からご自分にあったものを選んでください。

  • カスタマイズしなくていいので、とにかくFreeSFAを急いで動かしたい。
  • 時間をかけてソースコードのカスタマイズやプログラミングの勉強をしたい。

急いで動かしたい場合は途中をスキップして「Herokuボタンによるデプロイ」まで進んでください。
カスタマイズや勉強をしたい場合は、このまま「Gitを実行できる環境の準備」へ進んでください。

Gitを実行できる環境の準備

Windowsの場合は下記のリンクから「Git for Windows」か「Sourcetree」をダウンロードしてインストールしてください。
gitコマンドが使えれば別の方法でも構いません。

Macの場合はHomebrewで入れるのがおすすめです。
下記の記事を参考にしてみてください。
Mac版のSourcetreeでもOKです。

Linuxは最初からgitコマンドが使えるはずです。
もし入っていなかったらapt-getやyumでインストールしてください。

コマンドラインやターミナルで下記のように入力し、バージョンが表示されていればOKです。
バージョンが少々違っても問題ありません。

$ git --version
git version 2.17.2 (Apple Git-113)

Heroku CLIの準備

下記のURLを参考にしてHeroku CLIをインストールしてください。

コマンドプロンプトやターミナルから下記のように入力して、バージョンが表示されていればOKです。
バージョンが少々違っても問題ありません。

$ heroku --version
heroku/7.18.3 darwin-x64 node-v10.12.0

FreeSFAをHerokuへデプロイする

GitHubからソースコードを取得

作業用のフォルダを準備して、コマンドプロンプトやターミナルを開き、cdコマンドで作業用のフォルダへ移動してください。
作業用フォルダに入ったら、以下のコマンドを入力してください。

$ git clone https://github.com/sikkimtemi/FreeSFA.git
$ cd FreeSFA

中身はこんな構造になっています。
とりあえず動かすだけならあまり気にする必要はありません。

FreeSFA
├── IISE
├── register
│   ├── migrations
│   ├── static
│   │   └── register
│   │       ├── css
│   │       ├── img
│   │       ├── js
│   │       └── vendors
│   │           ├── @coreui
│   │           │   ├── coreui
│   │           │   │   └── js
│   │           │   ├── coreui-plugin-chartjs-custom-tooltips
│   │           │   │   └── js
│   │           │   └── icons
│   │           │       ├── css
│   │           │       └── fonts
│   │           ├── bootstrap
│   │           │   └── js
│   │           ├── chart.js
│   │           │   └── js
│   │           ├── flag-icon-css
│   │           │   ├── css
│   │           │   └── flags
│   │           │       ├── 1x1
│   │           │       └── 4x3
│   │           ├── font-awesome
│   │           │   ├── css
│   │           │   └── fonts
│   │           ├── jquery
│   │           │   └── js
│   │           ├── pace-progress
│   │           │   ├── css
│   │           │   └── js
│   │           ├── perfect-scrollbar
│   │           │   └── js
│   │           ├── popper.js
│   │           │   └── js
│   │           └── simple-line-icons
│   │               ├── css
│   │               └── fonts
│   └── templates
│       └── register
│           └── mail_template
│               ├── create
│               ├── invite
│               ├── join_workspace
│               └── reset
├── sfa
│   ├── migrations
│   ├── static
│   │   └── sfa
│   │       ├── css
│   │       ├── csv
│   │       ├── img
│   │       └── js
│   ├── templates
│   │   └── sfa
│   ├── templatetags
│   └── tests
└── socials
    └── migrations

Heroku CLIでHerokuにログイン

以下のコマンドを入力し、Herokuのアカウント（メールアドレス）とパスワードを用いてログインしてください。

$ heroku login

Herokuアプリの作成

アプリケーション名を適当に決めてから、以下のコマンドを入力してください。
このコマンドはFreeSFAフォルダの中で実行する必要があるので注意してください。

$ heroku create アプリケーション名

Herokuのダッシュボードを開くとHerokuアプリができていることを確認できます。
アプリケーション名はheroku createコマンドで入力した名前になっているはずです。

image.png

環境変数の設定

作ったばかりのアプリケーションはまだ空っぽの状態です。
ここにFreeSFAのソースをアップロードして、動くようにする必要があります。
ただし事前にいくつかの値を環境変数に設定しておく必要があります。

環境変数 説明
SECRET_KEY Django内部で使用する秘密鍵です。十分長い値を設定しましょう。WEB上でキーを生成してくれるサービスもあります。 https://djecrety.ir/
SOCIAL_AUTH_GOOGLE_OAUTH2_KEY Googleのソーシャル認証で用います。取得方法は後述します。
SOCIAL_AUTH_GOOGLE_OAUTH2_SECRET Googleのソーシャル認証で用います。取得方法は後述します。
GOOGLE_RECAPTCHA_SITE_KEY 「私はロボットではありません」を表示して、アカウント追加を制限するためのキーです。取得方法は後述します。
GOOGLE_RECAPTCHA_SECRET_KEY 「私はロボットではありません」を表示して、アカウント追加を制限するための秘密鍵です。取得方法は後述します。
EMAIL_HOST メール(SMTP)サーバーのホスト名を設定します。 Gmailを使う場合はsmtp.gmail.comを設定してください。
EMAIL_PORT メールサーバーのポート番号を設定します。通常は25か465です。Gmailを使う場合は465を設定してください。
EMAIL_HOST_USER メールサーバーのユーザーIDを設定します。
EMAIL_HOST_PASSWORD メールサーバーのパスワードを設定します。
EMAIL_USE_SSL メールサーバーでSSLを使用するかどうかを設定します。TrueもしくはFalseを入力してください。Gmailを使う場合はTrueを設定してください。

メールサーバーにGmailを利用する場合は、下記URLを参考に「安全性の低いアプリからのアカウントへのアクセスを許可」も実施しておいてください。

環境変数はheroku config:addコマンドで設定することができます。
例えばSECRET_KEYに94*dg1^h)qdl$h#dyd4&-4v5x6()5(4c(#bi+7$p=cnry2)ul+という値を設定したい場合は次のように入力します。

$ heroku config:add SECRET_KEY="94*dg1^h)qdl$h#dyd4&-4v5x6()5(4c(#bi+7$p=cnry2)ul+"

SECRET_KEYは文字通り秘密にする必要があるので、この例をそのままコピペで実行しないようご注意ください。
下記のように秘密鍵をWEB上で生成してくれるサービスも存在します。

上の表にある環境変数はすべて設定してください。
Google関連の値の取得方法は後述しますので、とりあえず空文字「""」を設定しておいてください。

環境変数はHerokuのページからでも設定することができます。
image.png

Reveal Config Varsをクリックすると画面が下図のように変わり、環境変数の追加・編集・削除ができるようになります。
image.png

Herokuへデプロイする

環境変数を設定したらいったんデプロイしてみましょう。
デプロイは以下のコマンドで行います。

$ git push heroku master

いろいろとログが出力されますが、最後が以下のような感じで終わっていればOKです。
通常は１分以内に終わるはずです。

remote: -----> Compressing...
remote:        Done: 73.6M
remote: -----> Launching...
remote:        Released v18
remote:        https://free-sfa-demo.herokuapp.com/ deployed to Heroku
remote: 
remote: Verifying deploy... done.
To https://git.heroku.com/free-sfa-demo.git
 * [new branch]      master -> master

マイグレート

デプロイは終わりましたが、まだデータベースの準備ができていません。
データベースを使えるようにする作業をマイグレートといいます。
以下のコマンドを実行してください。

$ heroku run python manage.py migrate

エラーが出ていなければOKです。

Herokuボタンによるデプロイ

実はここまでの作業は下のHerokuボタンを押すだけでできます。

Deploy

ボタンを押すと下図のような画面が表示されます。
アプリ名を入力して「Deploy app」をクリックすると自動でマイグレートまで実施されます。完了するまで数分かかります。
環境変数も自動で作られますが、SECRET_KEY以外の値はすべてダミーの値になっているので、正しい値に設定し直す必要があります。
「環境変数の設定」に示した表と、後述する取得方法を参考にして、ダミーの値を置き換えてください。

image.png

管理用アカウントの登録

FreeSFAはDjangoというフレームワークを使って作られていますが、Djangoには標準で管理機能が用意されています。
この管理機能を使うためのアカウントをまず登録します。
Heroku CLIをインストールしている場合は以下のコマンドを実行し、画面の指示に従ってメールアドレスとパスワードを登録してください。

$ heroku run python manage.py createsuperuser

Heroku CLIをインストールしていない場合はHerokuのダッシュボードで右上の「more」をクリックし「Run console」を選択してください。

image.png

下図のようなコンソールが開くので、python manage.py createsuperuserと入力して「Run」をクリックしてください。

image.png

動作確認

ここまでできたら以下のコマンドを実行してみてください。
Heroku CLIをインストールしていない場合はHerokuダッシュボード右上の「Open app」ボタンを押してください。

$ heroku open

問題なく実行できていれば自動的にブラウザが起動し、下図のような画面が表示されるはずです。
もしエラーになったらここまでの手順でどこか間違えているはずですので、再度確認してみましょう。

image.png

先ほど登録した管理用アカウントでログインしてみてください。

image.png

「管理サイト」をクリックするとDjangoの管理サイトが表示されます。

image.png

FreeSFAの運用で管理サイトを使うことはあまりありませんが、間違って消してしまった顧客情報を復活させたい場合やレコードの物理削除をしたい場合などは役に立つかもしれません。

Google Cloud Platformアカウントの準備

Google Cloud Platform(GCP)はGoogleが提供するクラウドコンピューティングのサービス群の総称です。
GCPは有料サービスのため、アカウントを取得するにはクレジットカードの登録が必要です。
GCPのアカウントを取得するには下記のURLにアクセスし、Googleアカウントでログインします。

下図のような画面が表示されたら利用規約に同意して「承諾」をクリックします。

image.png

次の画面の上部に以下のように表示されたら「ACTIVATE」をクリックしてください。

image.png

すると次のような画面になるので、必要事項を入力して進んでください。

image.png

ステップ2で住所とクレジットカードを登録すればGCPアカウントの準備は完了です。

環境変数に設定する値の取得方法

reCAPTCHA

「私はロボットではありません」をチェックさせるアレです。最近バージョン3が出てチェックすら不要になりましたが、FreeSFAはまだ対応していないのでバージョン2のAPIキーを取得してください。

reCAPTCHAはGoogleアカウントがあれば無料で取得することができます。
以下のURLにアクセスし、右上の「My reCAPTCHA」ボタンをクリックしてください。

下図のような登録画面が表示されたら必要事項を入力して登録してください。
Domainsには自分のHerokuアプリのドメインを入力しましょう。
image.png

登録すると次の画面でSite keyとSecret keyが表示されます。それぞれコピーしてHerokuの環境変数に設定してください。

image.png

正常に設定できるとFreeSFAのユーザー登録画面にreCAPTCHAが表示され、新規登録できるようになります。

image.png

Googleアカウントでログインを可能にする

下記URLからGoogle Cloud Platformにアクセスし、「プロジェクトの選択」から新規プロジェクトを作成してください。
すでにプロジェクトがある方はそちらを利用してもOKです。

image.png

プロジェクトを作成もしくは選択したら、APIとサービスのダッシュボードをクリックしてください。

image.png

APIとサービスのダッシュボードを開いたら、「APIとサービスの有効化」をクリックしてください。

image.png

検索欄に「google+」と入力して「Google+ API」を選択してください。
GoogleのソーシャルログインはGoogle+で行います。（もうすぐ廃止されるサービスなのに大丈夫なんでしょうか？）
image.png

Google+ APIを選択したら「有効にする」をクリックしてください。
image.png

続いて「認証情報の作成」をクリックしてください。
image.png

「プロジェクトへの認証情報の追加」で下記のように入力し、「必要な認証情報」をクリックしてください。
image.png

適当な名前を入力したら「OAuthクライアントIDを作成」をクリックしてください。
image.png

「次へ」をクリックしてください。
image.png

「完了」をクリックしてください。
image.png

認証情報の名前をクリックしてください。
image.png

クライアントIDとクライアントシークレットが表示されます。それぞれコピーして、Herokuの環境変数SOCIAL_AUTH_GOOGLE_OAUTH2_KEYとSOCIAL_AUTH_GOOGLE_OAUTH2_SECRETに設定してください。
image.png

[OAuth同意画面」を選択してください。
image.png

下の方に承認済みドメインを登録する欄があるので、Herokuアプリのドメインを設定してください。
image.png

認証情報に戻って、下図を参考にして「承認済みのリダイレクトURI」にHerokuアプリのURL + /social/complete/google-oauth2を入力し、保存をクリックしてください。

image.png

ここまで正しく設定できていれば、FreeSFAのログイン画面で「Googleアカウントで登録」と「Googleアカウントでログイン」ができるようになるはずです。

image.png

住所から緯度経度を取得できるようにする

APIとサービスのダッシュボードで「ライブラリ」をクリックしてください。
image.png

検索欄に「geocode」と入力し、「Geocoding API」を選択してください。

image.png

APIを有効にしてください。
image.png

APIとサービスの認証情報で「認証情報を作成」をクリックし「APIキー」を選択してください。

image.png

キーの制限は下図を参考にしてください。
「アプリケーションの制限」はなし、APIの制限は「Geocoding API」のみです。

image.png

Geocoding APIは「HTTPリファラー」で制限することができません。
IPアドレスで制限することは可能ですが、HerokuはIPアドレスを固定できないため、やむを得ず制限なしで運用しています。良い方法をご存知の方がいたらコメント欄で教えてください。

image.png

GeocodingのAPIキーはHerokuの環境変数ではなく、ワークスペースごとに作られるDB上に格納されます。
ワークスペースのオーナー権限でログインして、右上のアカウント名をクリックし、「環境設定」をクリックしてください。
APIキーの設定・確認はワークスペースのオーナーしかできないようにしています。

環境設定の該当箇所にAPIキーを設定して保存すると、住所から緯度経度を取得できるようになります。

顧客情報を新規作成し、緯度経度を入力せずに住所と必須項目を入力して保存してみてください。
緯度経度が自動的に入力されていればAPIは正しく設定されています。

地図を動的に表示できるようにする

APIとサービスのダッシュボードで「ライブラリ」をクリックしてください。
image.png

検索欄に「maps」と入力し、「Maps Embed API」と「Maps Javascript API」をそれぞれ有効にしてください。
image.png

「認証情報を作成」からAPIキーを新規作成し、キーの制限でAPIの制限とアプリケーションの制限を行ってください。
APIの制限は「Maps Embed API」と「Maps JavaScript API」を設定してください。
FreeSFAの設定画面では「Google Maps JavaScript API用のキー」と表現していますが、実際にはひとつのキーに2つのAPIが含まれているのでご注意ください。
image.png

アプリケーションの制限にはHTTPリファラーを選択し、自分のHerokuアプリのURLを設定してください。
これでこのAPIキーは自分のHerokuアプリから呼び出された場合しか使えなくなります。
image.png

「Maps Embed API」は顧客情報詳細画面で使用しています。
image.png

「Maps Javascript API」は「訪問予定と実績」画面など、複数の顧客を地図上にプロットする画面で使用しています。
image.png

Google Maps APIの料金について

Google Maps APIの利用料は従量課金制ですが、月に200ドル分までは無料で利用できます。

詳しくは下記URLを参照してください。
https://cloud.google.com/maps-platform/pricing/sheet/?hl=ja

弊社では今のところ無料で運用できています。

デモサイト

上でも書きましたが、以上の手順をすべて実施したデモサイトを作成しました。

デモサイトを試す場合は新規ユーザー登録からお願いします。
デモサイトのデータは毎朝4時にリセットされます。

おまけ

Herokuの自動スリープ回避

FreeプランのHerokuは30分間アクセスがないと自動でスリープしてしまいます。
いったんスリープすると、次にアクセスしたときはインスタンスの起動から始めるのでとても時間がかかってしまいます。
そこで自動スリープを回避する方法がいろいろ考案されています。
弊社の本番環境とデモサイトは下記の記事を参考にして自動スリープを回避しています。

データベースのバックアップとリストア

Herokuのデータベースはherokuコマンドでバックアップとリストアすることができます。
弊社では下記の記事を参考にして運用しています。

0

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
Sign upLogin