Generic placeholder image

【WSL】Heroku・Git・Djangoを使い無料でWebに公開(パート1)

投稿日 2019年6月10日 >> 更新日 2022年6月30日

概要

今回は無料で(制限有り)Webサイトを公開できるHerokuの使い方について紹介しようと思います。というのも私自身覚えたてであり復習するつもりで書いていくので参考程度に閲覧してください。

簡単にHerokuとGitについて説明しておくと、Herokuはインフラ(サーバーなど)を気にせずデプロイ(公開)できるツールで、Gitとはアプリのコード履歴などを管理できるツールとなっています。

これら2つのツールをPC上に用意するだけで、ドメインやサーバーを用意せず世界へ自分のアプリを公開することが出来てしまいます。

実行環境

実行環境
Windows Subsystem for Linux

Herokuの構築

Herokuアカウントの作成

まずはHerokuのホームページを開き無料アカウントを取得します。名前やEメールなどを記入し作成すると登録したEメールアドレス宛にリンク付きのメールが届きます。そのリンクをたどることでHerokuアカウントがアクティブになるのでクリックします。

Heroku CLI(コマンドラインインターフェイス)のインストール

次にHerokuをリモートで操作するためのツールをインストールします。
The Heroku CLI | Heroku Dev Centerにアクセスし以下のコードをWSLのUbuntuにてコマンドします。

WSLのUbuntuでは「snap」コマンドを使ってインストールできない為、「curl」コマンドを実行しスタンドアローンでのインストールで導入する事が出来ます。

$ curl https://cli-assets.heroku.com/install.sh | sh

インストールが完了したらターミナルにて確認します。

$ heroku version
heroku/7.25.0 linux-x64 node-v11.14.0

上記のように反応があれば完了です。

HerokuサイトにログインしてHerokuアプリの設定

まずはターミナルにてHerokuにログインします。

$ heroku login

すると下図のようにブラウザにてログイン画面が現れます。

ログイン画面が現れたらログインボタンを押してください。すると下図のように切り替わります。

ユーザー名パスワードを求められたらその通りに従ってください。

ターミナルへ戻りHeroku用として公開する空のアプリを作成します。このアプリ名は後にWebで公開される時のURL(https://アプリ名.heroku...)に付与されます。

以下のように実行すると「zerofromlight」というHerokuで使えるアプリが作成されます。

$ heroku create zerofromlight
Creating ⬢ zerofromlight... done
https://zerofromlight.herokuapp.com/ | https://git.heroku.com/zerofromlight.git

補足

ここで作成したアプリはHerokuサイトのドメイン名に当たる部分なので、既に使用されていると作成されません。

作成できましたらブラウザにて先ほどのログイン画面に行き、Heroku管理画面を開きます。

※真ん中にあるHerokuマークをクリック。

すると画面に先ほど作成したアプリが置かれていると思います。

Herokuサイトでデータベースの設定

ここからはデータベースの設定を行っていきます。HerokuではGUI操作で簡単にデータベースを選んで適用させることができます。

このデータベースは先ほど作成したHerokuアプリで使用するためのものです。

まずHeroku管理画面を開くためにアプリ名をクリックし、Resourcesをクリックします。

下図の画面のようになります。

HerokuではPostgreSQLが無料で推奨となっているので「add ons」にて「heroku postgresql」と検索します。

検索し選んだら適用します。

Overviewに移動すると反映されている事が分かります。

これでHerokuアプリの構築はできたので、あとはGitプロジェクトでHerokuをリモートに設定するだけです。

Gitの設定

まずはGitが既にインストールされているか確認をします。

$ git version
git version 2.17.1

もしインストールされていない場合は「apt」コマンドでインストールします。

$ sudo apt install git

Gitを使うためにはユーザー名とEメールアドレスを登録する必要があります。

$ git config --global user.name "ユーザー名"

$ git config --global user.email "Eメールアドレス"

以下はユーザー名とメールアドレスを確認するコマンドです。

$ git config user.name
ユーザー名

$ git config user.email
Eメールアドレス

これでWSL(Windows Subsystem for Linux)のUbuntuで扱うHerokuとGitの準備は完了です。

実際に開発アプリをHerokuサーバーへデプロイし公開する方法は、以下の記事にて実装しているので宜しければご覧ください。

それでは以上となります。

最後までご覧いただきありがとうございました。

<<< 一覧へ戻る