このガイドはFacebookのクラウドサービス統合機能を用いてHerokuでアプリケーションを作成するFacebook開発者向けのガイドです。
Herokuの前提知識は不要という想定です。Herokuアカウントを追加し、アプリケーションを作成し、ローカルに開発環境をセットアップし、facebookアプリケーションの変更をデプロイするまでのすべてのプロセスを紹介します。
(If you've already created a Heroku app via Facebook, you can skip to the next section.)
Start by going to Facebook Developers and clicking Create New App in the upper-right corner:
You'll be presented with this dialog:
Enter anything you wish for the app name, check the box marked "Yes, I would like free web hosting provided by Heroku", then click Continue.
Fill out the captcha in the subsequent dialog and click Submit. You'll be taken to this screen
Choose your favorite programming language from the dropdown (Ruby, Node.js, Python, and PHP are currently available). Enter the email address you wish to use for your Heroku user account, then click Create.
You'll be taken to a success dialog:
A template app, written in the language you chose, has been copied and deployed just for you!
Click Go to app to visit your new app.
Because you're visiting your app as a user, you need to grant permission for the app to access your Facebook profile by clicking Allow:
Congratulations! You now have your very own Facebook app, running on Heroku:
The app shows examples of accessing the Facebook API to list friends, photos, interests, and more. Once you start editing the code, you can use these capabilities to make your app do more interesting things.
Now that you've got a running app, you'll want to start editing it. But first, a brief aside.
(If you're already familiar with Heroku, you can skip to the next section.)
Your Facebook app needs to run somewhere. This can be traditional hosting such as your own hardware or a VPS; however, these options are time-consuming and costly to set up. Apps on Heroku can be created instantly, and they cost you nothing unless the app grows to a large amount of traffic or users.
Heroku is a cloud application platform. With Heroku, you don't need to think about servers at all. You can write apps in the programming language of your choice, back it with add-on resources such as SQL and NoSQL databases, Memcached, and many others. You manage your app using the Heroku command-line tool and you deploy code using the Git revision control system, all running on the powerful Heroku infrastructure.
Any kind of web app can be deployed to Heroku; you can read all about the platform's capabilities in the Dev Center. For the rest of this guide, we'll focus on editing the Facebook app you've already created in the previous section.
(If you already have a Heroku account and the local development tools set up, you can skip to the next section.)
Although an account as already been created for you, and the app has already been deployed, you still need to create a password and set up local tools to make changes to it.
A Heroku user account was created for you when you created the app through Facebook. Check your email and look for the welcome message:
Follow the first link in that email to the page where you can choose a password for your Heroku account:
Create a password, then close that browser window and proceed to the next step.
Install the Heroku Toolbelt on your local workstation. This ensures that you have access to the Heroku command-line client, Foreman, and the Git revision control system.
Once installed, you can use the heroku command from your terminal (use cmd.exe on Windows). Log in using the email address and password for your Heroku account:
:::term
$ heroku login
Enter your Heroku credentials.
Email: adam@example.com
Password:
Could not find an existing public key.
Would you like to generate one? [Yn]
Generating new SSH public key.
Uploading ssh public key /Users/adam/.ssh/id_rsa.pub
Press enter at the prompt to upload your existing ssh key or create a new one, used for pushing code later on.
With your Heroku account and local tools set up, you can start making changes to your Facebook app.
We'll start by grabbing a copy of your app's sourcecode using Git. You'll need to know the name of your app for this: Heroku gave it a randomly-generated haiku name to start with, so look in the URL to find your app name. For example, if your URL is https://furious-robot-218.herokuapp.com, then your app name is furious-robot-218. Paste this into a git clone command like so:
:::term
$ git clone git@heroku.com:furious-robot-218.git -o heroku
Initialized empty Git repository in /Users/adam/facebook-template-php/.git/
remote: Counting objects: 273, done.
remote: Compressing objects: 100% (183/183), done.
remote: Total 273 (delta 2), reused 261 (delta 0)
Receiving objects: 100% (273/273), 25.55 KiB, done.
Resolving deltas: 100% (2/2), done.
cd into the directory created by the git clone operation, which will be named the same thing as the app (e.g. furious-robot-218). You should be able to see that heroku has been added as a remote
:::term
$ git remote
heroku
If the remote was not added you can do this manually with the following command, making sure to change the git url to your own app name.
:::term
$ git remote add heroku git@heroku.com:furious-robot-218.git
$ git remote
heroku
Let's tweak something small in the app and push it back up to Heroku, illustrating the deploy process. For example, find the line of HTML which shows the welcome banner (in the PHP app, index.php line 157):
:::html
<p>Welcome to your Facebook app, running on <span>heroku</span>!</p>
Use your favorite text editor to change this line to:
:::html
<p>This is my app, I can edit it all I want.</p>
Save the file, then use your terminal to commit the change to Git:
:::term
$ git commit -am "changed greeting"
[master 0ff313a] changed greeting
1 files changed, 1 insertions(+), 1 deletions(-)
Now, the fun part -- pushing the modified code up to Heroku with git push heroku master:
:::term
$ git push heroku
Counting objects: 5, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (3/3), done.
Writing objects: 100% (3/3), 347 bytes, done.
Total 3 (delta 1), reused 0 (delta 0)
-----> Heroku receiving push
-----> PHP app detected
-----> Bundling Apache... done, v2.2.19
-----> Bundling PHP... done, v5.3.6
-----> Discovering process types
Procfile declares types -> (none)
Default types for PHP -> web
-----> Compiled slug size is 20.9MB
-----> Launching... done, v2
http://furious-robot-218.herokuapp.com deployed to Heroku
To git@heroku.com:furious-robot-218.git
396ec84..994290d master -> master
Reload the app in your browser. You should see the modified welcome banner:
Congratulations, you're now a Facebook app developer!
You can now go to work on your application. When you're ready to get more advanced in your editing techniques, move on to the next section.
In the previous section, we pushed changes to the app to the live production environment without testing it in a local environment. A better workflow is running the app locally, and testing your changes there. When you're ready to deploy, use git commit and git push heroku to push up changes to the live production app.
Methods for running your app on your local computer will vary by programming language and operating system. For example, PHP developers on Mac OS X can use the version of Apache and PHP that comes with the operating system by configuring a VirtualHost in their Apache config. Ruby developers, on the other hand, may run their app with Foreman.
Regardless of how you run your app locally, there are two techniques you'll need to know about that are specific to running a local development version of a Facebook app.
The Facebook app you previously created points at the URL of your Heroku app (which will look like https://furious-robot-218.herokuapp.com). This is the production app.
For development, you'll need to register another app with Facebook. Unlike the first app, this one will not run on Heroku, but instead will run on your local workstation and have a URL like http://127.0.0.1:5000/.
To set up this second app, go to Facebook Developers and again click Create New App. Choose a name to indicate that this is the development version of your existing app. For example, if your other app is named "My Cool App", you might call this one "My Cool App - Dev".
Once created, click the Website checkbox and enter your local URL. For example:
The click Save Changes.
On the same settings page for your app used to set the website URL, you'll also find the App ID and App Secret:
For your production app, these were automatically added to your Heroku app as config vars, but in your local environment you'll need to set them as environment variables. How you'll set env vars depends on your OS and method of running your app. Here are two examples:
If you run your app with Foreman, it will automatically source a file named .env in the root of your app's code checkout. Cut-and-paste your App ID and App Secret into .env:
FACEBOOK_APP_ID=964173273189
FACEBOOK_SECRET=dcd5d23d003d53cb2b68e01
If you're running your app with Apache, you can set the env vars for your local app's VirtualHost using the SetEnv directive. For example:
<VirtualHost *:80>
DocumentRoot /Users/adam/Sites/mycoolapp-dev
ServerName mycoolapp-dev.localhost
SetEnv FACEBOOK_APP_ID 964173273189
SetEnv FACEBOOK_SECRET dcd5d23d003d53cb2b68e01
</VirtualHost>
With these two changes in place, you should be able to visit your app locally and access all Facebook functionality. When you're ready to share your changes in the world, git commit them and then git push heroku, then visit your production app to confirm that your changes work correctly on the live app.
- Heroku How It Works
- Heroku Dev Center
- Facebook Developer Docs
- Facebook Graph API Docs