LoginSignup
8
10

code-serverの構築手順

Last updated at Posted at 2022-09-15

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にアクセスできます。
    アクセス時に、↑の設定ファイルに記載されたパスワードの入力が求められます。
    code-server.JPG

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のプレビューができるようになります。
code-server2.JPG

以上。

8
10
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
10