nextjsメモ

nextjs

種別	データ取得に使う主な関数	データ取得タイミング	その他
SSG	getStaticProps	ビルド時
SSR	getServerSideProps	ユーザーリクエスト時(サーバーサイド時)	getInitialPropsもSSR
ISR	getStaticProps(revalidateを返却する)	ビルド時	デプロイ後もバックグラウンドでビルドが実行される
CSR	上記以外の任意の関数(useSWRなど)	ユーザーリクエスト時(ブラウザ)	CSRはSSG/SSR/ISRと併用可能

2022-08-13

limaで作成した仮想VMにホスト側からアクセスしたい

linux

環境

lima 0.11.3

やりたいこと

limaを使うとアーキテクチャの壁を超えて仮想マシンを構築できるが、デフォルトではホストOS側とネットワークの共有されていないため、 Macからネットワーク経由でアクセスすることはできない。

それをいなんとかしたい

昔は自分で結構しなきゃいけなかったようだが、最近のlimaではVirtualBoxみたいに簡単に共有設定が出来る。

やり方

実は公式ドキュメントに詳しく載ってる

github.com

まずvde-2とlima-vm/vde_vmnetってのをビルドインストールしなきゃいけない

必要なビルドツールをインストール

brew install autoconf automake

vde-2を適当にダウンロードして解凍

ビルドに必要なファイル生成

autoreconf --install

./configure が生成されるので実行

./configure

ビルド

make
sudo make install

lima-vm/vde_vmnet も同様にダウンロードしてインストール

sudo make PREFIX=/opt/vde install

ホスト(MacOS)側のルーティングをlimaが弄る必要もあるのでsudoなしで実行できるようにする

limactl sudoers | sudo tee /etc/sudoers.d/lima

設定方法

デフォルトだと limaのVMの設定は ~/.lima/<インスタンス名>/lima.yaml に格納される。（例えば lima start docker.ymlなら ~/.lima/docker/lima.yaml）

そこに設定を足して limactl stop <インスタンス名> limactl start <インスタンス名> すればおｋ

limaのネットワーク設定種類

いくつかある

shared

networks:
  - lima: shared

ホストとlimaの仮想VM同士共通のネットワークを作成し共有する方法。例ではlima0が作成されて 102.168.105.2 でアクセス可能

3: lima0: <BROADCAST,MULTICAST,UP,LOWER_UP> mtu 1500 qdisc fq_codel state UP group default qlen 1000
    link/ether 52:55:55:76:5b:27 brd ff:ff:ff:ff:ff:ff
    inet 192.168.105.2/24 metric 100 brd 192.168.105.255 scope global dynamic lima0
       valid_lft 83948sec preferred_lft 83948sec
    inet6 fd17:fb46:3fa2:c696:5055:55ff:fe76:5b27/64 scope global dynamic mngtmpaddr noprefixroute
       valid_lft 2591982sec preferred_lft 604782sec
    inet6 fe80::5055:55ff:fe76:5b27/64 scope link
       valid_lft forever preferred_lft forever

host

networks:
  - lima: host

sharedと似てるが、仮想VM内同士の共有も可能な点が異なる。同様にlima0が作成されて 192.168.106.2 でアクセス可能。

3: lima0: <BROADCAST,MULTICAST,UP,LOWER_UP> mtu 1500 qdisc fq_codel state UP group default qlen 1000
    link/ether 52:55:55:76:5b:27 brd ff:ff:ff:ff:ff:ff
    inet 192.168.106.2/24 metric 100 brd 192.168.106.255 scope global dynamic lima0
       valid_lft 86194sec preferred_lft 86194sec
    inet6 fe80::5055:55ff:fe76:5b27/64 scope link
       valid_lft forever preferred_lft forever

bridged

networks:
  - lima: bridged

ホストと同じIPをlimaの仮想VMも持つ。ので例えばlimaの仮想VM内で python -m http.server -p 8000 すれば 192.168.1.117:8000 または localhost:8000 でアクセス可能

3: lima0: <BROADCAST,MULTICAST,UP,LOWER_UP> mtu 1500 qdisc fq_codel state UP group default qlen 1000
    link/ether 52:55:55:76:5b:27 brd ff:ff:ff:ff:ff:ff
    inet 192.168.1.117/24 metric 100 brd 192.168.1.255 scope global dynamic lima0
       valid_lft 259031sec preferred_lft 259031sec
    inet6 fe80::5055:55ff:fe76:5b27/64 scope link
       valid_lft forever preferred_lft forever

ネットワーク自体の設定はどこ？

~/.lima/_config/networks.yaml に定義されている

デフォルトだとこんな感じ

# Paths to vde executables. Because vde_vmnet is invoked via sudo it should be
# installed where only root can modify/replace it. This means also none of the
# parent directories should be writable by the user.
#
# The varRun directory also must not be writable by the user because it will
# include the vde_vmnet pid files. Those will be terminated via sudo, so replacing
# the pid files would allow killing of arbitrary privileged processes. varRun
# however MUST be writable by the daemon user.
#
# None of the paths segments may be symlinks, why it has to be /private/var
# instead of /var etc.
paths:
  vdeSwitch: /opt/vde/bin/vde_switch
  vdeVMNet: /opt/vde/bin/vde_vmnet
  varRun: /private/var/run/lima
  sudoers: /private/etc/sudoers.d/lima

group: everyone

networks:
  shared:
    mode: shared
    gateway: 192.168.105.1
    dhcpEnd: 192.168.105.254
    netmask: 255.255.255.0
  bridged:
    mode: bridged
    interface: en0
    # bridged mode doesn't have a gateway; dhcp is managed by outside network
  host:
    mode: host
    gateway: 192.168.106.1
    dhcpEnd: 192.168.106.254
    netmask: 255.255.255.0

2022-08-12

UbuntuにPreztoをインストールしてみた

ubuntu zsh

環境

Ubuntu 20.04

多分Macもいける

やりたいこと

今まではzshのフレームワークでoh-my-zsh使ってたが、起動がやっぱり遅いとかあったのでPreztoに乗り換えてみたメモ

github.com

インストール

公式のREADMEやれば問題ない先にzshはbrewなりaptでインストールしておく必要はある

現状がbashの場合は

zsh

clone

git clone --recursive https://github.com/sorin-ionescu/prezto.git "${ZDOTDIR:-$HOME}/.zprezto"

設定ファイルを作成すでに.zshrcがある場合はうまくいかないので事前に退避させておくこと

setopt EXTENDED_GLOB
for rcfile in "${ZDOTDIR:-$HOME}"/.zprezto/runcoms/^README.md(.N); do
  ln -s "$rcfile" "${ZDOTDIR:-$HOME}/.${rcfile:t}"
done

成功するとシンボリックリンクがはられていることが確認できる

❯ ls -la | grep zprezto/runcoms
lrwxrwxrwx 1 vagrant vagrant    37 May  4 00:48 .zlogin -> /home/vagrant/.zprezto/runcoms/zlogin
lrwxrwxrwx 1 vagrant vagrant    38 May  4 00:48 .zlogout -> /home/vagrant/.zprezto/runcoms/zlogout
lrwxrwxrwx 1 vagrant vagrant    40 May  4 00:48 .zpreztorc -> /home/vagrant/.zprezto/runcoms/zpreztorc
lrwxrwxrwx 1 vagrant vagrant    39 May  4 00:48 .zprofile -> /home/vagrant/.zprezto/runcoms/zprofile
lrwxrwxrwx 1 vagrant vagrant    37 May  4 00:48 .zshenv -> /home/vagrant/.zprezto/runcoms/zshenv
lrwxrwxrwx 1 vagrant vagrant    36 May  4 00:48 .zshrc -> /home/vagrant/.zprezto/runcoms/zshrc

デフォルトのシェルをzshに変更する

chsh -s /bin/zsh

テーマの変更

デフォルトでいくつか有名どころのテーマがインストールされている

prompt -p

テーマ変更は~/.zpreztorcを編集する　今回はpureに変更した

- zstyle ':prezto:module:prompt' theme 'sorin'
+ zstyle ':prezto:module:prompt' theme 'pure'

デフォルトのエディタをVimに変更

なぜかデフォルトがnanoになってるので.zprofileを書き換えてvimにしておく

- export EDITOR='nano'
- export VISUAL='nano'
+ export EDITOR='vim'
+ export VISUAL='vim'

各種設定

現行の.zpreztorc設定は以下

--- runcoms-orig/zpreztorc   2022-08-12 22:01:09.000000000 +0900
+++ /Users/thr3a/.zpreztorc   2022-08-12 22:14:41.000000000 +0900
@@ -34,19 +34,19 @@
   'terminal' \
   'editor' \
   'history' \
-  'directory' \
   'spectrum' \
   'utility' \
   'completion' \
   'history-substring-search' \
-  'prompt'
-
+  'autosuggestions' \
+  'prompt' \
+  'syntax-highlighting'
 #
 # Autosuggestions
 #
 
 # Set the query found color.
-# zstyle ':prezto:module:autosuggestions:color' found ''
+# zstyle ':prezto:module:autosuggestions:color' found 'fg=red'
 
 #
 # Completions
@@ -61,7 +61,7 @@
 #
 
 # Set the key mapping style to 'emacs' or 'vi'.
-zstyle ':prezto:module:editor' key-bindings 'emacs'
+zstyle ':prezto:module:editor' key-bindings 'vi'
 
 # Auto convert .... to ../..
 # zstyle ':prezto:module:editor' dot-expansion 'yes'
@@ -130,7 +130,7 @@
 # Set the prompt theme to load.
 # Setting it to 'random' loads a random theme.
 # Auto set to 'off' on dumb terminals.
-zstyle ':prezto:module:prompt' theme 'sorin'
+zstyle ':prezto:module:prompt' theme 'pure'
 
 # Set the working directory prompt display length.
 # By default, it is set to 'short'. Set it to 'long' (without '~' expansion)
@@ -181,13 +181,9 @@
 
 # Set syntax highlighters.
 # By default, only the main highlighter is enabled.
-# zstyle ':prezto:module:syntax-highlighting' highlighters \
-#   'main' \
-#   'brackets' \
-#   'pattern' \
-#   'line' \
-#   'cursor' \
-#   'root'
+ zstyle ':prezto:module:syntax-highlighting' highlighters \
+   'main' \
+   'brackets'
 #
 # Set syntax highlighting styles.
 # zstyle ':prezto:module:syntax-highlighting' styles \

詳しく説明すると

autosuggestionsを有効化
directoryプラグインは使わないので無効化

.zshrcはどうなの

brew install fzf して以下のようにCtrl+rでインクリメント履歴検索出来るように

function select-history() {
  BUFFER=$(history -n -r 1 | fzf --no-sort +m --query "$LBUFFER" --prompt="History > ")
  CURSOR=$#BUFFER
}
zle -N select-history
bindkey '^r' select-history

参考リンク

2022-08-12

MacのターミナルでCtrl+Aで行頭に瞬間移動する方法

mac

ターミナルで行頭、行末に一発で遷移したい

前のパソコンではできてたのだが、ターミナル上で Ctrl + A を同時押しすると入力行の先頭にジャンプできた。また Ctrl + E で行末に移動できて非常に便利だったのだがPCとか環境変えたタイミングでその設定が消えた。

てっきりitem2のショートカットキーの設定かと思っていたのだが、実はzshのショートカットキーだった

なぜ今までできていたのか

実は個別に設定しなくてもzshにはいくつかのショートカットキーテンプレートがある。

bindkey -e  # emacsモードで使う
bindkey -a  # vicmdモード
bindkey -v # viinsモード

このなかで、自分がやりたかった行頭行末移動ショートカットキーがデフォルトで設定されているのはemacsモードのみ。

なんかの拍子でemacモードになり、その結果行頭行末移動ショートカットキーの恩恵を受けられていたというわけ。

設定方法

じゃあ bindkey -e でめでたしめでたしと言いたいところだが、そもそもこの機能を今日知ったし、他にも得体のしれないショートカットキーが

潜在的に設定されていると考えると衛生的に良くない。

そこで今回はテンプレートは使わず、個別に設定することにした

.zshrcに以下追記

bindkey -d  # キーバインドをリセット
bindkey "^A" beginning-of-line
bindkey "^E" end-of-line

これで source .zshrc すれば Ctrl + A で入力行の先頭へ、Ctrl + E で行末に瞬間移動できる。やったね

2022-08-12

Pryのスクロール時に表示がバグる問題

ruby

pryのlsバグる問題

こんな感じになってしまう

スクリーンショット 2022-08-12 12.22.01.png

解決方法

export PAGER=" less --raw-control-chars -F -X"

詳しい話

qiita.com

動かざることバグの如し

近づきたいよ君の理想に

nextjsメモ

limaで作成した仮想VMにホスト側からアクセスしたい

環境

やりたいこと

やり方

設定方法

limaのネットワーク設定種類

shared

host

bridged

ネットワーク自体の設定はどこ？

UbuntuにPreztoをインストールしてみた

環境

やりたいこと

インストール

テーマの変更

デフォルトのエディタをVimに変更

各種設定

.zshrcはどうなの

参考リンク

MacのターミナルでCtrl+Aで行頭に瞬間移動する方法

ターミナルで行頭、行末に一発で遷移したい

なぜ今までできていたのか

設定方法

Pryのスクロール時に表示がバグる問題

pryのlsバグる問題

解決方法

詳しい話