この記事では
PHPで作成したWebページやアプリを
エックスサーバーへデプロイするする方法
を解説します。
初めてPHPによる制作物をデプロイするという方は、もしかすると
ケケンタデプロイってめちゃくちゃ難しいんじゃないだろうか……
と不安に思っているかもしれません。
ですが、安心してください。
この記事の手順に沿ってひとつひとつ作業を進めることで、確実にデプロイを体験できるので、ぜひ参考にしていただければと思います。
もしプログラミング学習やお仕事で運動不足が気になっているなら
連続屈伸運動がおすすめです！
ボタンにカーソルを合わせるだけで
カウントダウンが始まるタイマーをご用意してみました！
ケケンタ無理のない範囲で、ぜひ隙間時間に屈伸運動を取り入れてみて下さい！
タイマースタート
3:00
デプロイの主な手順
ここからは「エックスサーバーと契約済み」という前提で解説を進めていきます。
PHPをエックスサーバーへデプロイする主な流れは以下のとおりです。
- データベースを準備する
- データベース接続情報を設定する
- PHPファイルをエックスサーバーへアップロードする
- ブラウザで表示確認をする
ケケンタこうしてみると複雑な手順はほとんど無いことがお分かりいただけるかと思います。
難しく感じる可能性が高い工程として、「②データベース接続情報を設定する」が挙げられます。
この工程では、いわゆる環境ファイルを用意します。その際、ComposerというPHPのライブラリ管理ツールを利用して環境ファイルを安全に扱えるようにするためのライブラリを導入します。
初めてComposerに触れる方やコマンドを使ったことがないという方にとっては、慣れない内容かもしれません。
しかし、今後もPHPでのアプリ開発を行う場合、Composerやコマンドは必須スキルになるので、今回を機に「こんなものがあるんだ」と、学びのキッカケになれば幸いです。
それでは、詳しい手順を見ていきましょう！
STEP１ データベースを準備する
まずは、エックスサーバー上に新規のデータベースを作成していきます。
ここで行うことは大きく分けて４つです。
- データベースを新規作成する
- 作成したデータベースへアクセスするためのMySQLユーザを新規作成する
- ①で作成したデータベースに②を追加する
- ローカルで構築していたDB構造を本番環境（エックスサーバー）のDBへインポートする
データベースだけを作成しても、そこへアクセスする権限を持ったユーザが用意されていないと、そもそもアクセスすること自体できません。
そのため
②では「①へのアクセス用のMySQLユーザ」を作成し
③で、②で作成したユーザにデータベースへのアクセス権限を付与します。
そして、④ではローカルで作成していたDBのテーブル構成などをまるっとエックスサーバー上のDBへインポートします。
ケケンタ以下より順番に手順を解説していきます！
１．データベースを新規作成する
エックスサーバーのサーバーパネル内にある「データベース」→「MySQL設定」をクリックします。
「MySQL追加」タブをクリックします。
「データベース情報」を入力します。
(例) 入力内容
具体的な項目名と入力内容は以下のとおりです。
| 項目名 | 入力内容 |
|---|---|
| MySQLデータベース名 | データベース名（任意の名称） |
| 文字コード | UTF-8 |
| メモ | 自由入力欄です。どのような用途のデータベースなのかをメモしておくと便利です。 ※任意項目 |
ケケンタ「メモ」項目について
「メモ」は任意項目ですが、日時が経過すると意外となんのデータベースなのかを忘れてしまいがちです。
その度に中身を確認するのも手間なので、簡単なメモ書きをしておくと便利です！
画面右下の「確認画面へ進む」をクリックします。
入力内容に誤りがなければ「追加する」をクリックしましょう。
データベースが追加されると、以下のような表示になります。
ケケンタ以上でデータベースの追加は完了です！
続いて、MySQLユーザーを新規作成していきましょう！
２．MySQLユーザを新規作成する
データベースの新規作成が完了したら、次はMySQLユーザを作成していきましょう。
「MySQLユーザ追加」タブをクリックします。
「MySQLユーザ情報」を入力します。
(例) 入力内容
具体的な項目名と入力内容は以下のとおりです。
| 項目名 | 入力内容 |
|---|---|
| MySQLユーザID | MySQLユーザID名（任意の名称） |
| パスワード | データベースアクセス用のパスワード |
| メモ | 自由入力欄です。どのような用途のMySQLユーザなのかをメモしておくと便利です。 ※任意項目 |
画面右下の「確認画面へ進む」をクリックします。
入力内容に誤りがなければ「追加する」をクリックしましょう。
MySQLユーザが追加されると、以下のような表示になります。
３．データベースへMySQLユーザを追加する
作成したばかりのデータベースは、初期状態だとユーザがいません。
そこで最後は、「２．MySQLユーザを新規作成する」で作成したMySQLユーザを新規作成したデータベースへ追加していきます。
「MySQL一覧」タブをクリックします。
「追加」をクリックします。
MySQLユーザが追加されると、以下のような表示になります。
再度「MySQL一覧」タブをクリックして一覧画面へ戻ると、データベースへMySQLユーザが追加されていることが確認できます。
４．データベースへアクセス可能か確認する
以上で
- 「データベース」と「MySQLユーザ」の新規作成
- アクセス権限の付与
が完了しました。
ケケンタ最後に、念のため本当に新規作成した情報でデータベースへアクセスできるかどうかを確認しておきましょう。
具体的には、「phpMyAdmin」の管理画面へアクセス可能かどうかを確かめていきます。
エックスサーバーのサーバーパネル内にある「データベース」→「phpmyadmin」をクリックします。
すると、Basic認証の入力フォームが表示されるので、MySQLユーザを新規作成したときに設定した認証情報を入力します。
(例) 入力内容
| 項目名 | 入力内容 |
|---|---|
| ユーザ名 | MySQLユーザを新規作成したときに設定したMySQLユーザID （例）xs123456_sampusr |
| パスワード | MySQLユーザを新規作成したときに設定したパスワード |
「ログイン」をクリックします。
ケケンタここまでお疲れさまでした！
以上で無事にデータベースとMySQLユーザの新規作成と、そのアクセス権限の付与が完了しました！
５．エックスサーバー上のDBへローカルのDB構造をインポートする
次に、「データベースの準備」の最後の作業として、ローカルのDB構造をエックスサーバー上のDBへインポートします。
左側のDBリストからデプロイしたいDBを選択します。
画面上部にある「エクスポート」タブをクリックします。
「簡易 – 最小限のオプションだけ表示」が選択されていることを確認し、下側にある「エクスポート」ボタンをクリックします。
すると、別のDB（今回だとエックスサーバー上のDB）へインポートするためのsqlファイルがダウンロードされます。
ケケンタ以下より、このファイルをエックスサーバー上のDBへインポートしていきます！
エックスサーバーでphpMyAdminを開きます。
画面上部にある「インポート」タブをクリックします。
「ファイルを選択」をクリックし、ローカルのDBからエクスポートしたsqlファイルを選択します。
ページの最下部にある「インポート」ボタンをクリックします。
すると、sqlファイル内のSQLが一括実行され、画像のようなログとともにDBテーブルのインポートが完了します。
DBテーブルのインポートが完了した直後の画面
ケケンタ工程が長く大変だったかと思いますが、以上でローカルのDBをエックスサーバー上へ移行することができました！
STEP２ データベース接続情報を設定する
この章では、データベースの接続情報を.envファイルへ移しつつ、「STEP１ データベースを準備する」で作成したデータベースに合わせた接続情報へ修正していきます。
.envは、アプリケーションで使用する「環境変数」をまとめておくためのファイルです。
また、「環境変数」とは、簡単にいうととってもとっても重要な情報のことです。
今回でいうと、データベース接続情報が該当します。
ケケンタ.envが漏洩する＝個人情報漏洩と同義なので、慎重に扱う必要があります！！
以上を踏まえた上で、実際に.envを扱っていきましょう。
- Composerをインストールする
- Composerで
phpdotenvをインストールする .envを準備する- データベース接続が必要なファイルへ
.envに記述した情報を読み込む
１．Composerをインストールする
まずはComposerをインストールしましょう。
ケケンタComposerの詳しいインストール方法については以下の記事で解説しています。
２．phpdotenvをインストールする
Composerのインストールができたら、次にphpdotenvをインストールします。
環境ファイル（.env）を安全に扱えるようにするためのライブラリです。
PHPプロジェクトディレクトリ直下で以下のコマンドを実行
composer require vlucas/phpdotenvこれだけでphpdotenvのインストールが完了します！
３．.envを準備する
次に、.envの作成とその中身の記述をしていきます。
PHPプロジェクトディレクトリ直下に.envを手動で作成します。
次に、.envにデータベース情報を記述します。
# ローカル側のデータベース情報
DB_HOST='mysql:dbname=todo_list;host=127.0.0.1;charset=utf8;'
DB_USER='kekenta'
DB_PASSWORD='kekenta'４．データベース接続が必要なファイルへ.envに記述した情報を読み込む
本節では、.envに記述したDB情報が、データベース接続を必要とするすべてのファイルに読み込まれるようソースコードの修正を行います。
.envから情報を読み込ませるために、データベース情報が必要な各ファイルを以下のように修正します。
<?php
/**
* .envファイルを使用する
*/
require './vendor/autoload.php'; // ★追加
Dotenv\Dotenv::createImmutable(__DIR__)->load(); // ★追加
/**
* ■ 元々定義していたDB接続情報は削除
*/
// const DB_HOST = 'mysql:dbname=todo_list;host=127.0.0.1;charset=utf8';
// const DB_USER = 'kekenta';
// const DB_PASSWORD = 'kekenta';
/**
* データベース接続処理
*/
// $pdo = new PDO(DB_HOST, DB_USER, DB_PASSWORD, [ // ■ 削除
$pdo = new PDO($_ENV['DB_HOST'], $_ENV['DB_USER'], $_ENV['DB_PASSWORD'], [ // ★追加
// PDOオプション記述箇所（※ここでは省略）
]);
// ～ 省略 ～
?>元々定義していたデータベース情報を削除し、代わりに.envからデータベース情報を読み込むように修正しています。
この段階で一度、ローカル側でデータベース関連の処理が問題なく動作するかどうかテストします。
ローカル上で、.envからデータベース情報を問題なく読みこめていることが確認できたら、続いて本番環境用の情報へ修正します。
# ローカル用（本番環境へデプロイするときも削除せずコメントアウトしておくと後々便利です）
# DB_HOST='mysql:dbname=todo_list;host=127.0.0.1;charset=utf8;'
# DB_USER='kekenta'
# DB_PASSWORD='kekenta'
# エックスサーバー（本番環境）用
DB_HOST='mysql:dbname=エックスサーバーのMySQLデータベース名;host=127.0.0.1;charset=utf8;'
DB_USER='エックスサーバーのMySQLアクセス用ユーザ名'
DB_PASSWORD='エックスサーバーのMySQLアクセス用パスワード'以上で、データベース情報を.envから読み込む方式に変更できました。
ケケンタ次の章では、いよいよエックスサーバー上にPHPプロジェクトファイルをアップロードしていきます。
STEP３ PHPファイルのアップロード
PHPファイルを本番環境へアップロード（デプロイ）する方法はいくつかあります。
例えば、FFFTPやFileZillaのような「FTPソフトを利用する方法」や「Githubを利用する方法」などです。
しかし、この記事は初心者の方向けということもあり、
PHPプロジェクトディレクトリをzip化 → エックスサーバー上で展開
というもっとも手軽で簡単な方法をご紹介していきます。
具体的な手順は以下のとおりです。
- PHPのプロジェクトディレクトリをzip形式に圧縮する
- エックスサーバーのファイルマネージャーへ①のzipファイルをアップロードする
- zipファイルを展開する
ひとつずつ具体的な手順を解説していきます。
１．PHPプロジェクトディレクトリをzip形式に圧縮する
まずはローカル上にあるプロジェクトディレクトリをzip形式に圧縮しましょう。
２．エックスサーバーのファイルマネージャーへzipファイルをアップロードする
次に、エックスサーバーのファイルマネージャーへzipファイルをアップロードしていきます。
ファイルマネージャーでは、左側にサーバー上のディレクトリリストが表示されています。
その中から、「デプロイで使用するドメイン名のディレクトリ」をクリックします。
（例）kekenta-it-blog.comをデプロイ先にする場合
ドメインディレクトリ内にpublic_htmlディレクトリがあるので、これをクリックします。
エックスサーバーでは、このディレクトリがいわゆる「ドキュメントルート（公開ディレクトリ）」に該当します。
public_html内に入ったら、画面上部にある「アップロード」をクリックします。
すると、以下のようなダイアログが表示されるので、アップロードするzipファイルを選択し、右下にある「アップロード」をクリックしましょう。
アップロード完了
３．zipファイルを展開する
最後に、アップロードしたzipファイルを「展開」していきます。
まずは、zipファイルをクリックします。
すると、上部メニューの「展開」がクリックできるようになります。
上部メニューの「展開」をクリックすると、以下のようなダイアログが表示されるので、さらに「展開」をクリックします。
すると、以下のようにzipファイルが展開されます。
エックスサーバー上でzipファイルを展開した直後の状態だと、ディレクトリ構造が
「public_html」→「todo_app」→「todo_app」
のように一段階、余計にディレクトリが挟まります。
そのため、zipファイルを展開したら、続けて、そのディレクトリ内にある本当のプロジェクトディレクトリをpublic_htmlへ移動します。
ドラッグ＆ドロップで移動可能
プロジェクトディレクトリをpublic_htmlへ移動すると、以下２つのような名称のディレクトリが確認できるかと思います。
- 元々のディレクトリ名（例：
todo_app） - 元々のディレクトリ名 – copy（例：
todo_app - copy）
そのため、下記のように対応をします。
- ① …… 削除
- ② ……「任意のディレクトリ名」へ名前を変更
ケケンタお疲れ様です！
これでついにデプロイが完了しました！
ここまで問題なく作業を行えていれば、ブラウザ上でWebアプリが動作するはずです！
最後に、動作確認をしていきましょう。
STEP４ ウェブブラウザで確認
動作確認で行うことはシンプルです。
- ブラウザのアドレスバーにURLを入力
- アプリの動作確認を行う
１．ブラウザのアドレスバーにURLを入力
まずはお好きなブラウザを開いて、アドレスバーにURLを入力します。
URLですが、例えば僕の場合は
- ドメイン……kekenta-it-blog.com
- プロジェクトディレクトリ名……todo_app
としたので
https://kekenta-it-blog.com/todo_app
が入力するURLになります。
すると、プロジェクトディレクトリ直下にある「index.php＝トップページファイル」が呼び出されます。
(例) トップページ表示
２．アプリの動作確認をする
最後のステップは「アプリの動作確認」です。
ここでチェックするべき項目は、主に以下の通りです。
チェックするべき項目
- すべての機能が問題なく動作するか
- アクセスできるはずのページに問題なくアクセスできるか
- アクセスできないはずのページへのアクセスが適切に拒否されるか
ケケンタ僕は今回は試しに「TODOアプリ」をデプロイしてみたので、とりあえずTODOリストの追加・編集・削除の機能動作をチェックしました！
(例) 機能動作チェックの様子
まとめ
以上がPHPで作成したWebページやアプリをエックスサーバーへデプロイするする方法でした。
エックスサーバーのようなレンタルサーバーを利用すれば、PHPで作成したWebページ・アプリは比較的簡単にデプロイが可能です。
とはいえ、初めてデプロイしたという方にとっては、工程も長くなかなか大変だったのではないかと思います。
ケケンタ最後まで本当にお疲れさまでした！
今回は初心者の方向けということもあり、デプロイする方法の中でも比較的簡単かつ時間もあまりかからない方法をご紹介させていただきました。
今後、アプリ開発にも慣れて、より本格的な運用をしていきたいとなった場合は、Githubを利用する方法がベストです。
とはいえ、今回ご紹介した内容と大きく異なるのは「どんな方法でプロジェクトディレクトリをサーバー上へアップロードするか」という点だけなので、まずはこの記事の内容の全体像をおさえていただければスムーズにステップアップできるかと思います。
デプロイはプログラミング初心者の方にとって鬼門のひとつです。
この記事がそこを突破する一助となったなら幸いです。
ケケンタそれでは、最後までご覧いただきありがとうございました！
当ブログではPHPやそのフレームワークであるLaravelに関する情報などを発信しています。ご興味のある方はほかの記事もご覧いただけるとうれしいです！
コメント