(1) Herokuを使って30分でWEBページを作成する

(c) .foto project

はじめに

数回に分けてHerokuを使って無料の動的WEBページを作成する手順を解説します。

まず１回目の今回は、Herokuの会員登録からデプロイを実行してWEBページを表示するところまで行います。

Herokuを使うと簡単にそして無料でWEBページを公開できる

Herokuを使えばすぐにWEB公開が可能。しかも無料で使用できる。

開発者はcommitしてpushするだけで後はHerokuがやってくれるので初心者でも楽々。

完成イメージ

実際に作成するWEBサイトは こちら

※ テキストのみの簡単なWEBページです。 　 (動的ページの作成は次回以降に)

環境など

PaaS

Heroku

プログラミング言語

Java

Webフレームワーク

SpringFramework

事前準備

• Heroku会員登録
• Heroku CLIのインストール（gitも一緒に）

手順

1. ソースのダウンロード
2. Heroku のプロジェクト新規作成
3. Heroku にデプロイ

１．ソースのダウンロード

Spring frameworkのWEBアプリを heroku で使用できるようにしたソースを Github に作成したのでそれをダウンロードします。

コマンドプロンプトを開く

（画面左下の入力欄に「cmd」と入力）

ダウンロードするフォルダへ移動

C:\> cd C:\work\WEBプログラミング

ソースをダウンロード（クローン）

Githubに作成してあるソースを git clone コマンドで取得します。 （ソースの中身については、今後の記事で解説します）

C:\work\WEBプログラミング> git clone https://github.com/sbc-f/web.git

２．Heroku のプロジェクト新規作成（管理画面から）

プロジェクトを新規作成

管理画面から作成する場合は画面右上のボタンから「Create new app」をクリック

アプリ名を入力

「App Name(optional)」 ← 適当な名前を入力。ただし、すでに使用されている名前は設定できない。 （未入力の場合は自動でセットされる）

「Create App」をクリックし作成

Setting

作成後、メニューの「Setting」を選択

GitのURL取得

GitのURLが記載されているので、コピーする。（後で使用する）

【参考】コマンドで Heroku のプロジェクト新規作成

コマンドでも作成可能。 下線の部分はアプリ名。すでに使用されているアプリ名は使用不可。 （未入力の場合は自動でアプリ名が設定される。）

C:\work\WEBプログラミング> heroku create sbc-web

３．Heroku にデプロイ

Heroku の Git の URL を追加

Gitコマンドでリモートを追加します。追加には、リモート名とURLが必要。

• リモート名 ： web (任意の名称。なんでも良い）
• URL ： https://git.heroku.com/sbc-web.git（上記で取得したURL）

C:\work\WEBプログラミング> cd web
C:\work\WEBプログラミング\web> git remote add web https://git.heroku.com/sbc-web.git

Heroku にデプロイ

リモートにPushすることで、Herokuが自動的にビルドからデプロイまでやってくれます。 Pushにはリモート名とブランチ名の指定します。

• リモート名 ： web（Pushするリモートを指定）
• ブランチ ： mater（最初に作られるブランチ）

C:\work\WEBプログラミング\web> git push web master

作成されたアプリの確認

Heroku のページより「Open app」をクリックして作成されたWEBアプリを表示します。 WEBアプリがインターネット上に公開されたことが確認できます。

おわりに

今回はWEBアプリの公開まですることができたので、次回は、実際のサーバ側の実装を行って、動的なWEBページ作成方法について解説したいと思います。