Tech Select 学習サイト

# 掲示板アプリのデプロイ

掲示板アプリを Heroku にデプロイする手順です。

クレジットカードが必要です。

このアプリケーションはデータベースが必要なため、Heroku から提供されている Add-on を使用します。Add-on を使用するには、Heroku アカウントの正当性を確認しておく必要があります。アカウントの正当性を確認する方法として、クレジットカードの入力が必要です。このページのデプロイを実施することにより料金は発生しませんが、当該正当性の確認のためにクレジットカードの登録が必要です。

# Heroku アカウントにクレジットカードを登録する

https://dashboard.heroku.com/account/billing (opens new window) (ダッシュボード右上のアイコン → Account Settings → Billing) のページを開き、「Billing Information」のセクションから 「Add credit card」 をクリックします。

image

必要な情報を入力し、「Save Details」 をクリックします。

image

# Heroku にデプロイするための準備

作成した PHP ファイルがうまくデプロイされるように調整します。

掲示板アプリのプロジェクトディレクトリに移動し code . で Visual Studio Code を開きます。

image

以下のファイルを作成・変更します。

  • composer.json
  • Procfile
  • .gitignore
  • src/insert_message.php

# composer.json

compose.json を作成し、以下の内容を記載します。

~~/compose.json

{
  "require": {
    "php": "~8.0",
    "ext-mbstring": "*"
  }
}
1
2
3
4
5
6

# Procfile

Procfile を作成し、以下の 1 行を記載します。

~~/Procfile

web: vendor/bin/heroku-php-apache2 public/
1

# .gitignore

.gitignore を作成、以下の内容を記載します。

~/.gitignore

vendor/
1

# insert_message.php

insert_message.php の一行を次のように変更してください。

~~/src/insert_message.php










 
























...
// 投稿をデータベースへ保存する処理
if ($is_valid_auther_name && $is_valid_message) {
  if ($input_author_name === '') {
    $input_author_name = '匿名さん';
  }

  // INSERT クエリを作成する
  // :author_name、:message はプレースホルダという。後で $stmt->bindValue を使用して値をセットするときのニックネームのようなもの。自分で決められる。
  $query = 'INSERT INTO posts (author_name, message, created_at) VALUES (:author_name, :message, now())';

  // SQL 実行の準備 (実行はされない)
  $stmt = $dbh->prepare($query);

  // プレースホルダに値をセットする
  $stmt->bindValue(':author_name', $input_author_name, PDO::PARAM_STR);
  $stmt->bindValue(':message', $input_message, PDO::PARAM_STR);

  // クエリを実行する
  $stmt->execute();
  $_SESSION['action_success_text'] = '投稿しました';
  $_SESSION['action_error_text'] = '';
  $_SESSION['input_error_author_name'] = '';
  $_SESSION['input_error_message'] = '';
  $_SESSION['input_pre_author_name'] = '';
  $_SESSION['input_pre_message'] = '';
} else {
  $_SESSION['action_success_text'] = '';
  $_SESSION['action_error_text'] = '入力内容を確認してください';
}

header('Location: /');
exit();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

# 依存関係のインストール

WIN

WSL の方は以下のコマンドを実行してください。

$ docker run --rm -it -v "$PWD":/app -u 1000:1000 composer install
1
MAC

Mac の方は以下のコマンドを実行してください。

$ docker run --rm -it -v "$PWD":/app composer install
1

上記を実行するとプロジェクトルートに vender ディレクトリと composer.lock ファイルが作成されます。

一連の作業を実施すると以下のようになっているはずです。

image

# GitHub リポジトリに反映する

手元の状態がすべて GitHub 上に反映されているようにしてください。

コマンド例

※ GitHub Desktop を使用し Push しても問題ありません。

$ git add .
$ git commit -m "update files"
$ git push origin main
1
2
3

image

image

# Heroku 上でアプリを作成する

流れは ポートフォリオのデプロイと同じです。

Heroku の ダッシュボード (opens new window) で New → Create new app を選択します。

image

アプリ名を入力して、アプリを作成します。

ここでは、ts-user-web-message-board と入力していますが、任意の値を入力してください。 すでに使用されている値は使用できません。 ここで入力した値は、結果的に https://{アプリ名}.herokuapp.com/ という URL で全世界に公開されます。

Create App を押します。

image

# Add-on を追加する

掲示板アプリはデータベースを使用します。Heroku には Add-on という形でデータベースを連携することができます。

「Resources」タブを選択し、 「Add-ons」のセクションから JowsDB MySQL と入力し、「JowsDB MySQL」を選択します。

image

「Plan name」 で「Free」が選択されていることを確認し、「Submit Order Form」をクリックしてください。

image

# データベースをセットアップする

しばらくすると JawsDB MySQL が選択できるようになります。 「JawsDB MySQL」をクリックします。

image

以下のような画面が表示されます。この画面は データベースに接続するための情報が表示されています。このページではパスワードなどが表示されていますが、実際に操作する際は、第三者と値を共有しないように注意してください。

image

データベースのテーブルを作成するために、適当な管理画面からデータベースに接続します。 ローカルからデータベースに接続する等、Heroku のデータベースが操作できればどのようなクライアントでも問題ありませんが、今回は、操作画面がわかりやすいように、学習サイト用のデータベース管理画面ページを用意しましたのでお使いください。 以下のページを開いてください。

https://adminer-techselect.onrender.com/ (opens new window)

image

JawsDB MySQL のページに表示されている認証情報を入力してログインしてください。

  • データベースの種: MySQL
  • サーバ: Host
  • ユーザー名: Username
  • パスワード: Password
  • データベース: Database
  • 永続的にログイン: 任意

image

以下のような画面が表示されれば接続できています。

image

「テーブルを作成」を選択します。

image

掲示板アプリ開発のデータベースの準備するのページ で準備したテーブルと同様のテーブルを作成します。

  • テーブル名: posts
  • エンジン: InnoDB
  • utf8mb4_general_ci
列名 型 長さ 設定 AI
id int ✅
author_name varchar 255 (照合順序)
message text (照合順序)
created_at timestamp

image

TIP

カラムを増やすには 「+」ボタンを押します。

image

「保存」をクリックすると以下のような画面になります。

image

# Heroku と GitHub リポジトリを連携する

ポートフォリオのデプロイ時に、GitHub と認証情報を連携しているため、認証の手順はありません。そのままリポジトリを選択する流れとなります。

  1. 「Deploy」タブが開かれていることを確認します。
  2. 「Deployment method」のセクションで 「GitHub」 を選択します。
  3. 「Connect to GitHub」のセクションで 自分のユーザー名が選択されていることを確認し、掲示板のリポジトリ名を入力し、 「Search」 をクリックします。
  4. デプロイしたいリポジトリ（掲示板のリポジトリ）の 「Connect」 をクリックします。

image

# デプロイする

  1. 自動デプロイを有効にします。「Automatic deploys」 のセクションで 「Choose a branch to deploy」の項目から、公開したいブランチ（例では main ブランチ）が選択されていることを確認し、「Enable Automatic Deploys」をクリックします。
  2. 初回に手動デプロイを実行します。「Manual deploy」 のセクションに移動します。「Choose a branch to deploy」 でデプロイしたいブランチ (例では main ブランチ)を選択し、 Deploy Branch をクリックします。

image

デプロイ作業が始まるため、しばらく待機します。デプロイが完了すると、以下のように緑色のチェックマークが表示されます。

image

# 表示の確認

画面右上の 「Open App」 のページを開き、ページがうまく表示されているか確認しましょう。

image

image

掲示板アプリの公開は以上です。スマートフォンや、他の人の端末に URL を共有して、うまく動作するか確認してみましょう。

← To Do アプリのデプロイ →