EC2 T4g + VSCode Remote で安価な Svelte開発環境を作る（+kit)
Hiroshi Hashiguchi前回の記事 では Lightsail の非力さに撃沈。
なら EC2 だとカタログ を眺めていると T4g（Arm) が出ていて年末まで無料利用できるとのこと。
Amazon EC2 T4g インスタンスは、Arm ベースのカスタムビルドの AWS Graviton2 プロセッサを搭載していて、T3 インスタンスよりも最大 40% 高いコストパフォーマンスを発揮します。対象は、多岐にわたるバースト可能な汎用ワークロードです。
t4g.small インスタンスの無料トライアルは、2023 年 12 月 31 日まで (1 か月あたり最大 750 時間)。詳細については、よくある質問をご覧ください。
これを使ってみよう。
Hiroshi Hashiguchi
Amazon Linux 2023 を使う。
T4g small が無料。
ストレージも無料枠いっぱいの30GBとする。
Hiroshi Hashiguchi起動して
- Elastic IP をアタッチ
- Route53 へ登録
SSHで接続→成功
あとはポチポチと前回同様の設定。
VSCode Remote も一発で接続成功。Lightsailより速い。
HELLO WORLD! でた。
T4g サクサク動いて快適。
Hiroshi Hashiguchi備忘：macで開けているポートを調べる
前回実行したSSHポートフォワーディングが残っている。それを停止させたい。
まず lsof でポートを掴んでいるプロセスを探す。
lsof -P -i:8080
COMMAND PID USER FD TYPE DEVICE SIZE/OFF NODE NAME
ssh 75001 lakesoft 7u IPv6 0x11071565ecf37cf9 0t0 TCP localhost:8080 (LISTEN)
ssh 75001 lakesoft 8u IPv4 0x11071557818cd811 0t0 TCP localhost:8080 (LISTEN)
killする。
kill 75001
Hiroshi Hashiguchiブラウザのホットリロードできないかと探していると公式では Svelte Kit を使えとのこと。
ホットモジュールリロードをするにはどうすればよいですか？permalink
SvelteKit の利用をお勧めします。SvelteKit は、すぐに利用可能な HMR をサポートし、Vite と svelte-hmr をもとに構築されています。rollup や webpack のためのコミュニティプラグインもあります。
Frequently Asked Questions
じゃあ入れてみるか。
Hiroshi Hashiguchihttps://kit.svelte.dev/
公式の指示に従ってインストール。
$ npm create svelte@latest my-app
Need to install the following packages:
create-svelte@4.2.0
Ok to proceed? (y) y
create-svelte version 4.2.0
┌ Welcome to SvelteKit!
│
◇ Which Svelte app template?
│ SvelteKit demo app
│
◇ Add type checking with TypeScript?
│ Yes, using TypeScript syntax
│
◇ Select additional options (use arrow keys/space bar)
│ none
│
└ Your project is ready!
✔ Typescript
Inside Svelte components, use <script lang="ts">
Install community-maintained integrations:
https://github.com/svelte-add/svelte-add
Next steps:
1: cd my-app
2: npm install (or pnpm install, etc)
3: git init && git add -A && git commit -m "Initial commit" (optional)
4: npm run dev -- --open
To close the dev server, hit Ctrl-C
Stuck? Visit us at https://svelte.dev/chat
しかし起動でコケた。
よくわからないが調べていると --open がどうも悪いみたいだ。それ以上調べもせず外してみる。
成功。今度は 5173を開いている。
SSHポートフォワードでローカルPCの5173へ結びつける。
ssh -f -N -L 5173:localhost:5173 <ホスト名>
ブラウザでアクセスすると出た。
VSCodeで変更するとブラウザの表示も自動で更新された。いい感じ。
Hiroshi HashiguchiEC2はしばらく起動しておくので nodejsも起動しっぱなしにしたい。
npmを簡易にバックグラウンド実行しておく。
nohup npm run dev &
[1] 86979
nohup: ignoring input and appending output to 'nohup.out'
ログは nohup.out に落ちる。
これで端末を閉じてもアクセスできるようになった。