ReactとNode.js/MySQLを組み合わせてWebサイトを作る

こんちゃ洋梨🍐です。

今回はタイトルの通り「ReactとMySQL(Node.js)を組み合わせてWebサイトを作る方法」になります。

はじめに

今やWebアプリを作るとなったら「SPA」という選択肢が多いのではないでしょうか？

すると「React」を使うといった形になるかもしれません。

しかし、そうなったときに出てくるのがMySQLなどデーターベースと接続するときどうするか、サーバー側でしたい処理はどうするのか、といったことです。

そこで提案するのが、Node.jsでAPIサーバーを立てReactからAPIを使いアクセス、操作するといった方法です。

MySQLを使う

まずReactからMySQLを使う方法です。

今回は以下のようなテーブル(データー)を取得する例として作っていきます。

+-----------+-------+
| name      | score |
+-----------+-------+
| YounashiP |    95 |
| Koike     |    80 |
| Taro      |    30 |
+-----------+-------+

Node.JS+ExpressでAPIサーバーを立てる

まずはAPIサーバーを立てます。

よく紹介してるサイトではJavaScriptだと思いますが今の時代TypeScriptゆえそちらで簡単に書いていきます。

import Exp from "express";
import MySql from "mysql";

type TestData = {
    name: string
    score: number
}

const app = Exp();

const pool = MySql.createPool({
    host: "localhost",
    user : "user",
    database : "dbname",
});

const runQuery = <T>(query: string, values?: any): Promise<T[]|null> =>{
    return new Promise((x)=>{
        pool.query(query, values, (e, r)=>{
            if(e) x(null);
            else x(r);
        })
    })
}

app.get("/get",async(req, res)=>{
　　res.setHeader("Access-Control-Allow-Origin", "http://localhost:3000");//*1
    res.json({
        data: await runQuery<TestData>("SELECT * FROM testdata ORDER BY score DESC")
    })
})

app.listen(7070);

と、非常にシンプルなコードですね☻

なお、後述しますが*1部分は環境によって書き換える必要があります。

ReactでAPIからデータを取得

では次はReact側です。

const API_PATH = "localhost:7070"

type TestData = {
    name: string
    score: number
}

type APIResult = {
    data: TestData
}

const getDataFromAPI = async() => {
    const r = await fetch(API_PATH+"/get").catch(()=>null);
    if(r?.ok){
        const j = await r.json();
        return j as APIResult;
    }
    return null;
}

非常にシンプルですね☻

後はAPIサーバーを動かして、Reactからアクセスすれば完成です。

しかし、実はまだ終わりではありません。

クロスドメイン制約に引っかかる

ぴえん🥺

そうです。この手法、クロスドメイン制約(CORS)に引っかかります。

サーバー側のコード*1でそれを回避するコードを書いていますが、こちらはクライアントによって書き換える必要があります。

つまり、本番環境(~.comなど)とテスト環境(localhost)では異なり、それぞれに合った値を入力する必要があります。

例えば「abc.com」でサイトを公開する場合は*1もabc.comに書き換える必要があるということです。

ローカル環境で実行するときはChromeなどの起動オプションを使うことによって一時的に(テスト中は)回避することが出来るようにも可能です。

同じサーバーで実行する

さて、ここまでやってきたあなた。

「CORS対策めんどい」
「Access-Control-Allow-OriginでAPI使えるようにするのはなんかよくない気がする」
「APIもSSL対応するの普通に面倒じゃね？」

そう思う方もいると思います。

しかし、現状この方法で紹介しているサイトばかりだと思います。(当社調べ)

そこで新たに提案するのが

ApacheにWebサイトを設置し、「リバースプロキシ」を使い「/api」など決めたパス以下をAPIの結果を返すサーバーと接続するという手法です。

つまり上の例を用いると、

http://localhost:7070/get から http://localhost/api/get (http://localhost/でサイト表示)

での結果取得にすることで

Access-Control-Allow-Originの設定が不要、CORS制約にかからない、 SSLは引き継くといったいい感じにすることが可能です。

こちらの設定は比較的に簡単で、Apache構築後、設定で

  SSLProxyEngine On 
  ProxyRequests Off
  <Location /api>
    ProxyPass http://localhost:7070/ # 転送先(APIの接続先)
  </Location>

と書くだけです。楽ですね☻

※なお、この方法については今後別記事でもまとめようと思っています。

まとめ

React + Node.jsさいきょう☻

ここまで読んでくれてありがとうございました～^

ホームページでは他にも

・様々な記事や作った作品および過程
・ソースコード、素材ファイル
・あらゆる”モノ”の作り方

などなど随時、記事や作品を新規公開・更新していますので是非見ていってくださいね！見ていただけると本当に嬉しいです！

タグ: Apache, MySQL, Node.js, React