React と Google Cloud を使用して信頼性の高いクラウド アプリケーションを構築する方法

React と Google Cloud を使用して信頼性の高いクラウド アプリケーションを構築する方法

現在、クラウド アプリケーションは最新のソフトウェア開発における重要なトレンドになっています。クラウド サービスを活用すると、アプリケーションに高い信頼性、拡張性、パフォーマンスの利点を提供できます。この記事では、React と Google Cloud を使用して信頼性の高いクラウド アプリケーションを構築する方法と、具体的なコード例を紹介します。

1. 準備

ビルドを開始する前に、次の条件が満たされていることを確認する必要があります:

1. Node.js と npm
# をインストールする##Google Cloud アカウントを作成し、新しい Google Cloud プロジェクトを作成します

2. React アプリケーションを作成します

create-react-app コマンドライン ツールを使用して、新しい React 適用:

1. npx create-react-app cloud-app
   cd cloud-app

Google Cloud SDK のインストール:

2. npm install -g @google-cloud/sdk

Google Cloud SDK の構成:

次のコマンドを実行します。

gcloud init

プロンプトに従って、アカウントのログインとプロジェクトの選択を完了します。

3. Google Cloud Storage を使用してファイルを保存する

Google Cloud Storage は、ファイルの保存とアクセスに使用できる強力なクラウド ストレージ サービスです。 React アプリで Google Cloud Storage を使用する手順は次のとおりです。

@google-cloud/storage パッケージをインストールします。

1. npm install @google-cloud/storage

新しい Cloud Storage インスタンスを作成し、バケットの名前 (バケット) を設定します:

2. const { Storage } = require('@google-cloud/storage');
   const storage = new Storage();
   const bucketName = 'your-bucket-name';

ファイルをバケットにアップロードします:

3. const uploadFile = async (file) => {
     const blob = storage.bucket(bucketName).file(file.originalname);
     const blobStream = blob.createWriteStream();
     
     blobStream.on('error', (error) => {
       console.log(error);
     });
     
     blobStream.on('finish', () => {
       console.log('File uploaded successfully!');
     });
     
     blobStream.end(file.buffer);
   };

4. Google Cloud を使用します。 Pub/Sub メッセージング

Google Cloud Pub/Sub は、アプリケーション間で信頼性の高いリアルタイムのメッセージ交換を可能にする、信頼性とスケーラブルなメッセージング サービスです。 React アプリで Google Cloud Pub/Sub を使用する手順は次のとおりです:

@google-cloud/pubsub パッケージをインストールします:

1. npm install @google-cloud/pubsub

新しい Pub/Sub インスタンスを作成します:

2. const { PubSub } = require('@google-cloud/pubsub');
   const pubsub = new PubSub();
   const topicName = 'your-topic-name';
   const subscriptionName = 'your-subscription-name';

新しいトピック (トピック) を作成します:

3. const createTopic = async () => {
     const [topic] = await pubsub.createTopic(topicName);
     console.log(`Topic ${topic.name} created.`);
   };

トピックにメッセージをパブリッシュします:

const publishMessage = async (message) => {
  const dataBuffer = Buffer.from(message);
  const messageId = await pubsub.topic(topicName).publish(dataBuffer);
  console.log(`Message ${messageId} published.`);
};

新しいサブスクリプションの作成 (サブスクリプション):

5. const createSubscription = async () => {
     const [subscription] = await pubsub.topic(topicName).createSubscription(subscriptionName);
     console.log(`Subscription ${subscription.name} created.`);
   };

サブスクリプション メッセージの受信:

6. const receiveMessage = async () => {
     const subscription = pubsub.subscription(subscriptionName);
   
     const messageHandler = (message) => {
       console.log(`Received message: ${message.data}`);
       // 处理消息
       message.ack();
     };
   
     subscription.on('message', messageHandler);
   };

上記の方法React と Google Cloud を使用して信頼性の高いクラウド アプリケーションを構築するための簡単な紹介とコード例です。 Google Cloud Storage と Google Cloud Pub/Sub サービスを使用すると、React アプリケーションがデータを保存および転送できるようになり、より強力なアプリケーションの機能とパフォーマンスを実現できます。

この記事がお役に立てば幸いです。また、信頼性の高いクラウド アプリケーションを構築できることを願っています。

以上がReact と Google Cloud を使用して信頼性の高いクラウド アプリケーションを構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。