学生でもwebサイト作って金稼ぎたい。(現在進行系)
こんにちは、Webサイト作ってお小遣い稼ぎしたいrkです。
プログラマーとして最近の日々を過ごしてきて、そろそろ自分でもなにか作ってお金稼ぎできたらな～ってことでwebサイト作ります。
なんの計画もなくダラダラ作ってると一生終わらないので
計画表+みんなの参考になれば、ってことで書いていこうかな。
以前までの取り組み
これまでは、生放送を自動で切り抜いて字幕をつける的なことをやってました(結構いい感じ)。プラスαでSNS運用的な事もやってたけどこっちはダメダメ。
最近は、超がつくほど暇な割に、動画の選定をして、動画を投稿してというのすらもかなり面倒くさくなったので、「一発でURLを入れたら動画の投稿までやってくれたら、なあ」って感じです。
今までの取り組みは以下のリンクからご覧ください：
切り抜きAI
SNSアカウント運用
とりあえずの目標
ここらへんは完全に自分用の計画書なので読み飛ばしちゃってください。
WebページはReact × FastAPIで開発。バックエンドが重たくなるため、GCPクラウドの利用を検討中。既にURLから動画の切り抜きまでのコードは完了しており、面白い部分を切り抜くための閾値設定、切り抜いた動画をTikTokに上げる設定を自動化したいと考えています。
作成方法
- GCP関係
- front
- backend
- deploy
GCP関係（過程１）
参考になりそうな記事
GCPでfront+backend
GCE + VScode開発
GCEで爆速AI環境構築
進め方
Cloudの説明書見たけどちょい面倒そうなので、sshでtunnelingしてVScodeからfrontとbackend作業したらめっちゃ楽だし使いやすくね、、、？
ってことでやっていきます。
1. GCPインスタンスの作成
- GCPコンソールにログインし、Compute Engine > VMインスタンスに移動。
- 新しいインスタンスを作成し、必要な設定を行います（GPUインスタンスを使用する場合は、適切なタイプを選択）。
ここでGPUプランを選択しようとしたら、無料プランでは使えないっぽい、、、
注意: インスタンスを作成する際におすすめで出てくるE2はまじで使い物にならないので別のにすること。
2. SSH鍵の設定
- ローカルマシンでSSH鍵を生成します（まだない場合）。
ssh-keygen -t rsa -f ~/.ssh/gcp_key -C "your_email@example.com" - 公開鍵 (
gcp_key.pub) をGCPインスタンスに追加します。
3. VS Codeの設定
- VS CodeにRemote - SSH拡張機能をインストールします。
- VS Codeでコマンドパレットを開き（Ctrl+Shift+P）、
Remote-SSH: Connect to Hostを選択します。 - SSH設定ファイルに以下のように記載します：
Host my-gcp-instance HostName YOUR_INSTANCE_IP User YOUR_USERNAME IdentityFile ~/.ssh/gcp_key - 設定後、
my-gcp-instanceを選択して接続します。
画面の左下にSSH：my-gcp-instanceと出たら成功！
front（過程２）
進め方
React×Typescript使ってどんどん進めていこかー、ってことで。
設計的には
MainPageの一枚にとりあえずの機能として、「urlいれる欄、完成動画のダウンロード、tiktockにあげる機能、最終的に切り抜く動画時間の設定」をつける、でいい感じかな？
reactのsetup
react環境構築で大体は学べるかと
とりあえずのページ
適当にfront作って、npm startして、localhost上でこんな感じかな？ってのはできた。
ちゃんとGCE動いてるのに感動。
要望あれば簡単なfrontのいじり方も解説します。
FastAPI側
参考に:pythonでweb apiを作ろう
localhostのurlの後ろに/docsをつけると実際のテストができるので便利
