code-serverの構築手順

code-serverをインストールした際の手順を忘れないうちにdumpしておきます。
code-serverはブラウザからアクセスして利用できるVSCodeのサーバアプリケーションです（※MS公式のソフトウェアではありません）。

Linuxマシン上のファイルを直接VSCodeから触る手段としては、VSCodeの「Remote - SSH」拡張を使用する手段もありますが、
こちらはWebブラウザから利用できるという点で、より手軽と言えます。また、クライアント機の性能が貧弱でVSCodeの動作が重い、といった場合にも利用するメリットがあると思います。

• Github

• Document

動作環境

• Red Hat Enterprise Linux release 8.6
• code-server version 4.7.0

手順

1. インストールスクリプトを利用してインストールしました。
   以下のコマンドを実行するだけです。

   curl -fsSL https://code-server.dev/install.sh | sh
   

2. systemdサービスとして登録されるので、以下で起動できます。

   # マシン起動時に自動起動
   systemctl enable code-server@[実行ユーザ]
   # code-serverの起動
   systemctl start code-server@[実行ユーザ]
   

3. デフォルトでは、localhostからのアクセスしか許可しないので、設定を変更します。

   ~/.config/code-server/config.yaml

   - bind-addr: 127.0.0.1:8080
   + bind-addr: 0.0.0.0:8080
   auth: password
   password: [初期パスワード]
   cert: false
   

   # code-serverの再起動
   systemctl restart code-server@[実行ユーザ]
   

4. ブラウザからhttp://[マシンのIPアドレス]:8080/にアクセスすると、code-serverにアクセスできます。
   アクセス時に、↑の設定ファイルに記載されたパスワードの入力が求められます。
   

HTTPSで接続する

上記までの手順で、HTTP接続でcode-serverを利用できるようになっています。
が、実はこのままだとMarkdownやAsciidocのプレビューがブラウザ上でできないという問題があります。

理由として、MarkdownやAsciidocのプレビューにはService Workerの有効化が必要とのことであり、
通常、HTTPS接続でしかService Workerを有効化できないためです。

• 該当issue

そのため、HTTPSで接続できるように設定を変更します。
今回は、ローカルのサーバにcode-serverを構築しているので、オレオレルート証明書とサーバ証明書を作成する方法で実施します。

---

※2023/10/18修正
証明書の作成方法をよりシンプルにしました。

---

オレオレルート証明書を作成

ディレクトリ・ファイルの作成

最初はホームディレクトリにいるものとします。

mkdir certs
cd certs

オレオレルート証明書の作成

# 秘密鍵の作成
openssl ecparam -out ca.key -name prime256v1 -genkey
# 証明書署名要求ファイルの作成
openssl req -new -sha256 -key ca.key -out ca.csr

いくつか入力項目がありますが、今回は以下のようにしました。

• Country Name (2 letter code) [XX]:JP
• State or Province Name (full name) []:Tokyo
• Locality Name (eg, city) [Default City]:
• Organization Name (eg, company) [Default Company Ltd]:
• Organizational Unit Name (eg, section) []:
• Common Name (eg, your name or your server's hostname) []:codeserver-ca
• Email Address []:

# オレオレルート証明書の作成
# 有効期限は実質無期限（100年）としておきます
openssl x509 -req -sha256 -days 36500 -in ca.csr -signkey ca.key -out ca.crt

code-server用の証明書の作成

# 秘密鍵の作成
openssl ecparam -out codeserver.key -name prime256v1 -genkey
# 証明書署名要求ファイルの作成
openssl req -new -sha256 -key codeserver.key -out codeserver.csr

入力項目は以下のようにしました。

• Country Name (2 letter code) [XX]:JP
• State or Province Name (full name) []:Tokyo
• Locality Name (eg, city) [Default City]:
• Organization Name (eg, company) [Default Company Ltd]:
• Organizational Unit Name (eg, section) []:
• Common Name (eg, your name or your server's hostname) []:codeserver
• Email Address []:

# subjectAltNameでサーバのプライベートIPを指定
cat <<EOF > subjectnames.txt
> subjectAltName = IP:xx.xx.xx.xx
> EOF

# サーバ証明書の作成
# 有効期限は実質無期限（100年）としておきます
openssl x509 -req -in codeserver.csr -CA  ca.crt -CAkey ca.key -CAcreateserial -out codeserver.crt -days 36500 -sha256 -extfile subjectnames.txt
# 証明書の内容表示
openssl x509 -in codeserver.crt -text -noout

code-serverのオプションに証明書と秘密鍵を指定

code-serverのユニットファイルを編集します。

/usr/lib/systemd/system/code-server@.service

[Unit]
Description=code-server
After=network.target

[Service]
Type=exec
- ExecStart=/usr/bin/code-server
+ ExecStart=/usr/bin/code-server --cert <ホームディレクトリパス>/certs/codeserver.crt --cert-key <ホームディレクトリパス>/certs/codeserver.key
Restart=always
User=%i

[Install]
WantedBy=default.target

code-serverを再起動します。

systemctl daemon-reload
systemctl restart code-server@[実行ユーザ]

証明書をブラウザに登録

ブラウザに登録するため、証明書の拡張子を.derに変換します。

cd certs
openssl x509 -outform der -in codeserver.crt -out codeserver.der
openssl x509 -outform der -in ca.crt -out ca.der

ファイルをクライアント機に転送して、インストールします。
Windowsの場合は、以下の証明書ストアに配置してください。

• codeserver.der → 「信頼された発行元」
• ca.der → 「信頼されたルート証明機関」

ブラウザからHTTPSでアクセス

https://[マシンのIPアドレス]:8080/でアクセスできるようになっています。
これで、Service Workerを有効化できるようになり、code-server上でもMarkdownやAsciidocのプレビューができるようになります。

以上。