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

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

手順

公開鍵の作成
さくらのレンタルサーバーに公開鍵をアップロード
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. さくらのレンタルサーバーに公開鍵をアップロード

さくらサーバーに ~/.ssh/authorized_keys として公開鍵をアップロードする
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

今さら聞けない暗号技術＆認証・認可　Web系エンジニア必須のセキュリティ基礎力をUP (Software Design別冊)

Amazon

イラスト図解式この一冊で全部わかるサーバーの基本

作者:きはしまさひろ
SBクリエイティブ

Amazon

ｍｕＡＨ！レトロ調アンティークカギ古い鍵魔法秘密劇小道具宝物保育園幼稚園こども園文化祭演劇舞台こども会ゲーム遊び企画まんが映画余興栓抜き合コン鍵5本セット

ｍｕＡＨ！

Amazon

2023-03-19

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

TypeScript CSS in JS CSS React Tips

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 にならず、問題なく !important な CSS が出力される

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 使わない設計になるよね。って思想だと思うのでそれはそう)

[参考]

1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座

作者:Mana
SBクリエイティブ

Amazon

シャチハタスタンプビジネス用キャップレス A型赤重要ヨコ X2-A-104H2

シャチハタ

Amazon

2023-03-18

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

React CSS in JS CSS TypeScript Vite

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()],
});