このリポジトリは、Web アプリケーションの検証やプロトタイピングを迅速に行うためのテンプレートです。
このテンプレートは、概念検証（PoC）の開発を迅速に進めるための最小限の構成を提供します。
ビジネスアイデアの UX ブループリント PoC の開発を加速させるために最適化されています。
是非あなたの考えたビジネスアイデアの検証に利用してください。
- Web サービスを活用したビジネスアイディアの PoC を今すぐ試したい方
- 即座にプロトタイプや UX ブループリントが必要な方
- これらの開発を担当するプロジェクトマネージャーやエンジニアの方
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） と呼ばれるツールの一種で、インフラの構成をソースコードとして管理できる機能
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 へのアップロードをします。
まずは作成するプロトタイプがユーザのニーズを満たすこと、すなわち PSF（Problem Solution Fit）へと導く"やる気"こそが重要となります。
あなたの利用する AWS アカウントを用意し、AWS CLI を使えるようにしてください。
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 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 するだけです。
Terraform に関するソースコードが配置されています。
─ infrastructure
├── cloudfront.tf # CloudFront のTerraformコード
├── main.tf # Terraform の設定ファイル
└── s3.tf # s3 のTerraformコード
.github/workflows/deploy.yml にビルドとデプロイの設定が記述されてます。
GitHub Actions の Job は下記のような流れで実行されています。
graph LR
checkout[Checkout] --> setup[Setup node]
setup --> install[Install Dependencies]
install --> build[Build]
build --> deploy[Deploy]
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 を使用して、あなたのビジネスアイディアを今すぐ形にしましょう。このテンプレートが、イノベーションの旅における強力な一歩となることを願っています。
このプロジェクトはオープンソースであり、コミュニティの協力によって成長していきます。
また、私たちは常に共に新しいことに挑戦し続ける仲間を探しています。
もし私たちに興味が沸いた方、お話だけでも聞きたいという方は [email protected] まで連絡いただけるとさいわいです。