Lightsail + VSCode Remote で安価な Svelte開発環境を作る
Hiroshi Hashiguchiローカルで開発環境を組み立てるのをやめてリモートへシフト。codespace等試したが起動待ちやコストを考えるとイマイチだったので安価な lightsailで環境を作れないかチャレンジ。Svelteを学びたかったのでまずは以下のような目標を立てた。
- リモートサーバで稼働
- VScodeで開発
- できるだけ安価
- 手間をかけない
PCは Macを使用
Hiroshi Hashiguchilightsail インスタンス作成
素の Amazon Linux2 と 安価な$3.5を選択
起動したら SSHで接続し最低限の設定
アップデート
# yum update
スタティックIPを取って Route53にレコードを作成
その後ホスト名を変更
# hostnamectl set-hostname <ホスト名>
AWSの教えに従って cloud.cfg も修正
# vi /etc/cloud/cloud.cfg
peserve_hostname: true （追加）
yum-cron を入れて毎日自動アップデート
# vi /etc/yum/yum-cron.conf
apply_updates = yes
Hiroshi HashiguchiVSCode Remote で接続してみる。
すぐに繋がった。
まずはベースができた。
Hiroshi Hashiguchiここから Svelte の環境作り
以降は ec2-user を使う
まずNVMをインストール
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
Nodejs v16をインストール
$ nvm install 16
次に Svelte だが検索すると mdn web docs の Svelteチュートリアルを発見。これを使ってみる。
$ mkdir ~/work
$ cd ~/work
$ npx degit sveltejs/template moz-todo-svelte
npx で怒られた。
node: /lib64/libm.so.6: version `GLIBC_2.27' not found (required by node)
node: /lib64/libc.so.6: version `GLIBC_2.28' not found (required by node)
Nodejs v16 利用を明示
$ nvm use v16
Now using node v16.20.0 (npm v9.6.7)
npx で怒られた（２回目）
! could not fetch remote https://github.com/sveltejs/template
! could not find commit hash for HEAD
おっと git を入れてなかった。
$ sudo yum install git
３回目で成功
$ npx degit sveltejs/template moz-todo-svelte
> cloned sveltejs/template#HEAD to moz-todo-svelte
残りを実行
$ cd moz-todo-svelte
$ npm install
実行
$ npm run dev
起動した
確認
$ curl localhost:8080
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width,initial-scale=1'>
<title>Svelte app</title>
<link rel='icon' type='image/png' href='/favicon.png'>
<link rel='stylesheet' href='/global.css'>
<link rel='stylesheet' href='/build/bundle.css'>
<script defer src='/build/bundle.js'></script>
</head>
<body>
</body>
</html>
大丈夫っぽい
どうやってブラウザで確認するんだ？
Hiroshi Hashiguchiサーバの localhost:8080 へ接続するのに SSHポートフォワーディングが使えそう。
自分のMacで以下を実行
ssh -f -N -L 8080:localhost:8080 <サーバ名>
ブラウザを開いて localhost:8080（ややこしい）へアクセス
やった
Hiroshi Hashiguchi忘れないうちにメモ
ssh -f -N -L 8080:locahost:8080 <サーバ名>
-L がポートフォワーディング設定
-L (サーバ側ポート番号):127.0.0.1:(ローカルポート番号)
-f はバックグラウンド実行の指示
-N は接続時にサーバ側で初期スクリプトを実行させない（AmazonLinuxだと色々走ってしまう）
とりあえず環境できた
Hiroshi HashiguchiVSCode に拡張機能 Svelte for VS Code を勧められたのでインストール
"Enable Plugin" おし
Hiroshi Hashiguchiだめっぽい。Lightsail ...
反応がなくなってしまった。
手元のターミナルからの SSHは真っ黒のまま。
キャパはまだあるはずなのだが。
停止をかけるもの止まらず。強制停止で数分後にようやく停止。
うむむ