Tesseract.jsとReactでOCRコミュニケーションアプリを作る（後編）

読む所要時間: 8 分

October 30, 2021

執筆者

Stephenie Minami Nakajima

Twilion

レビュー担当者

Mitsuharu Nakamura

Twilion

Aya Shiomi

Twilion

Tesseract.jsとReactでOCRコミュニケーションアプリを作る（後編）

本稿は前編と後編に分かれており、前編ではプロジェクトのセットアップからフロントエンドの構築までを、後編ではバックエンド側の構築と動作検証についてご紹介いたします。
前編はこちら：Tesseract.jsとReactでOCRコミュニケーションアプリを作る（前編）

前編では、以下のOCRコミュニケーションアプリケーションのフロントエンドを構築しました。続いて、バックエンドを構築しましょう。

バックエンドを構築する

次に、バックエンドを構築します。

プロジェクトのルートディレクトリに.envとserver.jsファイルを作成してください。

まずは、Twilioの認証情報を.envファイルに格納します。

テキストエディタで.envファイルを開き、以下のコードをペーストしてください。

TWILIO_ACCOUNT_SID=XXXXX
TWILIO_AUTH_TOKEN=XXXXX
TWILIO_PHONE_NUMBER=XXXXX

XXXXXの文字列は、Twilioの認証情報のプレースホールダーを表しています。

TWILIO_ACCOUNT_SIDとTWILIO_AUTH_TOKENは、Twilio ConsoleからAccount SIDとAuth Tokenを取得し、XXXXXにペーストしてください。Account SIDとAuth Tokenの取得方法について詳しくは、ヘルプセンターの「Account SIDとAuthTokenの確認方法」を参照してください。

TWILIO_PHONE_NUMBERは、Twilioから取得した電話番号をE.164形式でXXXXXにペーストしてください。

ファイルを保存してください。

次に、Node.jsサーバーを作成します。プロジェクトのルートディレクトリにserver.jsファイルを作成してください。

テキストエディタでserver.jsを開き、以下のコードをペーストしてください。

require("dotenv").config()

const express = require("express")
const app = express()
const port = 5000

app.use(express.json())

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

このコードでは、dotenvとexpressライブラリをインポートし、Expressをインスタンス化します。

サーバーのポートを5000に設定します。

本稿では、create-react-appをローカル環境で使用しているため、http://localhost:3000/をすでに使用しています。このため、3000以外のポートを指定します。

ローカル環境で開発しているSPA（シングルページアプリケーション）で、フロントエンドからバックエンドのAPIサーバーにリクエストを送ると、同一オリジンポリシーに違反し、サーバーにアクセスできないことがあります。

本稿では、http://localhost:3000/をフロントエンドに、http://localhost:5000/をNode.jsサーバーに使用するため、同一オリジンポリシーの問題が生じます。

これを防ぐため、package.jsonにproxyを追加します。

package.jsonをテキストエディタで開いてください。以下のコードをファイルに追加してください。

"proxy": "http://localhost:5000",

ファイルを保存してください。
これにより、http://localhost:3000/に対するリクエストで、Acceptヘッダーがtext/html以外のリクエストがすべてhttp://localhost:5000/にプロキシされます。

次に、Twilioの認証情報を環境変数から取得します。server.jsを再度テキストエディタで開いてください。
app.useのブロックと、app.listenのブロックの間に、以下のコードをペーストしてください。

// Twilioの認証情報
const accountSid = process.env.TWILIO_ACCOUNT_SID
const authToken = process.env.TWILIO_AUTH_TOKEN
const fromPhoneNumber = process.env.TWILIO_PHONE_NUMBER
const client = require("twilio")(accountSid, authToken)

最後に、SMSを送信するためのエンドポイントを設定します。Twilioの認証情報のブロックの下に、以下のコードをペーストしてください。

// リクエストで受け取った電話番号とテキストをもとにSMSを送信する
app.post("/send-sms", (req, res) => {
  client.messages
    .create({body: req.body.text, from: fromPhoneNumber, to: req.body.to})
    .then(message => {
      res.json({ sid: message.sid })
    })
    .catch(() => res.sendStatus(500))
})

このコードでは、フロントエンドから/send-smsにHTTP POSTリクエストが送信されると、新しいTwilioクライアントインスタンスを作成します。このクライアントを使って、リクエストに含まれるtoプロパティに指定された電話番号宛てに、textプロパティに指定されたメッセージをSMSで送信します。

server.jsの全コードは、Githubリポジトリを参照してください。

これで、サーバー側の準備が完了しました。