IT

【第1弾】PHP+Apache+PostgresDBで開発したWEBアプリをHerokuにデプロイするまで

はらじょ

タイトルの通りWEBアプリ開発に挑戦してみたので、開発の記録を残します。

私自身あまり開発経験がなく、「動くWEBアプリをDB使って作る練習でもしてみるか~」って感じで始めたので難しい開発はしていません。

環境はWindows10です。
開発初心者の方は同じような手順で開発し、WEB上に公開できると自信につながると思います。

~開発STEP~

  1. ローカル環境を構築
  2. DBなしで動くクイズアプリを開発
  3. いったんHerokuにデプロイ
  4. DBとアプリを接続
  5. HerokuでPostgresDBを立ち上げ接続する。

 

①ローカル環境を構築(PHP, Apache, Postgres, A5M2, Git, Sourcetree, VScode)

まずは、開発環境を整えていきます

「(インストールしたいソフトや言語) インストール」で検索して構築しましょう。

私はもともとVScodeとGitはWindowsに入っていたので、それ以外をインストールしました。

私が参考にしたサイトのリンクを載せておきます。

PHP+Apache
Postgres
A5M2
SourceTree

PHP+Apacheの構築が詰まりやすいです。
私がハマったところはこちらにまとめています。

 

②DBなしで動くクイズアプリを開発

PHP初心者でも簡単!『3択クイズ』Webアプリを作ってみよう!のサイトを参考にしながら、自分の環境でアプリが動くところまでやりました。

このアプリをたたき台にして、自分で応用していく作業こそが重要なので、サイト上で公開されているソースコードをほぼコピペしました。

自分でデザインや機能を修正するときにサイトの中身は見ていくとより勉強になります。

 

ちなみにPHPの文法はこの段階で何も知りません。

このサイトにも書いてあるように、文法の勉強⇒アプリ開発といくのではなく、最初から成果物を作ってしまったほうがプログラミング学習においては近道だと考えています。
(不安な人や基礎から固めたい人は文法から学習しても良いでしょう。ドットインストールProgateがおすすめです。)

SourceTreeでバージョン管理がしやすいように、コードを書き始める前にhtdocsフォルダに.gitファイルを置いておきましょう。

具体的な手順としては、わかばちゃんのgitの本を参考にしました。

本買うのはちょっとな..って人は、ネットで “sourcetreeでの新規リポジトリの作り方” を調べて、htdocsフォルダをリポジトリ作成先に指定してあげればよいです。

 

③いったんHerokuにデプロイ

ここまでで、自分のPCでアプリが動くようになったと思います。

これだけでもすごいですが、せっかくならweb上で公開しましょう!
Herokuという無料のサービスを使用します。

 

Qiitaのサイトを参考にherokuにデプロイします。
本記事で使うpostgresSQLはherokuで無料かつクレジットカード登録なしで使用できます。

多くの場合デプロイ時にcomposer.jsonがないと怒られるので、htdocsフォルダ配下に空ファイルのcomposer.jsonを作成しておきましょう。

ちなみに、Sourcetreeでプッシュ先にherokuのリンクを設定しておくと、Sourcetreeからherokuにデプロイすることができ便利です。

どうでしょう。
Web上で自分が開発したアプリが動いたでしょうか?

せっかくなので家族や友達にURLを共有してみても良いですね。きっと「すごい!」と言ってくれます。

 

次は第2弾で、これらをやっていきます。

4. DBとアプリを接続
5. HerokuでPostgresDBを立ち上げ接続する。

 

大規模なシステムやアプリは必ずDB(=データベース)を使用しています。

第2弾まで読んでいただき、自分で開発することができれば、一気に成長できます。

ABOUT ME
はらじょ
はらじょ
ITエンジニア
記事URLをコピーしました