Top > Web

簡単にWebサイトを作る3ステップ



以下は、実際にこのサイトを作った手順です。(2017年5月時点)

ステップ1:Herokuで環境構築

Herokuは、 様々なスクリプトの実行サーバーやデータベースなどの「プラットフォーム」を、 インターネット上で使えるようにしてくれるPaaSの一つです。

Herokuの特徴としては、言語として扱える数が多く得意な言語での開発に適応させることができます。
(対応言語:Node.js, Ruby, Java, PHP, Python, Go, Scala, Clojure)
また、拡張機能の豊富さやスケールアウトが可能といった商業利用にも適した環境を提供しています。

Herokuが何者なのかわかったところで、登録してみましょう。基本的には無料で色々できます。
登録後、Heroku CLI(Command Line Interface)をインストールした後にチュートリアルが始まります。
言われるがままにチュートリアルを進めると、どうやってWebサイトを編集し、本番環境にアップロードするのかがわかります。

この時点で、デフォルトのサイトが普通に見られる状態になっていますので、
後はこれを応用して、好きなサイトを構築していくだけです。


ステップ2:Webサイト・Webアプリの開発

UIに関して特にこだわりがなければ、Twitter社が提供するBootstrapを利用するのが簡易で良いです。
ナビバーやtableなど素敵なデザインがセットされています。

Webアプリは、中々意図したようにならなかったりしますので、Try&Errorの繰り返しです。
当サイトの場合は裏側はdjangoをフレームワークとして利用しています。
修正する度に以下のコードをコマンドプロンプト上で走らせて、意図するようになっているかを確認します。


git add .
git commit -m "Demo"
git push heroku master

※参考:今日からはじめるGitHub 〜 初心者がGitをインストールして、プルリクできるようになるまでを解説

では、いよいよ公開です。


ステップ3:好きなドメインを取得して公開

この時点では、Herokuで勝手に決められたサブドメインになっていますので、好きなドメインを取得しましょう。
私の場合は「お名前.com」で取得しました。
取得時に、Whoisの代行も忘れないようにしましょう。

次に、取得したドメインとHerokuを連結する必要があります。そのためにDNSというものが必要になります。
私の場合は「Dozens」のBasicプランを利用しています。
設定時には、Add a domainで上記で取得したドメインを指定し、"+Record"でHerokuとの関連付けをします。
Record Name:自分のドメイン名
Type:ALIAS
TTL:1minuite
Priority:空欄
Content:アプリ名.herokuapp.com

※「www.~」の場合は、Typeを「CNAME」にします。

その後、お名前.comにて、ドメインNavi > ドメイン設定 > ネームサーバーの変更 >
登録情報は正しいので手続きに進める > 他のネームサーバーを利用 の画面で
ネームサーバー情報の欄にDozensのページに記載されている以下のドメインを入力。
ns1.dzndns.com
ns2.dzndns.com
ns3.dzndns.com
ns4.dzndns.com

※お名前.com側での時差で1日程度かかりました。
※heroku上でクレカ登録してドメイン登録のcodeを実行するのを忘れずに。


当サイトの例:Webサイト・Webアプリ全体像

全体像を表すと以下のようになります。 当サイトの例:Webサイト・Webアプリ全体像

プログラミング言語 Python
フレームワーク Django、Bootstrap
インフラ/各サーバー Heroku
DB Google Drive & SpreadSheet

Pythonスクリプトの構造はdjangoをベースにしています。
DBは現状ではGoogle Driveを使っています。
HighchartはPythonで取得したデータをチャートとして表示するために使っているJavascriptライブラリです。
自動Tweet機能とかは未実装ですが・・・




Ads by Google