code-serverはブラウザ上でVSCodeライクなエディタを使えるサーバです。
普段はGCPのCloud Shellを利用しているのですが、週50時間の制限が厳しくなってきたのでこちらを利用することにしました。
ローカルに開発環境を置かない理由としては、
- メインPCがWindowsである（環境構築めんどい）
- クラウドならどこからでもアクセスできる
というところです。
では早速始めましょう。
事前準備
GCEを利用します。
無料インスタンスの設定方法は下記の記事を参照してください。
まだない
無料インスタンスではメモリが少ないのでスワップ領域の設定をしています。
Linuxにスワップ領域をサクッと追加する【備忘録】
Linuxにスワップ領域を追加するスクリプトをサクッと載せています。
www.free-ds.com
2021.10.21
外部アクセスを有効にするにはファイアウォールの設定をします。
code-serverインストール
幸いインストールシェルは公式が用意してくれているので、これを実行すればOKです。
curl -fsSL https://code-server.dev/install.sh | sh更新も同様です。簡単ですね！
一度起動するとconfigファイルが生成されます。
systemctl --user enable --now code-server生成されたconfig.yamlファイルを編集します。
bind-addr: 127.0.0.1:8080
auth: password
password: "生成されたパスワード"
cert: falsevim ~/.config/code-server/config.yaml外部公開にするため、bind-addrを0.0.0.0:8080にします。
ポート番号は自由なので、好きな値にしてください。
パスワードはあとでログインする際に必要になります。変更もOKです。
編集が終わったら、code-serverを再起動します。
systemctl --user restart code-server最後にssh接続していないときも使えるようにします。
sudo loginctl enable-linger "自分のユーザ名"これでVM起動時に自動的に外部アクセス可能なcode-serverが起動します。
ファイアウォールの設定
GCEを利用する場合は、ファイアウォールの設定を忘れずに行いましょう。
GCPのVPCネットワーク＞ファイアウォールを開き、「ファイアウォールルールを作成」ボタンを押します。
最低限の設定は以下です。
- 名前：お好きなように
- ネットワーク：default
- 優先度：1000
- トラフィックの方向：上り
- 一致したときのアクション：許可
- ターゲット：指定されたターゲットタグ
- ターゲットタグ：http-server（※同様のターゲットタグのインスタンス全てでポートが開放されてしまうので注意してください。）
- ソースフィルタ：IPv4範囲
- 送信元IPv4範囲：0.0.0.0/0（全ての送信元）
- プロトコルポート：指定したプロトコルとポート
- tcp: 8080（好きなポートを指定してください）
あとはインスタンスURLにポート番号を加えてアクセスし、パスワードを入力して使えます！
例えば、
http://12.345.67.89:8080/
のような感じです。お試しください！
コメント