vercel-mcp

作者の氏名とメールアドレス

• Bragi Arnarson
  • ([email protected])

プロジェクトの説明

このプロジェクトは、ウェブサイト smlileyco.in の改良版です。

改良版のウェブサイトには、トップページが1つとサブページが5つあります。

サブページは次のとおりです。

• Introduction（SmileyCoin について詳しく説明します）
• Get started（SmileyCoin を入手する方法をいくつか説明します）
• Wallets（ウォレットを選びます）
• Coin and mining information（コインとマイニングに関する詳細情報です）
• Details（smileycoin の詳細です）

トップページには、ほかのサブページへのリンクを含むヘッダーと、SmileyCoin の価格をリアルタイムで取得する「live price tracker」があります。次のサイトを利用して実装しました：https://min-api.cryptocompare.com/ また、トップページには SmileyCoin に関する主な情報を掲載し、@smileyCoinNews の Twitter ニュースフィードも追加しました。

こちらをクリックすると、ウェブ上で実行中のプロジェクトにアクセスできます。

ページの構築には React の JavaScript ライブラリを使用しました。

Github pages へのデプロイ

このサイトは、このリポジトリの gh-pages ブランチから Github pages を通じてホストされています。 リポジトリを更新するには、次のコマンドを実行します。

npm run build
npm run deploy

#構成

project
│   README.md
│       
│
└─── src
    │   
    │
    └─── components (mainly main page)
    |  │   index-about
    |  │   index-coin
    |  │   ...
    |  
    └─── routes (pages)
       |  about
       |  coininfo
       |  getstarted
       |  home
       |  wallets

各ページコンポーネントには、HTML コードと必要なスクリプトを含む js ファイルと、スタイルシート（scss ファイル）があります。

プロジェクトの実行方法

NodeJS のダウンロード

https://nodejs.org/en/

ターミナルで node -v と npm -v を入力して、インストールを確認します。

依存関係のインストール

プロジェクトフォルダーに移動し、 npm install と入力すると、必要なパッケージがすべてインストールされます。

React

このプロジェクトは、Create React App を使用して作成されました。

利用可能なスクリプト

プロジェクトディレクトリでは、次のコマンドを実行できます。

npm start

アプリを開発モードで起動します。
ブラウザーで http://localhost:3000 を開くと、アプリを表示できます。

編集を行うと、ページが再読み込みされます。
コンソールには、リンターのエラーも表示されます。

npm test

テストランナーを対話型のウォッチモードで起動します。
詳細については、テストの実行に関するセクションをご覧ください。

npm run build

アプリを本番環境向けにビルドし、build フォルダーに出力します。
React を本番モードで正しくバンドルし、最高のパフォーマンスが得られるように最適化します。

ビルドはミニファイされ、ファイル名にはハッシュが含まれます。
アプリをデプロイする準備が整いました！

詳細については、デプロイに関するセクションをご覧ください。

npm run eject

注意：この操作は元に戻せません。一度 eject すると、元には戻せません！

ビルドツールや設定の選択に満足できない場合は、いつでも eject を実行できます。このコマンドを実行すると、プロジェクトから単一のビルド依存関係が削除されます。

代わりに、すべての設定ファイルとその依存関係（Webpack、Babel、ESLint など）がプロジェクトにコピーされ、完全に制御できるようになります。eject 以外のコマンドは引き続き動作しますが、コピーされたスクリプトを参照するようになるため、必要に応じて調整できます。この時点からは、ご自身で管理することになります。

eject を使う必要はありません。厳選された機能セットは、小規模から中規模のデプロイに適しているため、この機能を使う必要はありません。ただし、必要なときにカスタマイズできなければ、このツールは役に立たないことも理解しています。

詳細情報

詳しくは、Create React App のドキュメントをご覧ください。

React を学ぶには、React のドキュメントをご覧ください。

本番環境でサーバー上に（静的）プロジェクトを実行する方法の一例

1. npm run build でプロジェクトをビルドする

アプリをビルドすると、build フォルダーが作成されます。お使いのデバイスでビルドしてから、build フォルダーをサーバーに移動できます。

2. pm2 をグローバルにインストールする

sudo npm install -g pm2

3. ない場合は、package.json ファイルの scripts に次のデプロイスクリプトを追加します

deploy": "pm2 start ./server.sh --name yourAppName",

4. 次に、package.json と同じディレクトリに実行可能な server.sh を作成します：

echo "Serving yourAppName!"
serve -s build #(serve -s build -l 80) for deploying on port 80

次のコマンドを実行して、server.sh を実行可能にすることを忘れないでください：

chmod +x server.sh

5. 次のコマンドを使用してアプリをデプロイします：（sudo が必要な場合があります）

npm run deploy

6. サーバーを起動時に自動起動する方法については、こちらをお読みください：http://pm2.keymetrics.io/docs/usage/startup/

その他のセットアップ方法

• https://create-react-app.dev/docs/deployment