5.7 開発時の Proxy この状態で、 frontend ディレクトリの下で、 yarn generate を実行してください。 public に静的ファイルが生成されているはずです。 この状態で、 http://locaIhost:3000/ を見ると、 Rails の初期画面ではなく、 Nuxt の画 面が表示されるはずです。その上で、 /api/vl/ping にもアクセス可能なことを確認して ください。これで、 1 レポジトリで Rails の上で Nuxt で生成した SPA を動かすことがで きました。 5.7 開発時の Proxy 本番では : 3000 / でホスティングされた SPA から、 : 3000 / api ヘリクエストが送られま す。ドメインが同じなので特に考慮は不要です。 開発時は、 Nuxt がポート 3333 で立ち上がるため、 : 3333 / から : 3000 / api ヘリクエスト を送る必要があります。これを解決するため、 Nuxt の proxy モジュールを使用します。 さっそく設定を編集してますが、今後 js での API のコールに axios 、 1 を使用するので この段階で追加しておきます。また、 cross ー env * 2 も追加しておきます。 マリスト 5.8 axios, proxy, cross-env $ cd frontend $ yarn add @nuxtj s/axios @nuxtj s/proxy $ yarn add ——dev corss—env frontend/package. json に NODE_ENV の指定を加えます。 ▽リスト 5.9 "dev" frontend/package. json " cross—env NODE_ENV=deve10pment HOST=O . 0.0.0 PORT = 3333 nuxt " frontend/nuxt. config. js で proxy の有無を切り替えます。 マリスト 5.10 frontend/nuxt. config. js 、 1 https://github.com/axios/axios 、 2 https://github.com/kentcdodds/cross-env 45

第 5 章 Nuxt on RaiIs const config = { //module. exports modules : [ '@nuxtjs/axios ー '@nuxtj s/proxy = から修正 if (process . env. NODE—ENV 'development つ { config. proxy = { '/api' lhttp: / / 10Ca1 五 ost : 3000 ー module . exports config 5.8 Proxy の動作確認 設定した proxy の動作確認を行います。、 uxt 、 Rails それぞれのサーバーを起動して おきましよう。 トップページ (pages/index. vue) に、 p ⅲ g ボタンを配置してクリックしたらコンソー く button class="button is—primary" @c1ick="ping">Ping く /button> マリスト 5.12 frontend/pages/index. vue <template> co Ⅱ sole. log(ret) C011St ret await this . $axios . $get (' /api/vl/ping') async ping() { return this . $authO . isAuthenticated() ; loggedln ( ) { methods : { export default { リスト 5.1 1 frontend/pages/index. vue く script> ルに API を叩いた結果を吐き出すようにしてみます。 く /div> く /section> く /template> 実装できたら、「 Ping 」ボタンをクリックしてみましよう。 「 Pong 」と返ってくれば成功です。 46 プラウザのコンソールに

第 6 章 Knock による認証 く button class="button is—primary" @cIick="ping">Ping く /button> く button class="button is—danger" @c1ick="securedPing">Secured Ping く /button> く /div> く /section> く /template> リスト 6.14 frontend/pages/index. vue く script> く script> methods : { async securedPing() { const ret = await this . $axios . $get(' /api/vl/secured—ping { headers : { Authorization: 'Bearer 、 + this. $authO. getldToken() } } ) console . log(ret) く /script> 本来はもっときれいにヘッダを設定すべきですが、とりあえす動かすならこれでよいで しよう。ログインして、 SecuredPing ボタンをクリックしてみましよう。コンソールログ に結果が吐き出されるはずです。 [ IR ] connected イ me 雪 ag を : "pong"} {message: 、は D : わ 5 リ日 : 9000 ~ に一 0 」 ut わ 2 は 1064518634261 / 94752 " ) 図 6.2 Nuxt から SecuredPing △ 6.8 まとめ ・ RaiIs に認証機能を導入するために Knock を入れました ・ Auth0 から発行された idToken を用いて認証必須の API をコールしました 54 プリケーションを開発していきましよう ! ないかと思います。実装の解説はこれにて終わりですが これにて認証から API アクセスまでを実装できました。ざっと雰囲気が掴めたのでは こまでの内容をベースに、ア