クモのようにコツコツと

フロントエンドエンジニア イイダリョウの技術ブログ。略称「クモコツ」

ローカル→Sourcetree→GitHub→Herokuに同期する方法(黒い画面不要!)

全国一千万人(?)の黒い画面に不慣れの皆さん、こんばんは。ここ最近、Webデザイナーがより気軽にサーバサイド言語に触れる方法を模索しておりましたが、ようやくキタコレ的な方法にたどり着けました。クラウドサービス「Heroku」です。一般的にHerokuの利用は黒い画面(コマンドライン)を叩く必要があります。が、ひとまずGUIだけで始めることができたのでご紹介!

【目次】

Herokuに至る道

前々回、Laravelなどで作るWebサービスの公開方法を検討し、下記の2つに絞り込みました。

  • 共用サーバの仕様をSSH接続できるプランにあげる
  • PaaSのHerokuの無料枠を使う

※参考:Webサービスを公開するためのサーバ仕様比較(VPSとクラウドサービス) - クモのようにコツコツと

そして前回、サーバサイド言語をもっとCodePenばりに気軽にブログに埋め込みたく、「オンラインIDE」を検討しました。結果「Paiza.io」がブログに埋め込むにの一番適していると感じました。

※参考:ブログに埋め込めるオンラインIDE比較(サーバサイド版のCodePenを探して) - クモのようにコツコツと

その後、さっそくPHPコードを書いてみましたが、問題がありました。

ページロード時のPHPの実行までは問題ないのですが、フォームの送信ボタンを押したときに$_GET$_POSTが想定通りに動きませんでした(たとえば$_GETなのにURLにクエリパラメータがつかない、など)

そこで、いっそのことクラウドサービス「Heroku」にPHPファイル公開してブログにリンクしよう、と考えたわけです。(無料で始められる分、サーバの仕様アップよりも気軽に感じました)

ローカル→Heroku同期の手順

いろいろ調べた断片的な情報をつなぎ合わせたらコマンドラインを使わずにローカル→Herokuにデ同期を実現できた。このような手順になります。

  • GitHubのリポジトリ作成
  • GitHub→ Sourcetreeにクローン(複製)
  • ローカル→Sourcetreeにコミット(更新)
  • Sourcetree→GitHubにプッシュ(反映)
  • GitHub→Herokuにデプロイ(本番環境を作る)

環境の準備

まず、「GitHub」のアカウントがない場合はアカウントを作ります。(GitHubはバージョン(履歴)管理ができるWebサービスです)

※参考:GitHubアカウント作成とリポジトリの作成手順 - Qiita

「SourceTree」をインストールしていない場合はインストールします。(SourceTreeはGUIでローカル環境からGitHubにプッシュするソフトです)

※参考:https://glatchdesign.com/blog/web/tools/770

ローカルサーバ環境がない場合はインストールします。MAMP、XAMPPなど。(今回はMAMP環境を前提に進めます)

※参考:【Mac】MAMPでPHPの環境構築を行う - Reasonable Code

※参考:【OS XにPHP開発環境作成】 XAMPPをインストールする時のポイント | たけのこブログ

「Heroku」のアカウントがない場合はアカウントを作ります。(Herokuはクラウドサービス(PaaS)です)

※参考:Herokuアカウントの新規作成方法 | プログラミング入門ナビ

GitHubのリポジトリ作成

以前の記事で行なった手順と同じです。

※参考:ブラウザ上だけでお手軽GitHub体験(リポジトリの作成と変更) - クモのようにコツコツと

今回は「test_php」というリポジトリ名にしました。READMEも作ります。

※参考:GitHub - ryo-i/test_php

Sourcetreeにクローン(複製)

次にSourcetreeにリポジトリをクローン(複製)します。こちらも以前の記事と同じ手順です。

※参考:GitHubとSourcetreeでGitHub Pagesとローカルファイルを同期させる - クモのようにコツコツと

ローカルサーバ、MAMPのファイルのパスは下記です。

http://localhost:8888/

その下にtest_phpというディレクトリを作り、GitHubと紐付けます。

http://localhost:8888/test_php/

すると、このファイルの中にGitHubのリポジトリ上にあったREADMEファイルがクローンされます。

ローカルサーバでPHPファイルを作成

このディレクトリ内にPHPファイルを作成します。

※参考:【Mac】MAMPでPHPの環境構築を行う - Reasonable Code

ひとまずHerllow World的な内容にしました。

<!doctype html>
    <html>
    <head>
   <meta charset="UTF-8">
   <title>PHP test</title>
   </head>
    
    <body>
        <h1>PHP TEST</h1>
        <?php echo "<p>はろーPHP</p>"; ?>
    </body>
    </html>

PHPの基本書式についてはこちら。

※参考:PHPの基本を理解するためにJSと比較する - クモのようにコツコツと

なお、ファイル名はindex.phpにしてください。別のファイル名にしたところ、Herokuにデプロイしたときにうまく表示されませんでした。

※参考:PHP - 【heroku】PHPで作ったファイルをインターネットに公開したい|teratail

ローカル→Sourcetreeにコミット(更新)→GitHubにプッシュ(反映)

ファイルを作成するとSourcetreeの「コミット」アイコンに印がつきますので、変更内容をコミット(更新)します。
そすると「プッシュ」アイコンに印がつきますので、GitHubにプッシュ(反映)します。

以前の記事と同じ手順ですね。

※参考:GitHubとSourcetreeでGitHub Pagesとローカルファイルを同期させる - クモのようにコツコツと

ちなみにこの状態で「GitHub Pages」を試しに表示してみましたが、やはりPHPのページは表示されませんでした。静的ページ専用のサービスですね。

※参考:test_php

GitHub→Herokuにデプロイ(本番環境を作る)

いよいよ、GitHubからHerokuにデプロイします。

この記事の手順で行なたところ、

※参考:heroku 初級編 - GitHub から deploy してみよう - - Qiita

  • 「Create new app」をクリック
  • 「App name」入力(https://App name.herokuapp.comになる)
  • リージョンを「United States」に
  • 「Create app」押す
  • 「Deploy」タブ開く
  • Deployment methodを「GitHub」に
  • 「Connect to GitHub」クリック→「Authorize heroku」
  • 「repo-name」へリポジトリ名を入力し「Search」
  • 「Connect」
  • 「Enable Automatic Deploys」をオン(自動デプロイに)

成功しました!!こんな画面です。

f:id:idr_zz:20190120214644j:plain

記事の後半で「手動デプロイ」および「自動デプロイ」の方法を書いてあります。

ローカル上でindex.phpを修正すると…

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>PHP test</title>
</head>

<body>
    <h1>PHP TESTですと</h1>
    <?php echo "<p>はろー、PHP</p>"; ?>
    <p>こんなんでました。</p>
</body>
</html>

GitHub→Herokuに自動的にデプロイされました!感動!!

f:id:idr_zz:20190120214939j:plain

デプロイしたページはこちらです!

※参考:PHP test

最後に

ということでローカルにあるハローワールド的なphpファイルをGitHub経由でHerokuに同期させました。黒い画面を叩かずに実現する方法です。

「こいつ動くぞ」をいち早く体験するのはモチベーションにつながります!ここをスタート地点に、黒い画面にも徐々に触れていきたく思います。

PHPで今後はやっていきたいことは下記です。

  • 基本的なフォームの動き($_GET$_POSTなど)を取り入れたPHPコンテンツを作る。
  • PHP、CSS、JS、データベースなど複数のファイルを連携したコンテンツを作る。
  • PHPフレームワークLaravelを使ったWebサービスを作っていく。

完成物はHerokuにデプロイしてリンクで貼りたく思います。

個人的にはデザイン、フロント、サーバサイドそれぞれ「クラウド3種の神器」を手に入れた気分でとってもワクワクしています!

それではまた!


※参考:Web開発環境の記事まとめ
qiita.com