[Keystone] 認証とセッション

認証とセッション

Keystone アプリにパスワード、セッション データ、および認証を追加する方法を学びます。

公開ワークフロー

keystone.ts

import { config, list } from '@keystone-6/core';
import { allowAll } from '@keystone-6/core/access';
import { text, relationship, timestamp, select } from '@keystone-6/core/fields';

const lists = {
  User: list({
    access: allowAll,
    fields: {
      name: text({ validation: { isRequired: true } }),
      email: text({ validation: { isRequired: true }, isIndexed: 'unique' }),
      posts: relationship({ ref: 'Post.author', many: true }),
    },
  }),
  Post: list({
    access: allowAll,
    fields: {
      title: text(),
      publishedAt: timestamp(),
      author: relationship({
        ref: 'User.posts',
        ui: {
          displayMode: 'cards',
          cardFields: ['name', 'email'],
          inlineEdit: { fields: ['name', 'email'] },
          linkToItem: true,
          inlineCreate: { fields: ['name', 'email'] },
        },
      }),
      status: select({
        options: [
          { label: 'Published', value: 'published' },
          { label: 'Draft', value: 'draft' },
        ],
        defaultValue: 'draft',
        ui: { displayMode: 'segmented-control' },
      }),
    },
  }),
};

export default config({
  db: {
    provider: 'sqlite',
    url: 'file:./keystone.db',
  },
  lists,
});

パスワードフィールドを追加する

Keystone のパスワードフィールドは、データベース内のパスワードのハッシュ化や、管理 UI 入力フィールドのパスワードのマスキングなど、一般的なパスワード セキュリティの推奨事項に従っています。
keystone.ts

[Keystone] 公開ワークフロー

公開ワークフロー

Keystoneの select フィールドと timestamp フィールドを使用して、アプリケーションに出版ワークフローを作成する方法を学びましょう。

リレーションシップの作成

keystone.ts

import { config, list } from '@keystone-6/core';
import { allowAll } from '@keystone-6/core/access';
import { text, relationship } from '@keystone-6/core/fields';

const lists = {
  User: list({
    access: allowAll,
    fields: {
      name: text({ validation: { isRequired: true } }),
      email: text({ validation: { isRequired: true }, isIndexed: 'unique' }),
      posts: relationship({ ref: 'Post.author', many: true }),
    },
  }),
  Post: list({
    access: allowAll,
    fields: {
      title: text(),
      author: relationship({
        ref: 'User.posts',
        ui: {
          displayMode: 'cards',
          cardFields: ['name', 'email'],
          inlineEdit: { fields: ['name', 'email'] },
          linkToItem: true,
          inlineCreate: { fields: ['name', 'email'] },
        },
      }),
    },
  }),
};

export default config({
  db: {
    provider: 'sqlite',
    url: 'file:./keystone.db',
  },
  lists,
});

公開ワークフローを構築する

公開日を追加

keystone.ts

[Keystone] リレーションシップの作成

リレーションシップの作成

2 つのコンテンツ タイプを相互に接続する方法と、管理 UI でこれらの接続を行う方法を構成する方法を学びます。

Keystone のインストール

Keystone ブログプロジェクトを立ち上げ、データベースと user リストを使用して実行しました。
keystone.ts

Keystone のインストール

Keystone を学ぶ

空のフォルダーから関係、認証、セッションデータを使用して機能するブログバックエンドを構築する方法を学び、その過程で Keystone のコアコンセプトについての洞察を得ます。

[Keystone] ヘッドレスCMS

Keystone とは

認証サービスである Keystone は、OpenStack のダッシュボード画面や API に対するアクセスの際のユーザー認証の機能を担います。
OpenStack では、GUI の操作画面でのオペレーションは、各コンポーネントの API を介してすべて処理されるため、必須のコンポーネントです。

[Astro] 静的サイトジェネレーター [エンドポイント、データフェッチ]

静的アセット

Astro は、ほとんどの静的アセットを設定不要でサポートしています。プロジェクトの JavaScript (Astro front-matter スクリプトを含む) のどこでも import 文を使用でき、Astro は最終ビルドにその静的アセットのビルドされた最適化されたコピーを含めます。また、@import は CSS と <style> タグの中でもサポートされています。

[Astro] 静的サイトジェネレーター [ルーティング]

ルーティング

静的ルーティング

src/pages ディレクトリにある、Astro コンポーネント (.astro) と Markdown ファイル (.md) は自動的にウェブサイトのページとなります。

動的ルーティング

1つの Astro ページコンポーネントは、ファイル名に動的ルーティングパラメータを指定して、指定した条件に合致する複数のルーティングを生成することもできます。

[Astro] 静的サイトジェネレーター [ページ、レイアウト]

ページ

Astro ページ

.astro 拡張子を使い Astro コンポーネントと同じ機能を持ちます。
src/pages/index.astro

---
---
<html lang="ja">
    <head>
        <title>Home</title>
    </head>
    <body>
        <h1>Welcom to my site.</h1>
    </body>
</html>

全てのページで同じ HTML 要素を繰り返すことを避けるために、共通の <head><body> 要素を独自のレイアウトコンポーネントに移動できます。
src/pages/index.astro

[Astro] 静的サイトジェネレーター [インストール、ディレクトリ構成、Astro コンポーネント]

Astro

コンテンツにフォーカスした高速なWebサイトを構築するためのフレームワークです。

プロジェクトを作成

以下のコマンドを実行して、プロジェクトを作成します。

npm create astro@latest
Need to install the following packages:
  create-astro@1.2.4
Ok to proceed? (y) y
√ Where would you like to create your new project? ... // プロジェクト名
√ How would you like to setup your new project? » a few best practices (recommended)
✔ Template copied!
√ Would you like to install npm dependencies? (recommended) ... yes
✔ Packages installed!
√ Would you like to initialize a new git repository? (optional) ... yes
✔ Git repository created!
√ How would you like to setup TypeScript? » Relaxed
✔ TypeScript settings applied!

  next   Liftoff confirmed. Explore your project!

         Enter your project directory using cd ./astro
         Run npm run dev to start the dev server. CTRL+C to stop.
         Add frameworks like react or tailwind using astro add.

         Stuck? Join us at https://astro.build/chat
npm run dev

ディレクトリ構成

・src/ - プロジェクトソースコード (コンポーネント、スタイル、ページ)
・public/ - コード以外の処理不要のアセット (フォント、アイコン)
・package.json - プロジェクトマニュフェスト
・astro.config.mjs - Astroの設定ファイル

[GitHub] コマンドを使いGitHubに登録するまでの流れ

セットアップ

$ git init

作業ディレクトリ→ステージングエリア

/*ファイルをひとつずつあげたい場合*/
$ git add ファイル名

/*ファイルを一括してあげたい場合*/
$ git add -A
/"-A"を使うことで作業ツリー内のファイルを全て追加することができます/

ステージングエリア→ローカルリポジトリ

$ git commit -m "コミットメッセージ"
/*コミットメッセージはどういった編集内容なのかわかりやすく書いておくと良い*/

ローカルリポジトリ→リモートリポジトリ

$ git remote add origin https://github.com/ユーザ名/xxx.git
$ git push -u origin master

作業用ブランチに develop の最新コードを取り込む

# developブランチへ移動
$ git checkout develop

# git pullで develop を最新にする
$ git pull origin develop

# 作業用ブランチへ移動
$ git checkout 作業用ブランチ

# mergeコマンドで develop の内容を取り込む
$ git merge develop

コンフリクトしていたらコンフリクトを解消する。
コンフリクトしたファイルに自分の更新内容を反映させる。
エラーが出ていない、動作に問題がないことを確認する。