ゼロからはじめるWEBプログラミング入門

未経験者でも初心者でも関係なく、とにかくWEBサイトを作るところから始めるブログ!

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


© .foto project


はじめに

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

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


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

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

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

f:id:sbc-web:20170201064751p:plain


完成イメージ

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

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



環境など

PaaS

Heroku

プログラミング言語

Java

Webフレームワーク

SpringFramework



事前準備



手順

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



1.ソースのダウンロード

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


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

(画面左下の入力欄に「cmd」と入力)

f:id:sbc-web:20170129203651p:plain


ダウンロードするフォルダへ移動
C:\> cd C:\work\WEBプログラミング


ソースをダウンロード(クローン)

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

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



2.Heroku のプロジェクト新規作成(管理画面から)

プロジェクトを新規作成

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

f:id:sbc-web:20170129201708p:plain


アプリ名を入力

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

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

f:id:sbc-web:20170129205259p:plain


Setting

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

f:id:sbc-web:20170129205312p:plain


GitのURL取得

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

f:id:sbc-web:20170129205326p:plain


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

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

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



3.Heroku にデプロイ

Heroku の Git の URL を追加

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アプリがインターネット上に公開されたことが確認できます。

f:id:sbc-web:20170129205349p:plain



おわりに

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