JSひろば開発６日目：Vueアプリのデプロイとデザイン

前回までの記事では、Djangoをデプロイし実際のドメインからアクセスできるところまで行いました。今日の作業ではバックエンドのDjangoアプリで作成したAPIのエンドポイントとVueのウェブアプリから実際にAPIのリクエストを送りバックエンドからデータをもらえるようにします。あとデザインをキレイにしましょう。

ではDjangoのアドミンページから実際のデータを入力してAPIのエンドポイントから取得できるようにします。

VueアプリにAxiosをインストール

npm install axios

次に、EventService.jsというAPI関連のコールをまとめた別ファイルを作成しました。

import axios from "axios";

const getClient = axios.create({
  baseURL: "http://asameshi-api.cloud/",
  withCredentials: false,
  headers: {
    Accept: "application/json",
    "Content-Type": "application/json",
  },
});

// 
export const getCommand = () => {
  return getClient().get("command/");
};

次にPiniaのファイルにAPIコールのファンクションを保管しておきPiniaが読み込まれたらデータをフェッチするようにします。どこでこのファンクションと発火させるかは後から変更するかもしれません。

  const keywordData = [];

  const getData = () => {
    getCommand()
      .then((response) => {
        keywordData = response.data
        console.log(response.data)
      })
      .catch((error) => {
        console.log("data:" + error);
      });
    loading.value = true;
  };
  getData()

ここで、APIのGETリクエストを送ると予定通りにCORSポリシーでDjangoからブロックされてしまいました。

詳しい対応方法はDjango REST API COR Headersの使い方の記事を参照してください。ではこの記事通りにいったんDjangoのアプリを更新してまた戻ってきましょう。

あと、Vue側のアプリケーションのindex.htmlのheadタグ内に下記のmetaを追加しました。

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> 

Vueアプリの検証

ではAPIの問題が解決したところでこのPrimeVueのターミナルで問題発生。。このUIだと改行ができないことが発覚しました。まあターミナルなのでそうでしょうが。なのでPrimeVueのTextAreaのコンポーネントと入れ替えました。

Vueアプリのデプロイ

Vueアプリのデプロイはこの記事を参考にして行いました。これもLet’s EncryptとCertbotを使ってHTTPSからアクセスできるようにしました。

とりあえず、Vueアプリがデプロイできるようになりました。後はUIの調整と細かい設定をして完了です！

アニメーションで使ったCSSはこちらの記事に書いています。Animistaというサイトです。

highlight.jsの追加

このままだと、テキストエディタのように色でハイライトされないので見づらいですね。highlight.jsをインストールしてみます。ここで入力したときと同時に1文字ずつでJavaScriptのキーワードかを判定してハイライトするようにしたかったのですが、うまくいきませんでした。テキストエリアをハイライトさせるのが難しそうでしたので諦めました。

しかし、他の方法でコマンドを実行したときにコードがハイライトされるようにできたので良しとします！

もし、単純にダイナミックでないコードをハイライトしたいのであればVueのコンポーネントで使えるHighlight.jsのプラグインもあるので試してください。

とりあえず今日はここまで！