因為我想要用比筆電輕薄的平板電腦 iPad 上開發基於三大框架 React, Vuejs, Angular 的 Web 應用程式，但 iPad 上面沒有相關的原生應用程式，所以我找到其他替代方案:用瀏覽器開啟雲端 editor / IDE 環境，去撰寫和編譯 Web 應用程式。

主題:

1. 緣起
   1. code server 介紹
   2. linuxserver.io 的 docker-compose.yml 和 image
2. 架構說明
3. 環境設定
   1. apache 2.4
   2. linuxserver.io 做的，包含 code server 的 docker-compose 設定檔
   3. code server 設定
4. 成果

緣起

因為我想要用比筆電輕薄的平板電腦 iPad 上開發基於三大框架 React, Vuejs, Angular 的 Web 應用程式，但 iPad 上面沒有相關的原生應用程式，所以我找到其他替代方案:用瀏覽器開啟雲端 editor / IDE 環境，去撰寫和編譯 Web 應用程式。而且 code server 官方教學架設文件迄今(2020-11-07) 沒有提到 apache 的設定檔內容，所以我寫下此文章紀錄。
這裡岔開話題一下，去年買到 lightning 接頭的 iPad Air 想要投影 iPad 畫面到電視上真的很麻煩，因為要找副廠的 lighting 轉 HDMI 線，真的不容易而且價格貴，如果能買 usb-type c 接頭的 iPad 系列產品會比較好，因為市面上銷售的 usb-type c 轉 HDMI 副廠線比較多選擇，價格也比較便宜。

code server 介紹

code server 是一套提供與 VS Code 相同界面的雲端應用程式開發環境之套件，它是基於 VS Code 原始程式碼編譯，但抽掉 VS Code 原生的 Extension Market，改用 Code server 自己維護的 Extension Market 。改用自己維護的 Market 原因是因為擴充套件上架到 VS Code Extension Market 時合約授權都只給 VS Code Extension Market ，並沒有提供給額外其他地方，所以 Code server 有額外徵求熱門 extension 作者的授權，上架到他們維護的 extension market 。 本文討論的是 code server 的單人模式，如果要讓 code server 能夠同時服務多人，需要建立給每個想使用的人，額外的 docker container 空間和相關設定，使得彼此在隔離的空間工作。詳細設定，請自行查詢 code server 相關教學文件。
跟它類似的套件是 Theia ， Theia 被託管在 Eclipse 基金會下繼續維護，有許多公司的服務基於 Theia 內容去延伸，例如 gitpod.io, Arm 公司的 mbed studio 介面，有興趣者可依照前述連結前往觀看，本文章不會多加描述。

linuxserver.io 提供 docker-compose.yml 和 image

我習慣使用 docker-compose 和 docker 當作容器管理和運作工具，所以在網路上尋找，結果找到 linuxserver.io 組織有提供 code server 套件的參考設定檔和 image 檔案。相關內容請參考本文章底下提供的說明。
docker-compose.yml 裡面並沒有提供 http server 和 reverse proxy 服務的設定，所以需要依自己需求調整內容。

架構說明

code server 套件的原生安裝版和 linuxserver.io 提供的 docker image 本身自帶 web server ，而且我的環境是使用 reverse proxy (反向代理伺服器) 處理來自外部的連線，不讓外部直接連線到內部的服務，所以用 host 環境裡的 reverse proxy 增加 virtual host 設定檔。

|
|—– Reverse proxy —– http server at docker image: code server —– code server service inside docker image

環境設定

Apache 2.4 環境設定

因為 code server 使用 websocket 做到瀏覽器和伺服器之間的即時溝通，所以需要使用到 apache 的 websocket 相關模組: proxy_wstunnel。而且 proxy_wstunnel 相依於 proxy module ，所以也要啟用它。 另外因為是用 apache 當作 reverse proxy ，所以也要一併啟用 proxy_http 。

需要啟用 apache 的相關模組(module)

1. proxy
2. proxy_http
3. proxy_wstunnel

啟用方式:

sudo a2enmod proxy
sudo a2enmod proxy_http
sudo a2enmod proxy_wstunnel

# 啟用模組後重開 http server
sudo systemctl restart apache2

# 如果你不放心重開 http server 後沒有正常載入 code server 的 virtual host 設定，請依序用以下指令：

# 停用 code-server site 的 virtualhost 設定 
sudo a2dissite <your-code-server>.conf
sudo systemctl reload apache2

# 再次啟用 code-server site 的 virtualhost 設定
sudo a2ensite <your-code-server>.conf
sudo systemctl reload apache2

如果不清楚如何撰寫給 code-server site 的設定檔的關鍵內容，請參考以下內容。 請在 /etc/apache2/sites-available 目錄裡找到你的 code-server site 的 virtualhost 設定檔，假設名稱是 xxx.conf ，以下是 code-server site 的 virtualhost 設定檔內容範例:

<VirtualHost *:80>
  # 你的 code server 網域名, 請記得修改成你的網域名
  ServerName yourCodeServerDomain

  RewriteEngine on
  # 你的 code server 網域名, 請記得修改成你的網域名
  RewriteCond %{SERVER_NAME} =yourCodeServerDomain
  RewriteRule ^ https://%{SERVER_NAME}%{REQUEST_URI} [END,NE,R=permanent]

</VirtualHost>

<VirtualHost *:443>

  SSLEngine On
  # 引入用 letsencrypt 的給 apache ssl 設定檔案
  Include /etc/letsencrypt/options-ssl-apache.conf

  # 請記得修改成主機的連絡信箱
  ServerAdmin yourAdmin@yourCodeServerDomain
  # 你的 code server 網域名, 請記得修改成你的網域名
  ServerName yourCodeServerDomain

  # 重要: Reverse proxy and SSL 基礎設定
  ProxyRequests Off
  RequestHeader set X-Forwarded-Proto "https"
  SSLProxyEngine on
  ProxyPreserveHost On

  # 重要: 以下提供 Reverse Proxy 主機內容
  ProxyPass "/" "http://127.0.0.1:8443/"
  ProxyPassReverse "/" "http://127.0.0.1:8443/"
  
  # 重要: 以下提供 for websocket(code-server 需要使用 websocket) and non-websocket 的 RewriteCond and RewriteRule 內容
  RewriteEngine On
  RewriteCond %{HTTP:Upgrade} =websocket [NC]  # websocket 會用到
  RewriteRule /(.*) ws://localhost:8443/$1 [P,QSA,L] # websocket 會用到
  RewriteCond %{HTTP:Upgrade} !=websocket [NC]
  RewriteRule /(.*) http://localhost:8443/$1 [P,QSA,L]

  # apache error access log
  ErrorLog ${APACHE_LOG_DIR}/yourCodeServer_error.log  # 請記得修改成你想要的檔名
  # apache normal access log
  CustomLog ${APACHE_LOG_DIR}/yourCodeServer_access.log combined  # 請記得修改成你想要的檔名

  # configuration for mod_expires. 靜態檔案給瀏覽器於下次瀏覽時加速使用
  ExpiresActive On
  ExpiresDefault "access plus 1 year"

  # lets encrypt 的 SSL 設定檔相關路徑, 請記得修改成你的網域名
  SSLCertificateFile /etc/letsencrypt/live/yourCodeServerDomain/fullchain.pem
  SSLCertificateKeyFile /etc/letsencrypt/live/yourCodeServerDomain/privkey.pem

</VirtualHost>

Reference link 1: solution 1 at comment of github issue 1560
Reference link 2: solution 2 at comment of github issue 442

docker-compose.yml created by linuxserver.io

docker-compose.yml

version: "2.1"

services:
  code-server:
    image: ghcr.io/linuxserver/code-server:amd64-version-v3.6.2
    container_name: code-server
    environment:
      - PUID=1000 # set it to your user at host linux machine for solving permission issues of files modified or created through code server with docker
      - PGID=1000 # set it to your user at host linux machine for solving permission issues of files modified or created through code server with docker
      - UMASK=022 # for setting umask to running application
      - TZ=Asia/Taipei # 設定想要的時區 set timezone you want
      - PASSWORD=yourPassWord # optional. If you don't set it, it will has no password to authenticate for web. Set your password that you want to use in web authentication of code server
      - SUDO_PASSWORD=yourOwnPassWord # optional. If you want to install packages through code-server, you need to set this to what you want.
    volumes:
      - /your/path/to/configDirectory:/config
      - /your/path/to/projectDirectory:/home/coder/project
    ports:
      - 8443:8443
    restart: unless-stopped

Reference: code server’s document at docker hub

code server 設定

Content inside /config/.config/config.yml in docker image: code-server

bind-addr: 127.0.0.1:8080 # no need to change
auth: password # no need to change
password: yourPasswordSetInDockerComposeYmlFile # please change it to what you want
cert: false # no need to change to true because we use architecture of reverse proxy and put SSL certificate to reverse proxy to interact with outside connection. 
# So there is no need to put ssl certificate for interaction between code-server service and reverse proxy. 
# If you want communication between code-server service and reverse proxy, it's welcome to set it to true.

成果 - 安裝成功