今日は、メールアドレスを収集してデータベースに保存するページを作ることにしました。目的は、Laravel と Render を使うのがどれくらい簡単でコスト効率が良いかを試すことです。
この投稿は、ランディングページをオンラインで動かすまでの自分の作業過程の記録です。
まず、GitHub に新しい公開リポジトリを作成しました。
その後、プロジェクトを自分のMacにダウンロードし、エディターの VSCode で作業を始めました。
以前、PHP や Laravel を使って仕事をしていたことがありますが、最後にそれらのツールでプロジェクトを完成させてからもう 5 年ほど経っているので、PHP や Laravel を扱う際に VSCode で使える便利な拡張機能を調べてみることにしました。
Google で簡単に検索したところ、興味深い拡張機能を紹介しているウェブサイトを 2 つ見つけたので、それらをインストールしました。
参考までに、そのサイトを以下に載せておきます。
https://laraveldaily.com/post/vs-code-extensions-laravel-php
実際に自分にとって本当に役立つかどうかは、これから使ってみないと分かりませんが、今のところは役に立ちそうだと思っています。
次のステップとして、ChatGPT に以下の質問をしてみました。
「Laravel は初めてなので、メールアドレスを PostgreSQL のテーブルに保存するランディングページをゼロから作る方法を学びたいです。作業環境は Mac で、できれば無料で Render にデプロイしたいと考えています。」
ChatGPT はいつも通り、やるべき手順を教えてくれました。
そこで最初のタスクは、その指示を読み、自分自身が開発者として納得できるものだけを実行することです。
あまりしっくりこない指示は無視し、代わりに他の情報源を調べたり、自分自身の知識や経験を活かしたりするつもりです。
まず、Homebrew をインストールする必要がありますが、すでにインストール済みなので、次に以下のコマンドで PHP をインストールする必要があります。
brew install php
私の Mac は次のメッセージを表示して文句を言いました。
次のステップは、Composer をインストールすることです。
brew install composer
次のステップは PostgreSQL をインストールすることですが、私はすでに Mac 用の Postgres App でインストール済みです。参考：https://postgresapp.com/
次のステップは、すでにある landing-page フォルダの中に新しい Laravel プロジェクトを作成することです。そこで、
composer create-project laravel/laravel .
このコマンドを実行すると、現在のディレクトリに新しい Laravel プロジェクトが作成されます。
ただ、私の環境ではすでに README ファイルや .git ディレクトリが存在していたため、Laravel がうまく動かずエラーが出ました。
そこで見つけた解決策は、一時的なフォルダにプロジェクトを作成し、その後ファイルを landing-page フォルダに移動する方法でした。
すべての準備が整った後、進捗を保存するためにリポジトリに変更をプッシュしました。
そして、簡単なテストとして、次のコマンドでローカル環境でプロジェクトを起動してみました。
php artisan serve
そして、成功しました！
次のステップは、ローカルにデータベースを作成し、.env ファイルの接続情報を更新することです。
私の場合、次のように作成しました。
DB_CONNECTION=pgsql
DB_HOST=127.0.0.1
DB_PORT=5432
DB_DATABASE=landing_db
DB_USERNAME=postgres
DB_PASSWORD=プロジェクトがローカルのデータベースに正しく接続できているかを確認するために、次のマイグレーションコマンドを実行する必要があります。
php artisan migrate
そして、データベースにテーブルが正常に作成されることが、私たちが目指す結果です。
ローカルのデータベースを操作するために、私は PgAdmin4 を使っています。
ここまでは順調です。
これからメールアドレスを保存するための新しいテーブルを作成したいので、新しいマイグレーションファイルを作成するコマンドは次の通りです。
php artisan make:migration create_leads_table –create=leads
これでファイルが作成されるはずです。
その後、少し修正して「email」カラムを追加したいと思います。
「email」カラムを含む新しいマイグレーションファイルを保存したら、データベースにその新しいテーブルを反映させるために、次のコマンドを実行する必要があります。
php artisan migrate
それが実行されれば、データベースが更新されるはずです。
次のステップは、新しいテーブルとやり取りするためのモデルを作成することです。
そのために、次のコマンドを実行します。
php artisan make:model Lead
そして、作成したファイルを編集して、マッピングしたいカラムを次のように追加します。
次に、フロントエンドからのリクエストを受け取るためのコントローラーを用意したいと思います。
これらのリクエストは、メールアドレスを保存するためのものです。
そのため、Laravel では次のコマンドを実行します。
php artisan make:controller LandingController
そして、作成したファイルを次のように編集します。
次に、ユーザーがウェブページ上でメールアドレスを送信できるようにするため、Blade のビューを作成したいと思います。
ビューは次のようになります。
次に、プロジェクトが HTTPS リクエストを受け取り、現在保存されているメールアドレスを返したり、新しいメールアドレスをデータベースに登録できるようにするため、ルートを更新したいと思います。
Laravel では、このファイルを編集する必要があります。なお、ここではコントローラーの関数をマッピングしています。
以上で完了です。
次は、機能をテストするために再度プロジェクトを実行し、ブラウザでアクセスしてみます。
すると、次のような画面が表示されるはずです。
そして、メールアドレスを入力して送信すると、リクエストが送られ処理され、最終的には次のようにデータベースにメールアドレスの新しいレコードが作成されます。
次のステップは、このプロジェクトをオンライン上に公開し、実際のユーザーが操作できるようにすることです。
私はデプロイのさまざまな選択肢を試したいと考えており、まず簡単で無料のオプションとして Render.com を試すことにしました。
（参考：https://render.com/）
Render には PostgreSQL データベース用の無料プランがあり、Laravel プロジェクトのデプロイも無料で行えるため、最初の選択肢としては良さそうです。
私はアカウントを作成し、GitHub のプロジェクトを Render に連携させ、Docker、entrypoint.sh、そして render.yaml ファイルを Laravel プロジェクトに追加しました。
これらのファイルで、Render にプロジェクトのデプロイ方法を伝える形になります。
entrypoint.sh には、マイグレーションを実行するための手順も含めています。
Render のフローはとても直感的で、データベース用の環境変数の入力を求められます。
今回は Render の PostgreSQL データベースを使用し、内部 URL を使って認証情報を設定しました。
以下、新たに追加したファイルの参考例です。
https://github.com/EdgarGGamartgo/landing-page/blob/main/render.yaml
https://github.com/EdgarGGamartgo/landing-page/blob/main/Dockerfile
Render の環境変数に、もう一つ重要なものとして APP_KEY を追加する必要があります。
ローカルのプロジェクトでは、以下のコマンドを実行したいと思います：
php artisan key:generate –show
生成された文字列は、APP_KEY の値として使用する必要があります。
また、メールアドレスを安全に送信できるようにするために、このファイルも更新する必要があります。
これで完了です！
これで、オンライン上でランディングページが表示され、メールアドレスを保存できるようになりました。
https://laravel-landing-55re.onrender.com/
次回は Hostinger へのデプロイについてレビューする予定です。
読んでいただき、ありがとうございました！！
One response to “Laravel と Render を使って、メールアドレスをデータベースに保存するシンプルなランディングページを作成する”
Hi
LikeLike