SuccessDomino

プロジェクト概要

SuccessDominoは、小さなチャレンジを提案するアプリケーションです。

セットアップ方法

GitHub

git config --local commit.template ./.gitcommit_template  
git config --global core.editor 'code --wait'

フロントエンド

cd frontend
npm install
npm run serve

バックエンド

cd backend
npm install
echo "OPENAI_API_KEY=your_openai_api_key" > .env
npm start

test

ローカル環境でVueアプリケーションをテストするためには、以下の手順に従ってください。

1. Vue開発サーバーの起動

フロントエンドプロジェクトディレクトリに移動します。

cd frontend

必要な依存関係をインストールします。

npm install

開発サーバーを起動します。

npm run serve

これで、開発サーバーが起動し、通常はhttp://localhost:8080でアプリケーションにアクセスできます。

2. Netlify Functionsのローカルテスト

Netlify CLIを使用して、Netlify Functionsをローカルでテストできます。

プロジェクトのルートディレクトリに戻ります。

cd ..

Netlify CLIをインストールします。

npm install -g netlify-cli

Netlify Devサーバーを起動します。

netlify dev

Netlify Devサーバーは、フロントエンドアプリケーションとバックエンドのNetlify Functionsをローカルで提供します。通常、http://localhost:8888でアプリケーションにアクセスでき、バックエンドAPIも同時にテストできます。

3. 環境変数の設定

netlify devを使用する際には、環境変数を設定する必要があります。Netlifyではnetlify.tomlファイルに設定できます。

netlify.tomlの例:

[build]
  functions = "backend/functions"

[[headers]]
  for = "/*"
  [headers.values]
    Access-Control-Allow-Origin = "*"

[dev]
  command = "npm run serve"
  port = 8888
  targetPort = 8080

[context.production.environment]
  OPENAI_API_KEY = "your_openai_api_key"

ローカル環境では、.envファイルに設定できます。

.envの例:

OPENAI_API_KEY=your_openai_api_key

4. VueアプリケーションでAPIリクエストを行う部分の設定

VueアプリケーションのAPIリクエスト部分は、Netlify Devサーバーが起動しているときに、ローカルのNetlify Functionsを呼び出すようにします。

frontend/src/components/ChallengeForm.vueを次のように更新します。

<script>
import axios from 'axios';

export default {
  data() {
    return {
      role: '',
      goal: '',
      notes: '',
      challenge: ''
    };
  },
  methods: {
    async handleSubmit() {
      try {
        const response = await axios.post('/.netlify/functions/generate-challenge', {
          role: this.role,
          goal: this.goal,
          notes: this.notes
        });
        this.challenge = response.data.challenge;
      } catch (error) {
        console.error('Error generating challenge:', error);
      }
    }
  }
};
</script>

テスト

以上の手順で、ローカル環境でアプリケーションの動作を確認できます。開発サーバーを起動し、ブラウザでhttp://localhost:8888にアクセスして、アプリケーションが正しく動作するかをテストしてください。

コマンドまとめ

フロントエンド依存関係のインストールと開発サーバーの起動:

cd frontend
npm install
npm run serve

プロジェクトのルートディレクトリに戻り、Netlify CLIのインストールとNetlify Devサーバーの起動:

cd ..
npm install -g netlify-cli
netlify dev

ブラウザでhttp://localhost:8888にアクセスして動作確認。

これでローカルでVueの表示とAPIのテストができます。

Amorphouse / success-domino

readme