Web

Glitch で PHP を使う方法

投稿日:2019年9月18日 更新日:

1. はじめに

Glitch は正式にPHPをサポートしていませんが、ほんの少しの設定変更により、PHPが使えるようになります。

2. 手順

(1) プロジェクトを作成します。

実際はどの雛型を使ってもよいのですが、ここでは「hello-webpage」を選択してプロジェクトを作成します。

(2) glitch.json ファイルを作成します。

[New File] ボタンを押して、glitch.json ファイルを新規に作成します。ファイルの中身としては、以下を入力します。

{
  "install": "composer install",
  "start": "php -S 0.0.0.0:8080",
  "watch": {
    "ignore": [
      "logs"
    ]
  }
}
  • php コマンドの -S オプションで、PHPのビルトインWebサーバーを起動しています。本来このWebサーバーは本番用として使うものではないので、あまりよいやり方ではありません。
  • PHPのビルトインWebサーバーは、index.php ファイルがあれば自動的に読み込んでくれます。

(3) composer.json ファイルを作成します。

[New File] ボタンを押して、composer.json ファイルを新規に作成します。ファイルの中身としては、以下を入力します。

{
    "require": {}
}

このファイルの存在は必須ではありませんが、ないと Logs 内に以下のメッセージが出力されます。

Composer could not find a composer.json file in /app
To initialize a project, please create a composer.json file as described in the https://getcomposer.org/ "Getting Started" section
[Tools] – [Logs] を開いたところ

(4) index.php ファイルを作成します。

[New File] ボタンを押して、index.php ファイルを新規に作成します。ファイルの中身としては、以下を入力します。

<?php
echo 'Hello!';

この時点で、プレビュー画面には index.php の出力内容が表示されます。

もちろん、Live App のURLにアクセスしても、PHPが出力した内容が表示されるはずです。

※ このとき、編集画面上に見えている index.html, script.js, style.ccs は 使っていません。

3. おわりに

ポイントは、

glitch.json ファイルの start プロパティで、お好みのWebサーバーを起動させることができる

という部分です。今回の方法で PHP を使うのは、正式にサポートされているわけではありませんが、この柔軟性の高さは Glitch の魅力の1つです。

※ 今回紹介した方法はあくまでテスト用途が目的であり、本番用では使用しないでください(参照:PHP: Built-in web server – Manual)。

📂-Web

執筆者:labo


comment

メールアドレスが公開されることはありません。

関連記事

Glitch

Glitch に DokiWiki を設置しようとして失敗しました

Glitch に DokuWiki を設置しようとしたのですが、残念ながら失敗してしまいました。ここにその記録を残しておこうと思います。

Google

【Google】アカウント無効化管理ツールの設定

Google の「アカウント無効化管理ツール」について説明します。

no image

Webサイトのスタイルガイド作成

参考 Webデザインのスタイルガイドの作り方 | UX MILK

Web

未ログイン状態で Facebook を開いた時に表示されるログインウィンドウを消す

目次1. Facebook の仕様変更?2. ブックマークレットの使い方3. 仕組み4. 注意点5. おわりに 1. Facebook の仕様変更? 未ログイン状態で Facebook のページを開く …

Web

JSFiddle を使って HTML/CSS/JavaScript をウェブページに埋め込む

JSFiddle というサービスを使って、ウェブページに HTML/CSS/JavaScript を埋め込んでみましょう。 目次1. JSFiddle とは?2. ウェブページに埋め込む手順(1) ア …