APIを叩いてVueで表示する

Tatsumi0000 / starry-kids

入力した文字を月文字として生成するStarryKids🌝

https://starry-kids.soleil-luminas.com/

Do What The F*ck You Want To Public License

6 stars 0 forks source link

APIを叩いてVueで表示する #9

Closed Tatsumi0000 closed 1 year ago

Tatsumi0000 commented 1 year ago

💪 やること

VueでRailsで作ったAPIにアクセスして表示するVueの画面を作ります。
axiosを使ってAPIにアクセスしたいなぁ〜（願望）

✅ 解決したいこと

VueでAPIにアクセスして月文字を表示できるようにしたい。

🥅 このissueのゴール

Vue3の書き方を学ぶ
- axiosの使い方を学ぶ
- Vitestの書き方を学ぶ
月文字をVueで表示できるようにする

📝 関連

Tatsumi0000 commented 1 year ago

VITE + Vueの環境変数の読み取り方

.env.developmentみたいに作るとViteが.env.XXXのXXXの値がモードと一致してるものを勝手に見つけて分岐してくれる。開発中はdevelopmentなので↑のような環境変数を作った。今のモードが何かを見たいときは、import.meta.env.MODEで見れるのでこれをprintするといい。import.meta.env.MODEは予めViteが準備してくれる特別な環境変数でいくつかこういった環境変数があります。

環境変数名は頭にVITE_がついている必要があって、Vue側ではimport.meta.env.VITE_XXXのようにして読み取ります。

ref.

環境変数とモード

Tatsumi0000 commented 1 year ago

RackでCORSの設定

Rackはミドルウェアです。

CORSは自分のオリジン以外にどのオリジンを受け付けるか決めるもの。今回の開発環境はRailsとVueで別オリジン（Railsがhttp://localhost:3000で、Vueがhttp://localhost:5173）なのでRails側にCORSの設定を入れないとアクセスできない。あと本番も別オリジンになるので設定は必須。

Railsではrack-corsを使うのがよさそうなのでこれを使いました。

ref.