投稿者: the 猫

WordPressの固定ページに埋め込んでいたJSをVueのアプリにコピペして差し替えた。「Trending」はほぼ修正していない。「Birthday」のページは、バックエンド側にデータを用意してボタン押下のタイミングで動的にデータ取得する今風の作りに改修した。Wordpressの管理ページではなくなりフィッシングサイト的な別ページに遷移する手法のテスト。

備忘・メモ書き：

フロント

• Vue 3
• Vue Router 4
• Pinia

バックエンド

• Nginx
• PostgREST
• PostgreSQL

データ

• Wikipedia
  https://ja.wikipedia.org/wiki/mm月dd日 の「誕生日」リストをスクレイピング

Webサーバ

Nginxのroot：https://kozawa.tokyo/
アプリの設置：https://kozawa.tokyo/apps/27/
Trendingページ：https://kozawa.tokyo/apps/27/trending
Birthdayページ：https://kozawa.tokyo/apps/27/birthday

アプリの設置先がサブディレクトリとなっており、URLとルーターのマッピングができずファイルが見つからないエラーが発生した。URLの指定のディレクトリ配下にindex.htmlが存在しない場合、1つづつ遡って上位ディレクトリのindex.htmlを探しに行くと思っていたが、そんなことはないw

nginx.conf

    location /apps/27/ {
            try_files $uri $uri/ /apps/27/index.html /index.html;
    }

この3行の追加・修正に一番時間がかかった。分かってしまえば何ということもないのだけれど、アプリの範囲で調べていても気づけない。アプリのサブディレクトリの設定についてはググれば対処できるけれど、以下の修正だけしてもNginxの環境ではindex.htmlファイルが見つからなくてエラーになる。

router/index.js

const router = createRouter({
  base: '/apps/27/', ※この行を追加
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'App',
      component: App,
      children: [
        {
          path: '/trending',
          name: 'Trending',
          component: () => import('../views/Trending.vue')
        },
        {
          path: '/birthday',
          name: 'Birthday',
          component: () => import('../views/Birthday.vue')
        }
      ]
    }
  ]
})

vite.config.js

export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  base: '/apps/27', ※この行を追加
})

Vue.jsの情報を検索しても、複数の書き方があってそのまま使えない情報が混在していて分かりづらい進めづらい状況になっている。（Vue 2、Vue 3.2未満、Vue 3.2以降、Options API、Composition API、 Vue Router 3系、4系、Vite、Pinia などなど）

あとは、PostgRESTのURLパラメタでdata型のカラムをフィルタできなかった。date型の yyyy-mm-dd を 文字列型の mm-dd でフィルタできずに挫折。data型をvarchar型に変更したViewを作成して文字列としてフィルタしている。

また、日付の期間を指定した検索については、ストアドプロシージャを作成してGETリクエストからストアドプロシージャを実行している。PostgRESTすげえ。

Vueの状態管理／Piniaは使う必要はなかったが動作検証のため使ってみた。ボタン押下でストアを更新してリストがリアクティブに更新される動作となっている。

Webアプリ開発の入門レベルで難しいことは何もやっていないけれど、実際にやってみるとハマる… ひと通り骨組みができるまでが大変でやり方が確立できてしまえば1からNにスケールするのは簡単なはずだけど… 🙄