演習
今回も以下のリポジトリを元に演習を進めます
https://github.com/matumoto1234/sccp-example
前回から少し変更が入ったので、git pullで更新を反映させてください
# リモートリポジトリの変更をローカルリポジトリに反映させる
$ git pull git@github.com:matumoto1234/sccp-example.git
上記を実行し終えたら、以下のコマンドを実行してください
# Todoアプリのディレクトリに移動
$ cd lec09/todo-sample
# 必要なライブラリをインストール
$ npm install
# Todoアプリのページを立ち上げる
$ npm run dev
前回からの変更点
Todo の削除機能を追加しました
詳しくはAPI サーバーの仕様を見てください
内容の補足
今回の演習内容の補足を Q&A 形式で書いておきます
Q. 演習は具体的になにをすればいいですか？
A. 仕様に沿って API サーバーを作成し、Todo アプリを動かします
API サーバーの仕様 を参考に作成してください
この演習では Todo アプリを作成します
https://github.com/matumoto1234/sccp-example の lec09/以下には、todo-sample/ と todo-sample-backend/ という 2 つのディレクトリがありますが、それぞれフロントエンド側とバックエンド側の実装になっています
npm run devによって立ち上げた Todo アプリはlocalhost:8080の API サーバーを必要としています
その API サーバーを作るのが演習です
Q. Go の書き方がわからないのですが参考となる資料などはありますか？
A. サンプル実装を用意してあるのでこれを参考にしてみてください
API サーバーのルーティング処理(どのエンドポイントにどの処理を割り当てるのか)、CORS への対応なども含めて書いてあります
もちろん自分で記事を探して調べていただいて大丈夫です
Q. フロントエンド側のエラーを見たいのですが、どのようにすれば見れますか？
A. デベロッパーツールを使用すると良いです
Google Chrome などにはデベロッパーツールというものがあります
Web ページを開いた状態で F12 を押す、もしくは右クリックのメニューから「Inspect」を選択すると開けます
その後、「Console」タブを選択すると出ているエラーなどを見ることができます
Q. CORS エラーというのが出てしまいます。どのようにすればいいですか？
A. サーバー側でCORSに対応する処理を書きます
CORS(Cross-Origin Resource Sharing)というものがあり、「あるオリジンで動いているWebアプリケーションに対して、別のオリジンのサーバーへのアクセスをオリジン間HTTPリクエストによって許可できる仕組み」のことです
オリジンというのは、URLのプロトコルとドメインとポート番号を順につなげたものです
例. https://yahoo.co.jp:443
Webセキュリティのポリシーによっていくつか制限があり、それをCORSによって解消します
具体的には以下のレスポンスヘッダーを追加します
Access-Control-Allow-Origin: https://trusted-one.co.jp // 特定のサイトを許可する
Access-Control-Allow-Headers: "X-Requested-With, Origin, X-Csrftoken, Content-Type, Accept" // この辺は使うフレームワークにより異なるが許可するヘッダーを定義しておく。
参考