はじめに

自分が開発したwebアプリを誰かに見てもらいたいときや使って欲しいときがあると思います。せっかく作ったので、どうせならデプロイしちゃいましょう！

近年いろんなデプロイサービスが提供されており、無料枠の制限もさまざまです。無料枠でデプロイしてしばらく経ったとき、気づいたら課金されてしまっていることも...

今回は私が普段使っているデプロイサービスやクラウドサービスを紹介したいと思います。

若干個人的観点に寄っているところがあるので、ご指摘あればコメントで教えてください！お願いします！

1. GitHub Pages

GitHubが提供する静的Webホスティングサービスです。リポジトリのプロジェクトがそのままデプロイされるので、めっちゃ簡単です。基本無料で利用できます。

基本的にHTML & CSS & JavaScriptを使ったフロントエンドをデプロイする際に優秀です。React, Vueでビルドしたものもデプロイ可能です。

2. Render.com

フルスタック対応のクラウドホスティングサービスです。こちらもGitHubリポジトリを紐づけることで、リポジトリのプロジェクトをそのままデプロイできます。こちらは無料＆有料プランがありますが、無料でも非常に自由度が高いです。

技術枠がめちゃくちゃ幅広いデプロイサービスです。唯一の難点は15分間ノーアクセスでスリープされる機能ですが、これはAWS LambdaとAWS EventBridgeを使うことで解決できます。 真似しないように。

また、ホスティングサービスなので、今回紹介している中では唯一Socket.ioを組み込めるサービスになります。ぜひ活用してください。

3. Vercel

Next.jsの開発元が提供しているフロントエンド向けに設計されたクラウドプラットフォームです。こちらもGitHubリポジトリを紐づけることで、リポジトリのプロジェクトをそのままデプロイできます。こちらは基本無料です。

こちらは対応技術に書いてあるような、同一の言語（JavaScriptやTypeScript）を使ったフレームワークのデプロイに適しています。

Next.jsやNuxt.jsはReactやVueを使ったフロントエンド、API Routerを使ったバックエンドを同じプロジェクト内で実装できるフレームワークです。Next.jsはReact、Nuxt.jsはVueに対応しています。

さらに注意して欲しい点は、API Routerのリクエストデータの上限が4MGという点です。これに引っかかるケースとしては、画像や動画などのファイルデータの送信があります。

多少リスクはありますが、フロントエンド側で送信先の外部サーバのクライアントを作成し、フロントエンド側でファイルデータを送信すれば解決できます。

import { S3Client, PutObjectCommand } from '@aws-sdk/client-s3';
import { getSignedUrl } from '@aws-sdk/s3-request-presigner';

/// Reactの場合、コンポーネント内でクライアントを作ってあげる ///
const s3 = new S3Client({
  region: 'ap-northeast-1', // AWS東京リージョン
  credentials: {
    accessKeyId: process.env.AWS_ACCESS_KEY_ID, // AWSのアクセスキー
    secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY, // AWSのシークレットキー
  },
});

/// 以下コンポーネント ///
export default function ComponentName() {
    // ...
    const putFileToS3 = () => {
        const command = new PutObjectCommand({
            Bucket: bucketName, // バケット名
            Key: filename // ファイルの保存先プレフィックス
          });
        
        const url = await getSignedUrl(s3, command);
    }
    ///...
    
    return (
        // ...
    )
} 

4. AWS S3

AWS（Amazon Web Service）が提供するクラウドストレージサービスです。イメージとしてはGoogleDrive、OneDriveに近いです。ファイルデータ（オブジェクト）を保存することができるのは同様ですが、バケットごとにURLを割り当てることができるため、HTMLにオブジェクトURLを割り当てることでURLを介してHTMLを見ることができます。

こちらも料金が発生しますが、保存容量が5GBを少し超えるぐらいでやっと1円/月なのでとても安価です。また、AWS CloudFrontと併用することで、独自ドメイン + HTTPS対応が可能となり、さらに高速かつ安全なWebサイトを構築できます。

5. AWS Lambda - Serverless（中級者向け）

AWS Lambdaとは

AWS（Amazon Web Service）が提供するサーバー不要でソースコード関数を実行できるサービスです。要は特定のソースコードをここに登録しておけば、外部からLambdaのAPIを叩いたり、他のAWSサービスと連携したりして同じソースコードを好きな用途で使うことができます。

こちらには毎月無料枠と使用量に応じた有料枠が課せられますが、月100万回の実行+さらに32,500回でようやく1円を超過するレベルなので本当にスズメの涙です。

Serverless Frameworkとは

アプリケーションをLambdaの関数として扱い、サーバーレスアプリケーションを簡単に構築・デプロイ・管理できるフレームワークです。使用するには専用のCLIをインストールする必要があります。こちらは基本無料です。

こちらはバックエンドのデプロイに適しているサービスですが、CLIの扱い方など背景理解が必要な点がいくつかあり、初心者には少し難しい印象です。

しかし前に紹介したようなデプロイサービスより大きな制限もないので中規模のアプリケーションにおすすめです。

また、AWS APIGateWayでのパスルーティングやAWS DynamoDBとのデータベース連携にも対応しているのでインフラをAWSで完結できる点は大きいです。

6. AWS ElasticBeanstalk（おまけ）

AWS（Amazon Web Service）が提供するアプリケーション自動デプロイ＆運用管理サービスです。AWS EC2という仮想サーバーサービスを使ってプロジェクトのファイルを.zipに圧縮してアップロードするだけで自動的にアプリケーションをデプロイしてくれるサービスです。使用するには専用のCLIが必要になります。

こちらはrender.comのように対応する技術幅の広いサービスですが、CLIの扱い方など背景理解が必要な点がいくつかあり、初心者には難しいです。

AWS EC2への直接的なデプロイも可能ですが、初心者にはとても難しいため、AWS EC2へチャレンジしようという方は初めに触っていると良いのではないでしょうか。

また、AWS EC2はAWS Lambdaのような実行回数ではなく、使用時間に応じて料金が課せられるため、高額になりやすいケースがあります。新規AWSアカウント作成から12ヶ月以内 & 最も小さいサーバモデル（t2.micro）なら月750時間以内の稼働なら無料ですが、それ以降は月1000円弱かかります。

しかしその分、他AWSサービスとの連携や、カスタムドメインの割り当て、SSH認証にも対応しておりかなり実践的にインフラを構築できます。難易度の高い領域へのチャレンジに投資しても良いかもしれません。

まとめ：フロント、バックおすすめの組み合わせ

今回は私がいろいろ比較検証した結果、ローコストでデプロイが実現できるサービスを紹介しました。ご参考までに。

以上紹介したものを組み合わせることで、いろんな選択肢が見えてくると思います。最後にざっくりまとめておきます。

フロントエンド

• スピード重視ならGitHub Pages、凝りたいならAWS S3 + AWS CloudFrontで最適化してみよう
• Next.js、Nuxt.jsは軽量なバックエンドも構築できる点が有能
• Reactの場合、create-react-appは非推奨のためViteがおすすめ

バックエンド

• Pythonでは、機械学習アルゴリズムやライブラリを導入するならRender.com、軽量APIならAWS Lambda - serverlessがおすすめ
• Render.comはsklearnなどの重量系ライブラリに対応できる
• Pythonで型を補完するライブラリにはpydanticがおすすめ

• expressやhonoでのバリデーションライブラリはzodなどがおすすめ

まとめ

今回は私がいろいろ比較検証した結果、ローコストでデプロイが実現できるサービスを紹介しました。ご参考までに。