【Web制作学習】自作レシピアプリをXserverに公開しました

今回は、これまでMAMPのローカル環境で作っていた**自分用レシピ管理アプリ「My Recipe」**を、Xserverに公開する作業を進めました。

これまではMacの中だけで動かしていましたが、今回はスマホからも使えるようにするため、サーバーへ移行しました。

今回進めたこと

まず、Xserverのpublic_html内に

my-recipe

フォルダを作成し、これまで作ってきたPHP・CSS・画像フォルダなどをアップロードしました。

アップした主なファイルは、

index.php

add.php

detail.php

save.php

db.php

css

js

uploads

などです。

Xserver側にMySQLを作成

レシピデータはMySQLに保存しているため、ファイルをアップロードするだけでは動きません。

そこでXserver側に新しく、

xs851875_recipe

というデータベースを作成しました。

さらに、このデータベースを操作するためのMySQLユーザーも作成し、アクセス権を設定しました。

MAMPのデータをXserverへ移行

次に、これまでMAMPのphpMyAdminで使用していた

my_recipe

データベースをSQLファイルとしてエクスポートしました。

そのSQLファイルをXserver側のphpMyAdminからインポート。

これによって、今まで登録していたレシピデータもそのままXserverへ移すことができました。

db.phpもXserver用に変更

ローカル環境では、

host=127.0.0.1

port=8889

などMAMP専用の接続情報を使用していました。

公開後は、Xserver用に

host=localhost

dbname=xs851875_recipe

などへ変更しました。

MySQLユーザー名やパスワードもXserverで作成したものに変更し、無事データベースへの接続に成功しました。

公開サイトからレシピ一覧を表示

設定後、URLから

レシピアプリを開くことができました。

これでMacだけではなく、スマホからもアクセスできるWebアプリになりました。

ローカルで作っていたものが実際にインターネット上で動くと、かなり「アプリを作っている感」が出てきます。

Basic認証も設定予定

今回のレシピアプリは自分用なので、誰でも見られる状態にはしたくありません。

そこで次は、XserverのBasic認証を使って、

「ユーザーID＋パスワードを知っている人だけアクセスできる」

状態にする予定です。

まとめ

今回は、

MAMPで制作

→ Xserverへファイルをアップ

→ MySQLを作成

→ データを移行

→ db.phpを変更

→ 公開環境で表示

まで進めることができました。

HTMLやCSSだけでなく、PHPとMySQLを使ったサイトは、サーバーへ移すときにもデータベース設定が必要になります。

少しずつですが、ローカルで作ったものを実際に公開して使えるところまで進められて、Webアプリ制作の流れがかなり分かってきました。