概要
シンプルなWebUIとWebAPIを連携させて、1つのシステムとして動作するか確認してみます。
前提
- 環境
- macOS
- Gitインストール済み（macOS標準インストール）
- その他
- シンプルなWebUIが実装済みであること
- シンプルなWebAPIが実装済みであること
準備
ここでは完成品をgithubからcloneして利用する方法を紹介しますが、自分で開発したものを利用してもらっても全く問題ありません（むしろそっちの方がいいです）。
cloneから起動まで
WebAPI
先にWebAPIから準備・起動させます。
まずは、git clone。
cd
git clone https://github.com/bluecode-jp/simple-api-node.git
次に、プログラムのディレクトリに移動し、必要なパッケージをインストールして起動させます。
cd simple-api-node
npm install
node index.mjs
Server start.と表示されればひとまずOKです。
Server start.
WebUI
次にWebUIを準備・起動させます。
git cloneします。
cd
git clone https://github.com/bluecode-jp/simple-web-vanilla.git
起動（表示）させます。
ここでは、動作確認用のserveというパッケージを利用しています。
cd simple-web-vanilla
npx serve .
以下のように表示されたら、Local: のところのURLを利用してアクセスしてみてください。
┌──────────────────────────────────────────┐
│ │
│ Serving! │
│ │
│ - Local: http://localhost:3000 │
│ - Network: http://192.168.1.11:3000 │
│ │
│ Copied local address to clipboard! │
│ │
└──────────────────────────────────────────┘
3000番ポートを他のプログラムが利用してる場合は、自動的に別のポート番号が利用されます。
動作確認
API連携の確認
Contactページに移動して、フォームに値を入力して「問い合わせる」ボタンを押してみてください。
受け取り保存しました
と、alertダイアログが表示されればOKです。
サーバと通信できませんでした。:Failed to fetchとなった場合はエラーです。原因を調査して対応しましょう。
これで、WebUIとWebAPIを連携させた1つのシステムが完成しました！
文字通りシンプルなシステムですが、この範囲でもしっかり学習すれば実務応用できる知識のベースができますので、何回も繰り返し学習してみてください。
後片付け（オプション）
- 起動した各アプリは必要に応じてCtrl + Cかターミナルを閉じて終了させてください。
- cloneしたディレクトリは削除してもらっても問題ありません（必要ならまたcloneすればよいので）
- rm -rf simple-web-vanilla
- rm -rf simple-api-node
検証
CORSエラーを発生させてみる
API側でCORSエラーには対応済みですが、あえてエラーを起こして動作を確認してみましょう。
長いIT業界人生で数度は出くわすので。
まず、simple-api-nodeにてVSCodeを起動し、index.mjsのCORS関連箇所をコメントアウトすればOKです。
10行目付近からのCORS対応内容をコメントアウトします。
// CORS対応
// app.use((req, res, next) => {
// res.setHeader("Access-Control-Allow-Origin", "*");
// res.setHeader("Access-Control-Allow-Methods", "*");
// res.setHeader("Access-Control-Allow-Headers", "*");
// if (req.method === "OPTIONS") return res.sendStatus(200);
// next();
// });
既にindex.mjsを起動中の場合は、Ctrl + Cで一度プログラムを停止し、node index.mjsで再起動してください。
コメントアウトした状態で、お問い合わせフォームからデータを送信してみてください。エラーとなるはずです。
このとき、ブラウザの開発者ツールをCommand + Option + Iで開き、Consoleでエラーを確認すると下記のようになっているはずです。
簡単に説明すると、
- http://localhost:50781 というオリジンからのアクセスはCORSポリシーによりブロックされた
- Access-Control-Allow-Originに関するHeader情報が無いのでチェックしろ
的なことが書かれています。今のあなたなら意味は理解できるかと思います。
今後、エラーで「Origin」という言葉が出てくるエラーに出くわしたなら、「CORS絡みだな」と思うようにしてください（そして対応してください）。
いちおう基本学習範囲での知識チェック用課題を用意しましたので、ストレスにならない範囲で見てみてください。
Discussion