ブラウザ上でWebサーバーを作る
適当なWebサーバーを作りたいが、ローカルエディターで書いて、デプロイして〜みたいな流れがめんどうなのでブラウザで完結させたいと思っていた。
DiscordのBotを作ったりなどしたいが、VercelにAPIサーバーを作るのも面倒だし、ということで方法を模索していた。
結論としては render.com とGitHub Codespaces を使うことで簡単に実現できた。
個人的に定期的にこういう機会はありそうなので、メモがてら残しておく。
render.comとは
Render.comは、開発者と企業向けのクラウドベースのホスティングおよびデプロイメントプラットフォームです。このプラットフォームは、ウェブサイト、アプリケーション、データベース、バックエンドサービスなどのホスティングと管理を容易にするための一連のツールとサービスを提供しています。
以下は、Render.comの主な特徴と機能です：
簡単なデプロイメント: GitHubやGitLabなどのリポジトリと連携して、コードの変更を自動的に検出し、デプロイすることができます。
スケーラビリティ: アプリケーションの成長に合わせてリソースを簡単にスケールアップまたはスケールダウンすることができます。
マネージドサービス: データベース、キャッシュ、クロンジョブなどの一般的なバックエンドサービスを提供し、管理します。
セキュリティ: 自動的なSSL証明書の提供、DDoS保護などのセキュリティ機能が組み込まれています。
コラボレーション: チームメンバーとプロジェクトを共有し、共同作業するためのツールが提供されています。
モニタリングと分析: アプリケーションのパフォーマンスと使用状況を監視し、分析するためのダッシュボードとアラート。
プラグアンドプレイのインテグレーション: 一般的な開発ツールやサービスとの統合が容易で、開発プロセスをさらに効率化します。
Render.comは、開発からデプロイメント、運用に至るまでのライフサイクルをシンプルにし、迅速にすることを目的としています。多くの開発者や企業が、その使いやすさと効率性からRender.comを選んでいます。
Codespacesとは
Codespacesは、GitHubが提供する開発環境で、クラウド上で直接コードを書く、テストする、デバッグすることができます。開発者はローカルマシンに何もインストールすることなく、ブラウザから完全な開発環境にアクセスできます。
Codespacesは、特定のプロジェクトやタスクに必要な依存関係やツールを自動的にセットアップするため、新しいプロジェクトを始める際の障壁を下げます。また、異なるマシン間での開発環境の一貫性を保つのにも役立ちます。
以下は、Codespacesの主な特徴です：
クラウドベースのIDE: ブラウザから直接アクセスできる完全な開発環境。
プロジェクト固有の設定: プロジェクトごとにカスタマイズされた開発環境を提供。
リアルタイムのコラボレーション: チームメンバーとリアルタイムでコードを共有し、コラボレーションすることができます。
統合されたデバッグツール: ブラウザ内で直接デバッグが可能。
GitHubとのシームレスな統合: GitHubリポジトリと直接連携し、プルリクエストやイシューの管理が容易。
Codespacesは、リモートワークや分散チームでの開発を容易にし、開発プロセスを迅速化するための強力なツールです。
手順
https://github.com/codespaces/templates のCodespacesのテンプレート画面でExpressのテンプレートを選択する
エディターが立ち上がるので、適当に書き換えて、コミット、プッシュする
プッシュするとレポジトリが作成される
https://dashboard.render.com/ のrenderのダッシュボード画面から新規にWebServiceを作成する
Connect a repository というところに先ほど作ったレポジトリ名を入力
設定は下記のように入力
あとは勝手にデプロイがされるので待つ。
デプロイされるとURLが発行されるのでこれを使えばOK。
修正もCodespaces上で編集してコミット、プッシュすれば勝手にデプロイされるのでブラウザで完結でき非常に簡単にサーバーを作ることができた。
いやー便利になったもんだ。
おまけ
Codespaceの代わりにStackblitzを使っても良いかも。
テンプレートはこちらの方が豊富で良い。
