はじめに
今回はRenderやFly.io、Herokuなどのデプロイ先がありますが、学習中の身だけどアプリを作ってみたい、費用は抑えたい。そんな私がネット上の記事だけを頼りにデプロイしてみたGlitchについてGitHubとの連携までの過程を紹介したいと思います。
Glitchについての参考記事
プラン日本語訳内容
初期設定段階では無料のスタータープランとなっています。
スタータープラン
無料
Glitchの基本機能を無料で始めましょう。直感的なコードエディタにより、開発環境の準備が整います。
- プロジェクトとコードはデフォルトで公開されています
- 5分間操作がないとスリープするフルスタックアプリ
- 常時稼働する無制限の静的サイト
- GitHubのインポート/エクスポートとPrettierのサポート
プロプラン
月額 $8（年間請求）
無料プランのすべての機能に加えて、プライベートプロジェクトやより速いブーストアプリなどの追加機能があります。
- プライベートプロジェクトでより多くのコントロールが可能
- すべてのアプリに対するアクセス制御
- 常時稼働する最大5つのブーストされたフルスタックアプリ
1：登録
・トップページ右上「sign up」から登録に進めます
・Githubでアプリ管理しているならこちらを選ぶのが一番楽
まずHello Glitch nodeで新しいプロジェクトを作成
プロジェクト作成ボタンを押すと👇次のようにすでにトップページのようなページが作成された状態。かついくつかのファイルが生成されていることが確認できます。
この後、Glitchで新しく作成したプロジェクトとGitHubを連携させる為、事前にサイドバー＞Seetings＞Edit Project detailsで名称変更（自分が作成するアプリ名にするとわかりやすい）しておきます。
※Githubとの権限設定？
Glitchで該当のプロジェクトに移動
下のバー？にあるTOOLS＞Import and export＞Grant accessを選択
👇Grant accessの日本語訳
「GlitchからGitHubへプロジェクトをエクスポートするために、あなたのGitHubリポジトリへのアクセス権を付与してください。」
ボタンを押した段階では、アクセス権の付与を実行しただけでGlitchで作成したプロジェクトはGithubに反映されていない。
GitHubへのExpotはおそらくデフォルトでPrivate設定となっています。
2：Git HubのCreate a new repositoryであらかじめExport先のリポジトリを準備しておく
ステップ1: GitHubでリポジトリを作成する
-
GitHubにログイン:
- GitHubにアクセスして、アカウントにログインします。
-
新しいリポジトリを作成:
- GitHubの画面右上にある「+」ボタンをクリックし、「New repository（新しいリポジトリ）」を選択します。
-
リポジトリ名を入力:
- 「Repository name（リポジトリ名）」に、あなたが作成したいリポジトリの名前を入力します。例えば、「myproject」。
-
「README.md」を自動生成:
- ページの下のほうに「Initialize this repository with a README（このリポジトリをREADMEで初期化）」というチェックボックスがあります。これにチェックを入れます。
- このオプションを選ぶことで、GitHubが自動的に「README.md」というファイルを作成してくれます。
-
リポジトリを作成:
- 「Create repository（リポジトリを作成）」ボタンをクリックします。
これで、リポジトリが作成され、最初のファイル「README.md」が自動的に含まれる状態になります。
ステップ2: GlitchからGitHubにエクスポートする
-
Glitchで「Export to GitHub」:
- Glitchのプロジェクトページに戻り、Toolsを押すとサイドバーに表示される「Export to GitHub」ボタンをクリックします。
-
GitHubリポジトリ名を入力:
- 先ほど作成したGitHubリポジトリの名前を
user/repoの形式で入力します。ここで、userはあなたのGitHubユーザー名、repoは作成したリポジトリ名です。例えば、GitHubユーザー名がexampleuserで、リポジトリ名がmyprojectなら、exampleuser/myprojectと入力します。
- 先ほど作成したGitHubリポジトリの名前を
-
エクスポートを実行:
- 「OK」または「Export」ボタンをクリックすると、GlitchプロジェクトがGitHubリポジトリにエクスポートされます。
- エクスポートが成功したら右上にExport Successfulという文字が現れます
-
GitHubでも確認:
- 3を実行した後GitHubで作成した同名のリポジトリでは「glitch had recent pushes 3 seconds ago」というような文字が表れているはず。そして「Compare&Pull request」のボタンも表れているかと思います。
- おなじみのpull requestボタンを押しComfarm mergeまで行うことでGlitchのファイル内容などがGit Hub上に反映されます（Git Hubで作成したのはREADMEファイルだけだったのがGlitch側のファイルも合わさって表示される。すべてまとまる？）
おまけ
Glitchは一般的に簡単なWebアプリケーションの開発やホスティングに便利なプラットフォームですが、いくつかの制約があります。以下内容は私自身が違いをよく分かっていなくて調べた内容になります。同じような疑問を持っている方はぜひ一読してみてください。
1. GlitchとRails、Tailwind、Dockerについて
- Rails（Ruby on Rails）: GlitchではRailsを直接使用するのは難しいです。RailsはRubyという言語で動作しますが、Glitchは基本的にNode.js（JavaScript）をサポートしています。Rubyを使用するには別のプラットフォーム（例: HerokuやRender）が向いています。
- Tailwind CSS: GlitchではTailwind CSSを使ってフロントエンドのデザインをすることが可能です。ただし、Tailwind CSSのビルドプロセス（WebpackやPostCSSなど）を使う場合には手動でセットアップする必要があります。
- Docker: Dockerを使用することはGlitchではサポートされていません。Dockerは仮想環境を作成してアプリケーションを実行する技術ですが、Glitchではそのようなコンテナ技術は提供されていないため、他のプラットフォームで行うのが一般的です。
2. Node.jsについて
- Node.js: これはJavaScriptを使ったバックエンドのプラットフォームです。GlitchはNode.jsに特化しており、Node.jsでサーバーを作成することができます。Node.jsを使うことで、サーバーサイド（バックエンド）の処理やAPIを作ることができます。
3. Glitchは静的なサイトだけ？
Glitchは静的なサイト（HTML、CSS、JavaScriptをそのまま配信するだけのサイト）を簡単にホストするのに適しています。これを「静的なモノ」といいます。しかし、Node.jsのようなバックエンド技術を使って、動的な処理もサポートしています。ただし、RailsやDockerのようなより高度なバックエンドシステムはサポートしていません。
4. フロントエンドとバックエンドの違い
- フロントエンド: ユーザーが直接見る部分、つまりWebページのデザインやインターフェース（HTML、CSS、JavaScript）がフロントエンドです。これにはボタンやフォーム、レイアウトなどが含まれます。
- バックエンド: フロントエンドがユーザーの操作に応じてサーバー側で処理を行う部分です。例えば、ログインシステムやデータベースとのやり取りがバックエンドの役割です。GlitchではNode.jsを使ってバックエンドの処理を行うことができます。
Node.jsはRailsと異なる技術ですが、Glitchでは主にこのNode.jsを用いてフロントエンドとバックエンドの両方を作ることが可能です。
さいごにまとめ
はじめてアプリを作ってみたいけど、環境構築が難しそう。だけど、ほんとうに簡単な、1機能だけでもいいから自分でアプリというものを作ってみたい人。そんな方に是非触れてみてほしいＧｌｉｔｃｈというプラットフォームの紹介でした。
私自身まだ少ししか触れていないので、今後Ｇｌｉｔｃｈについての記事を増やす事ができればいいなと思っています。今回の記事が何か参考になれば幸いです。