ノンカフェインであなたにやさしい

Ruby,Rails,HTML,CSS,Reactなど

PostgreSQLでdatabaseをReadOnlyに設定する

default_transaction_read_onlyon に設定する

alter database database_name set default_transaction_read_only = on;

postgresqlco.nf

その他メモ

レプリカのDBを作ってReadOnlyに設定する手順

現行DBのexport

pg_dump  database_name > import.sql

レプリカへのインポート

psql replica_database_name < import.sql

ReadOnlyに設定

alter database replica_database_nameset default_transaction_read_only = on;

WARN When using nuxt generate, you should set target: 'static' in your nuxt.config

古いNuxtプロジェクトを nuxt generate したらWarningが出た。

 WARN  When using nuxt generate, you should set target: 'static' in your nuxt.config
       👉 Learn more about it on https://go.nuxtjs.dev/static-target

nuxt.config.jstarget: 'static' と書く必要があるらしい

export default {
  ssr: false,
  target: 'static',

WARN mode option is deprecated. Please use ssr: true for universal mode or ssr: false for spa mode and remove mode from nuxt.config

古いNuxtプロジェクトを起動したらWarningが出た。

WARN  mode option is deprecated. Please use ssr: true for universal mode or ssr: false for spa mode and remove mode from nuxt.config

nuxt.config.jsmode が非推奨になったらしいので書き換える

- mode: 'spa',
+ ssr: false,

Windows 10 20H2にアップデートしてMicrosoft Edge(従来版)が消えてしまった時の対応

Windows 10 20H2にアップデートすると従来版Edgeが消えてしまうようです。

Windows 10 バージョン 20H2 から、Microsoft Edge 従来版は含まれなくなりました。 Windows 10 のこのバージョンから、並べて表示エクスペリエンスはサポートされていません。
旧バージョンの Microsoft Edge にアクセスする | Microsoft Docs

対応は以下

  1. レジストリエディターでキーを削除
  2. Microsoft Edge(従来版)のショートカット作成

レジストリエディターでキーを削除

レジストリエディターを開く

Windowsのスタートボタンを押し「regedit」で検索
レジストリエディター」を選択

support.microsoft.com

指定のキーを削除する

下記のキーを探し削除します。
事前にエクスポートなどをしておくと安心です。

HKEY_LOCAL_MACHINE\SOFTWARE\WOW6432Node\Microsoft\EdgeUpdate\ClientState\{56EB18F8-B008-4CBD-B6D2-8C97FE7E9062} 

Microsoft Edge(従来版)のショートカット作成

デスクトップ画面を右クリックして「新規作成 -> ショートカット」を選び以下のパスにショートカットを作成します。

%windir%\explorer.exe shell:Appsfolder\Microsoft.MicrosoftEdge_8wekyb3d8bbwe!MicrosoftEdge 

名前は「Microsoft Edge(従来版)」としておきましょう。

f:id:kuronekopunk:20201218105820p:plain

フォルダアイコンになってしまったのでEdgeのアイコンを設定します。
ショートカットを右クリック「プロパティ -> ショートカットタブ -> アイコンの変更 -> 参照」をクリック
参照先を以下のパスにして「MicrosoftEdge.exe」を選択

C:\Windows\SystemApps\Microsoft.MicrosoftEdge_8wekyb3d8bbwe

f:id:kuronekopunk:20201218110530p:plain

「適用」をするとEdgeの旧アイコンが設定できました。

f:id:kuronekopunk:20201218110153p:plain

スタートメニューに追加する

ファイラーで以下を開き、デスクトップのショートカットを入れる。

C:\ProgramData\Microsoft\Windows\Start Menu\Programs

無事スタートメニューに従来版が表示されました

f:id:kuronekopunk:20201218110342p:plain

参考

RailsインスパイアのReactJsフレームワーク Blitzを試した

Blitzとは?

GitHubの説明をGoogle翻訳を通した引用…

Blitzは、Ruby on Railsのようなサーバーレンダリングフレームワークのシンプルさと慣習を復活させ、 Reactとクライアントサイドレンダリングについて私たちが愛するすべてを維持します!

github.com

つまりRailsっぽくてクールなNextJs!!!(?)

Blitzでアプリケーションを作る

公式ドキュメントを参考に進める
form libraryは React Final Form (recommended) を選びました

$ npm install -g blitz
$ blitz new blitzTestApp
You are using alpha software - if you have any problems, please open an issue here:
      https://github.com/blitz-js/blitz/issues/new/choose

? Pick a form library (you can switch to something else later if you want) …
▸ React Final Form (recommended)
  React Hook Form
  Formik

✔ Pick a form library (you can switch to something else later if you want) · React Final Form

Hang tight while we set up your new Blitz app!

CREATE    .env
CREATE    .env.local
CREATE    .env.test.local
CREATE    .eslintrc.js
CREATE    .npmrc
CREATE    .prettierignore
CREATE    README.md
CREATE    app/auth/auth-utils.ts
CREATE    app/auth/components/LoginForm.tsx
CREATE    app/auth/components/SignupForm.tsx
CREATE    app/auth/mutations/login.ts
CREATE    app/auth/mutations/logout.ts
CREATE    app/auth/mutations/signup.ts
CREATE    app/auth/pages/login.tsx
CREATE    app/auth/pages/signup.tsx
CREATE    app/auth/validations.ts
CREATE    app/components/.keep
CREATE    app/hooks/useCurrentUser.ts
CREATE    app/layouts/.keep
CREATE    app/layouts/Layout.tsx
CREATE    app/pages/404.tsx
CREATE    app/pages/_app.tsx
CREATE    app/pages/_document.tsx
CREATE    app/pages/index.test.tsx
CREATE    app/pages/index.tsx
CREATE    app/users/queries/getCurrentUser.ts
CREATE    babel.config.js
CREATE    blitz.config.js
CREATE    db/index.ts
CREATE    db/migrations/.keep
CREATE    db/schema.prisma
CREATE    db/seeds.ts
CREATE    integrations/.keep
CREATE    jest.config.js
CREATE    package.json
CREATE    public/favicon.ico
CREATE    public/logo.png
CREATE    test/.keep
CREATE    test/__mocks__/fileMock.js
CREATE    test/setup.ts
CREATE    test/utils.tsx
CREATE    tsconfig.json
CREATE    types.ts
CREATE    utils/.keep
CREATE    .gitignore
CREATE    app/components/Form.tsx
CREATE    app/components/LabeledTextField.tsx

✔ Retrieving the freshest of dependencies
✔ Resolving packages
✔ Fetching packages
✔ Linking dependencies
✔ Building fresh packages
✔ Initializing SQLite database
✔ Committing your app

Your new Blitz app is ready! Next steps:

   1. cd blitzTestApp
   2. blitz start
$ cd blitzTestApp/
~/work/node/blitzTestApp (master)
$ blitz start
You are using alpha software - if you have any problems, please open an issue here:
      https://github.com/blitz-js/blitz/issues/new/choose

> ⚠️  Git config core.excludesFile is unset. Inferring .gitignore file locations.
✔ Prepped for launch
Loaded env from /home/akinov/work/node/blitzTestApp/.blitz/caches/dev/.env
warn  - You have enabled experimental feature(s).
warn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use them at your own risk.

ready - started server on http://localhost:3000
info  - Using external babel configuration from /home/akinov/work/node/blitzTestApp/.blitz/caches/dev/babel.config.js

localhost:3000 にアクセスすると最初のページが表示されました
\Hello Wold/

f:id:kuronekopunk:20201212205226p:plain

migrationをしてみる

最初のページに書いてあるとおり、ページを生成、DBのmigrateをしてみる
構文などはほぼRailsである

$ blitz generate all project name:string
You are using alpha software - if you have any problems, please open an issue here:
      https://github.com/blitz-js/blitz/issues/new/choose

✔ Model for 'project' created successfully:

> model Project {
>   id        Int      @default(autoincrement()) @id
>   createdAt DateTime @default(now())
>   updatedAt DateTime @updatedAt
>   name      String
> }

Now run blitz db migrate to add this model to your database

CREATE    app/projects/pages/projects/[projectId]/edit.tsx
CREATE    app/projects/pages/projects/[projectId].tsx
CREATE    app/projects/pages/projects/index.tsx
CREATE    app/projects/pages/projects/new.tsx
CREATE    app/projects/components/ProjectForm.tsx
CREATE    app/projects/queries/getProject.ts
CREATE    app/projects/queries/getProjects.ts
CREATE    app/projects/mutations/createProject.ts
CREATE    app/projects/mutations/deleteProject.ts
CREATE    app/projects/mutations/updateProject.ts

~/work/node/blitzTestApp (master)
$ blitz db migrate
You are using alpha software - if you have any problems, please open an issue here:
      https://github.com/blitz-js/blitz/issues/new/choose

Environment variables loaded from /home/akinov/work/node/blitzTestApp/.env
Prisma schema loaded from db/schema.prisma
✔ Name of migration … y
📼  migrate save --name y

Local datamodel Changes:

// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema

// --------------------------------------

model Project {
  id Int @default(autoincrement()) @id
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
  name String
}

Prisma Migrate just created your migration 20201212115831-y in

migrations/
  └─ 20201212115831-y/
    └─ steps.json
    └─ schema.prisma
    └─ README.md

Run prisma migrate up --experimental to apply the migration

Environment variables loaded from /home/akinov/work/node/blitzTestApp/.env
Prisma schema loaded from db/schema.prisma
🏋️<200d>  migrate up

Changes to be applied:

// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema

// --------------------------------------

model Project {
  id Int @default(autoincrement()) @id
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
  name String
}

Checking the datasource for potential data loss...

Database Changes:

Migration         Database actions             Status

20201212115831-y  1 CreateTable statements.    Done 🚀

You can get the detailed db changes with prisma migrate up --experimental --verbose
Or read about them here:
      ./migrations/20201212115831-y/README.md


🚀    Done with 1 migration in 128ms.

Environment variables loaded from /home/akinov/work/node/blitzTestApp/.env
Prisma schema loaded from db/schema.prisma

✔ Generated Prisma Client (2.12.1) to ./node_modules/@prisma/client in 60ms
You can now start using Prisma Client in your code. Reference: https://pris.ly/d/client

import { PrismaClient } from '@prisma/client' const prisma = new PrismaClient()

warn Prisma 2.12.0 has breaking changes.
You can update your code with npx @prisma/codemods update-2.12 ./
Read more at https://pris.ly/2.12

このままだとProjectの登録ができないので公式チュートリアルを参考にフォームを動くようにする

blitzjs.com

公式のフォームデータのとり方が配列のindex指定なの全然参考にならなかった。。。

event.target[0].value

他サイトだと document.getElementById を使ってるものもあったりとキレイでベターなやり方が見つからなかった。
ReactJsなのでFormコンポーネント内でstateを持つのが良さそうだと思う。
event.target はHTMLElementなのでquerySelectorなどで取得も可能だった

event.target.querySelector('[name=name]').value