Rapid Prototyping Template

このリポジトリは、Web アプリケーションの検証やプロトタイピングを迅速に行うためのテンプレートです。

概要
Rapid Prototyping Template の利用方法
今後の展望
- 私に協力してくれる方

概要

このテンプレートは、概念検証（PoC）の開発を迅速に進めるための最小限の構成を提供します。

ビジネスアイデアの UX ブループリント PoC の開発を加速させるために最適化されています。

是非あなたの考えたビジネスアイデアの検証に利用してください。

Rapid Prototyping Template の想定利用者

Web サービスを活用したビジネスアイディアの PoC を今すぐ試したい方
即座にプロトタイプや UX ブループリントが必要な方
これらの開発を担当するプロジェクトマネージャーやエンジニアの方

IT の新規ビジネスに存在する課題

IT の可能性は無限大であり、日本では国を挙げてのデジタルトランスフォーメーション（DX）や IT 活用が推進されています。

IT を活用したビジネスでは、アイデアを素早く形にし、ソリューションを検証するスピードが成功の鍵です。

しかし、プロトタイピングの作成とはいえ Web アプリケーション開発には違いがないため、一定の技術的な難しさと時間とコストがかかり、それが新規ビジネスの最初の壁となります。

そこで、アイデアを即座に実証できるテンプレートを用意することで、新規ビジネスの助けになれば良いと思い、このレポジトリを公開しました。

このような OSS 活動や私の活動に興味がある方は本 README.md の下部にある「私に協力してくれる方」も目を通してください。

使用技術

Next.js: 昨今のフロントエンドのトレンドと汎用性の高さから Next.js を利用しています。別のフロントエンドフレームワークでも代用可能です。
AWS（Amazon Web Service）: Amazon の提供する信頼性と拡張性に優れたクラウドコンピューティングサービスです。開発されるアプリケーションは全て AWS のリソースで動かします。
GitHub Actions: GitHub の提供するワークフロー自動化ツール。Next.js のビルドとビルド成果物を S3 にアップロードするのに利用します。
Terraform: IaC（Infrastructure as Code）と呼ばれるツールの一種で、インフラの構成をソースコードとして管理できる機能

Rapid Prototyping Template のアーキテクチャ

graph LR
    dev[開発者] -- "git push" --> gh[GitHubリポジトリ]
    gh -- "GitHub Actions" --> build[Next.jsビルド]
    build -- "index.htmlをアップロード" --> s3[Amazon S3]
    client[クライアント] -->|アクセス| cf[CloudFront]
    cf -->|Basic認証| s3[S3バケット]
    s3 -->|オブジェクト| objects[index.html]

開発者はローカルで Next.js アプリケーションを開発して、push します。
クライアントは手元の PC やスマホから CloudFront の URL へとアクセスします。
CloudFront の URL は Basic 認証を求められます。
Basic 認証は CloudFront Function で実装しています。
GitHub Actions は Next.js のビルドと S3 へのアップロードをします。

Rapid Prototyping Template の利用方法

アカウント準備

まずは作成するプロトタイプがユーザのニーズを満たすこと、すなわち PSF（Problem Solution Fit）へと導く"やる気"こそが重要となります。

あなたの利用する AWS アカウントを用意し、AWS CLI を使えるようにしてください。

【AWS】aws cli の設定方法 | Zenn

Terraform コマンドがそのアカウントに向けて実行できるようにしてください。

また、Node の実行環境（npm が利用できれば OK）と Make コマンドが実行できるようにしてください。

インフラ準備

コードをクローンしましょう。

$ gh repo clone okmtdev/rapid_prototyping_template

最初に Terraform でインフラを準備します。

Basic 認証はデフォルトでユーザ名が「user」、パスワードが「password」になっています。

変更したい場合はinfrastructure/cloudfront.tfの Basic 認証の設定値 authString 行目を修正してください。

$ cd infrastructure
$ terraform init
$ terraform plan

コンソールにはterraform planにより実行計画が出力されているはずです。

AWS リソースを作成するために以下を実行します。

$ terraform apply

数分で AWS リソースが作成されるはずです。

AWS コンソールにログインして確認してみましょう。

S3 のバケットが作成されています。

CloudFront が作成されています。CloudFront の URL を確認しておきましょう。

GitHub Actions の準備

クローンしたコードを自分の GitHub Repository に push してください。

GitHub Actions で利用する環境変数を設定していきます。

【AWS】aws cli の設定方法 | Zenn のように ACCESS_KEY を取得したら、GitHub Repository の Settings -> Secrets and variables -> Actions で出てくる Repository secrets のエディターでAWS_ACCESS_KEY_ID と AWS_SECRET_ACCESS_KEYを設定してください。

また、AWS コンソールの S3 のパネルからバケット名を確認し、それをAWS_S3_BUCKETに設定してください。

アプリケーション開発

make コマンドを使って初期化してください。

2 つほど質問されると思うので、それに回答してください。

$ make init
npx create-next-app prototype --ts --eslint --experimental-app --src-dir --use-npm --app
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
Creating a new Next.js app in /Users/okmt/plays/kifu/rapid_prototyping_template/prototype.

Tailwind を利用する方は Tailwind の質問にYesにしてください。

次の default import alias の質問はYesにすることを推奨します。Yesとした場合、次の質問はsrc/*と入力することをお勧めします。

これで prototype ディレクトリに Next.js の初期ファイルが生成されたと思います。

prototype/next.config.jsで nextConfig が{}となっていると思うので、それを以下のように修正します。

const nextConfig = {
  output: 'export',
}

まずは初期コードのまま push するということで、以下のように行なってください。

$ git add prototype
$ git commit -m "add application code"
$ git push

GitHub Actions の deploy job が動いていることを確認してください。

deploy job が成功すると s3 バケットに Next.js のビルド成果物がアップロードされているはずです。

CloudFront の URL にアクセスすると、Basic 認証が現れるはずです。CloudFront の URL は CloudFront のページで確認できます。

デフォルトでユーザ名が「user」、パスワードが「password」になっています。

ここまでアプリケーションコードを修正していなければ、Next.js の初期画面が index.html として出てくるはずです。

あなたの Rapid Prototyping Template は正しく動いています。

では、開発を始めましょう！あとは好きなコードを書いて push するだけです。

infrastructure ディレクトリの説明

Terraform に関するソースコードが配置されています。

─ infrastructure
  ├── cloudfront.tf # CloudFront のTerraformコード
  ├── main.tf # Terraform の設定ファイル
  └── s3.tf # s3 のTerraformコード

.github ディレクトリの説明

.github/workflows/deploy.yml にビルドとデプロイの設定が記述されてます。

GitHub Actions の Job は下記のような流れで実行されています。

graph LR
    checkout[Checkout] --> setup[Setup node]
    setup --> install[Install Dependencies]
    install --> build[Build]
    build --> deploy[Deploy]

make init で失敗する場合

create-next-app の実行が失敗したようです。

npm コマンドは以下のバージョンで動作することを確認しています。

$ node -v; npm -v
v21.2.0

10.2.3

もしバージョンが異なる場合は npm のバージョンを合わせて実行してみてください。

インストールできる npm のバージョンの確認は以下のように行います。

$ npm view npm versions

バージョンを指定してインストールする方法は以下の通りです。

$ npm install npm@${version}

npm、Next.js のバージョンが上がった場合にも対応できるようにメンテナンスを行いたいと考えております。

今後の展望

このテンプレートは、コミュニティのフィードバックを積極的に取り入れ、改善を続けていきます。

新しい技術やツールの統合、ドキュメントの充実など、ユーザーの皆様からのご意見を反映させていくことで、より使いやすく、効率的なプロトタイピングプロセスを実現することを目指しています。

フィードバックやバグを報告いただける場合は、是非 issue に追加してください！

また、本レポジトリは Web アプリケーションにフォーカスしていますが、Flutter を利用したモバイルアプリ版なども作成したいです。

Rapid Prototyping Template を使用して、あなたのビジネスアイディアを今すぐ形にしましょう。このテンプレートが、イノベーションの旅における強力な一歩となることを願っています。

私に協力してくれる方

このプロジェクトはオープンソースであり、コミュニティの協力によって成長していきます。

また、私たちは常に共に新しいことに挑戦し続ける仲間を探しています。

もし私たちに興味が沸いた方、お話だけでも聞きたいという方は okmtdev@gmail.com まで連絡いただけるとさいわいです。

okmtdev / rapid_prototyping_template

readme