かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

Tips さくらのレンタルサーバーに公開鍵で ssh 接続したい

WordPress の host とかでお安いから使い続けてるみんな大好きさくらのレンタルサーバー!
SSH 接続できるのですが毎回パスフレーズ入力するのなんだかな〜と思ってたら公開鍵が使えるっぽいのでやってみたのメモ (PC買い替えたらまた設定するだろうからね…)

手順

  1. 公開鍵の作成
  2. さくらのレンタルサーバーに公開鍵をアップロード
  3. Host の設定

1. 公開鍵の作成

id_ed25519_sakura でキーを作成
パスフレーズも設定した

$ ssh-keygen -t ed25519 -C "your_email@example.com" -t ~/.ssh/id_ed25519_sakura
Enter passphrase (empty for no passphrase):

~/.ssh ディレクトリに ssh 公開鍵と秘密鍵ができていることを確認

  • id_ed25519_sakura
  • id_ed25519_sakura.pub

2. さくらのレンタルサーバーに公開鍵をアップロード

  1. さくらサーバーに ~/.ssh/authorized_keys として公開鍵をアップロードする
  2. authorized_keysパーミッションを 600 にする

※ 既に authorized_keys が存在する場合は公開鍵の情報を追記しても OK っぽい

コマンドでアップロードする方法

$ scp ~/.ssh/id_ed25519_sakura.pub {user}@{user}.sakura.ne.jp:./.ssh/authorized_keys

公開鍵を使った ssh 接続の確認

$ ssh {user}@{user}.sakura.ne.jp -i ~/.ssh/id_ed25519_sakura
% Welcome to FreeBSD!

サーバーにログインできていれば OK

3. Host の設定

毎回長いコマンドを打つのが面倒なので Host 設定をして ssh 接続のエイリアスを作成する
~/.ssh/config に Host の設定を追加

Host sakura
  HostName {user}.sakura.ne.jp
  User {user}
  Port 22
  UseKeychain yes
  IdentityFile ~/.ssh/id_ed25519_sakura

設定を作成したら ssh sakura でさくらサーバーに ssh 接続ができるようになる

おわり ₍ ᐢ. ̫ .ᐢ ₎


cf.

chaika.hatenablog.com

React TypeScript vanilla-extract で !important が使いたい!

vanilla-extract を使っていてライブラリが element に直接出力する CSS をどうしても上書きする必要があり !important を使おうとしたのですが TypeScript の型でハマったのでメモ

vanilla-extract を使って !important を使う

ライブラリの出力 CSS を上書きするために !import を指定するとセレクタの箇所で type error になる

import { globalStyle } from '@vanilla-extract/css';

globalStyle('#lib-container', {
  position: 'relative !important',
});

=> (property) position?: CSSVarFunction | Property.Position | (CSSVarFunction | Property.Position | undefined)[] | undefined The position CSS property sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements.

as でキャストしてしまえば OK

むりやり感はあるが as でキャストすれば type error にならず、問題なく !importantCSS が出力される

import { globalStyle } from '@vanilla-extract/css';

globalStyle('#lib-container', {
- position: 'relative !important',
+ position: 'relative !important' as 'relative',
});

何でキャストするかは CSS のプロパティで変える必要がある

CSS を書く時に !important はカオスを産む根源だと思っているので、どうしてもという場合を除いて使わないほうが良いと考えています。 今回の方法はあまりお行儀が良くないと思うが、どうしても必要な場合は as でキャストすれば TypeScript な vanilla-extract でも問題なく !important が使えることが解りました。

たぶんドキュメントにも書かれてない気がする (!important 使わない設計になるよね。って思想だと思うのでそれはそう)


[参考]

React TypeScript vanilla-extract を vite で使う時の Tips

React TypeScript で CSS in JS を書ける vanilla-extract を vite で使う時の Tips

ライブラリをインストールしただけだとエラーになる

$ npm i @vanilla-extract/css

ライブラリをインストールしただけ状態で style.css.ts のようなファイルを作成して使おうとしても下記のようなエラーになる
=> You may have created styles outside of a '.css.ts' context

拡張子 .css.ts を認識するためにプラグインが必要

$ npm i -D @vanilla-extract/vite-plugin

プラグインの設定を vite.config.js に追加する

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';
import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), vanillaExtractPlugin()],
});

ちゃんと introduction の vite の項目に書いてあった…

おわり


cf.