Proxy - みる会図書館


検索対象: Auth0でつくる認証付きSPA
5件見つかりました。

1. Auth0でつくる認証付きSPA

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

2. Auth0でつくる認証付きSPA

第 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 プラウザのコンソールに

3. Auth0でつくる認証付きSPA

目次 4.2 AuthOLock を組み込む トークン管理 . 4.3 ログイン状態の判定 4.4 4.5 Auth0 API へのアクセス まとめ 4.6 第 5 章 Nuxt on RaiIs 1 つのリポジトリで管理する 5.2 ディレクトリ構成の変更 5.3 Rails の構築環境 5.4 Rails New 5.5 API を作成してみる 5.6 Nuxt の出力先を変更する 開発時の Proxy . 5.7 5.8 Proxy の動作確認 5.9 本番と開発環境の違い まとめ 5.10 第 6 章 Knock による認証 6.1 Knock とは . 6.2 Knock の導入 6.3 鍵設定 6.4 ューザーの作成 . 証付 ControIIer 伊い口 諢証必須な API を直接叩いてみる . 6.6 伊い口 6.7 Nuxt から API を呼ぶ まとめ 6.8 あとがき 付録 A Tips A. 1 Heroku にデブロイしたい A. 2 Auth0 の追加設定 著者紹介 ワ 1 つ 4 1 1 1 っ 4 つ」・ 4 冖ー一 8 一 4 4 -4 -4 -4 -4 ( -4 -4 -4 -4 -4 4 4 -4 一り一りり一り一り一り 5 6 ー 5 5 5 5 59 6

4. Auth0でつくる認証付きSPA

第 5 章 Nuxt on RaiIs 5.10 まとめ ・ RaiIs を API モードで new しました PingAPI を作成しました 本番は Nuxt を静的ビルドして PubIic に出力します ・開発用に Proxy を導入しました 認証なしのシンプルな API を呼び出すことができたので、 ていきます。 48 次章では API に認証をつけ

5. Auth0でつくる認証付きSPA

5.9 本番と開発環境の違い Make 5 し「 e tO turn on p 「 oduction mode See 「℃「 e tips at http_ü/_/vuejs . org/_g [ IR ] connected ( mess 己 ge : ( m ご 55 己 90 : も oess 己 ge : トー mess 己 ge : 第 pong “ ) pon ずリ れ pong " } “ pon リ 図 5.2 何度か「 Ping 」をクリックした結果 5.9 本番と開発環境の違い Pr ( Ⅸ y などを導入しましたが、最終的にどのような状態になっているかを図で書いてみ ました。少し複雑ですが、 Nuxt の dev サーバーを使うと色々と便利なので、このような 構成で開発しています。 Production Port3000 /api API コントローラ NuXt アセット API PO 「 t3000 DeveIopment P0rt3333 NuXt :3000/api /api ↓ Rails 本番と開発環境 47 Proxy Rails 図 5.3