Zenn
🚀

🔥高速デプロイを実現！『SwiftDeploy』をリリースしました！🔥

2024/12/21に公開
Python
React
Vercel
記事投稿コンテスト「今年の最も大きなチャレンジ」
tech

1.はじめに

プロジェクトの背景と目的🚀

「もっと簡単にwebページを作成したい。」「webサイトの制作が終わった時の気持ちって最高。」そんな思いから生まれたのがこのSwiftDeployです。スプレッドシートを活用し、直感的にコンテンツを入力するだけで即座にデプロイされたwebサイトが生成されるこのアプリは、開発者だけでなく非技術者にも活用できる柔軟なツールを目指しています。

使用した技術スタック⚒️

  • バックエンド: FastAPI
  • フロントエンド: React
  • デプロイ管理: Vercel
  • データ管理: Google Sheets API
  • その他: Framer Motion (アニメーション)

アプリケーションの概要💡

SwiftDepoyでは以下の機能を提供しています。

  • スプレッドシートを使ったデータ管理
  • 入力されたデータから自動でwebサイトを生成
  • サイトを即座にデプロイし、共有可能なURLを所得

2.機能と構造の概要

アプリの主な機能⭐️

  • スプレッドシート連携
    入力されたデータをGoogle Sheetsに保存・管理
  • 自動webサイト生成
    入力内容に基づき、HTMLテンプレートを作成
  • デプロイの自動化
    vercelを使用して数秒でwebサイトを公開

アプリ構造のフローチャート🧊

graph TD;
    A[フォーム入力] --> B[データ送信 (バックエンド)]
    B --> C[Google Sheetsに保存]
    B --> D[HTML生成 & Vercelデプロイ]
    D --> E[デプロイ完了 & URL取得]

3.実際のコードの説明👨‍💻

バックエンド:FastAPIの役割と実装

1.Google Sheet APIのセットアップ
Google Cloudのサービスアカウントを使用して認証を行い、スプレッドシートにアクセスします。

from googleapiclient.discovery import build
from google.oauth2.service_account import Credentials

SCOPES = ['https://www.googleapis.com/auth/spreadsheets']
SERVICE_ACCOUNT_FILE = 'path/to/credentials.json'

credentials = Credentials.from_service_account_file(
    SERVICE_ACCOUNT_FILE, scopes=SCOPES
)
service = build('sheets', 'v4', credentials=credentials)

2.データの追加
以下のコードで、フォーム入力内容をスプレッドシートに保存します。

def append_data(spreadsheet_id, range_name, values):
    body = {'values': values}
    service.spreadsheets().values().append(
        spreadsheetId=spreadsheet_id,
        range=range_name,
        valueInputOption='RAW',
        body=body
    ).execute()

3.HTML生成とデプロイ
入力データに基づいてHTMLファイルを生成し、Vercelにデプロイします。

def deploy_to_vercel(output_dir):
    result = subprocess.run(
        ["vercel", output_dir, "--prod", "--yes"],
        capture_output=True,
        text=True
    )
    if result.returncode == 0:
        return result.stdout.splitlines()[-1]
    raise Exception("デプロイ失敗")

フロントエンド:Reactを使用したフォーム構築

入力画面は特に執筆することがないので割愛します♡

アニメーション: Framer Motion
スムーズな画面遷移を実現しました

<motion.div
  initial={{ opacity: 0 }}
  animate={{ opacity: 1 }}
  exit={{ opacity: 0 }}
  transition={{ duration: 0.5 }}
>
  {/* コンテンツ */}
</motion.div>

4.完成したアプリの結果🎩

デプロイされたwebサイトはこちらです。SwiftDeploy

5.今回得た学びと展望👀

学んだこと

  • Google APIを活用したデータ管理の効率化
  • Vercelを使用した自動デプロイ機能の開発方法
  • PythonとJavaScriptの統合方法

今後の改善点

  • ユーザー認証機能の実装
  • テンプレートのバリエーションの増加
  • 入力フォームのUXの向上

最後に

🌟SwiftDeployはまだ進化の途中です！！！今後も改善を重ねてさらに便利なツールになるように努めていきます！読者の皆様のフィードバックをお待ちしております！！🤩

Discussion