ねこの人格を持った AI とお話できるサービスの Web フロントエンド
18 系の最新安定版を利用する。
asdf などを使ってバージョン管理を出来るようにするのがオススメ。
参考までに Mac に asdf をインストールして Node.js のバージョン管理をしていた時の記録を貼っておく。
以下を参考に導入する。
以下でコマンドをインストールする。（グローバルインストールで良い）
npm i -g vercelインストール環境後に vercel を実行する。
以下のような選択肢が出るので認証方法を選択してログインを行う。（GitHub で登録しているケースが多いと思う）
? Log in to Vercel
● Continue with GitHub
○ Continue with GitLab
○ Continue with Bitbucket
○ Continue with Email
○ Continue with SAML Single Sign-On
─────────────────────────────────
○ Cancel
正常にログインが終わるとセットアップしてデプロイを行うかを聞かれるので以下のように回答しながら初期化する。
> Success! GitHub authentication complete for [email protected]
? Set up and deploy “~/gitrepos/ai-cat-frontend”? [Y/n] y
? Which scope do you want to deploy to? nekochans
? Found project “nekochans/ai-cat-frontend”. Link to it? [Y/n] y
デプロイが開始される。（Preview 環境が作られる）
デプロイが正常に完了すれば Vercel CLI のセットアップは完了。
ローカル環境で動作させる為に必要な環境変数を取得する。
以下のコマンドを実行。
vercel env pull .env.localローカル環境に .env.local が存在する場合は以下のようなメッセージが出る事があるが上書きしてしまって問題ない。
? Found existing file ".env.local". Do you want to overwrite? [y/N] y
これで開発に必要な環境変数が .env.local に展開される。
環境変数が増える度にこのコマンドの実行が必要になるので開発環境が正常に動作しない場合はこの手順を再度実行してみると良い。
以下を実行する。
npm run dev以下の URL でアクセスが可能です。
GitHub 上にコミットが行われる度に Preview 環境の URL が発行されます。
本番環境に関しては main ブランチにマージされる事でデプロイが実施されます。
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent