先前已經架設好 codeserver 環境,也能在瀏覽器環境下撰寫程式。但如果是開發 React, Angular, Vue 這種想要開發時需要編譯就能預覽看到修改後情況的框架環境,要怎麼設定 codeserver,才能跟在本機開發一樣能夠預覽呢?
解決方式是再開一個 port ,給 npm start 或 yarn start 編譯讓本機能夠顯示修改程式碼後的畫面,不論給 React, Angular, Vue 框架,都能使用這個解決方式。以下是使用之前的設定檔案例,進一步調整的 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"
- "32345:3000" # IMPORTANT for this example. 32345 is for host machine. 3000 is for container machine.
restart: unless-stopped
設定上述內容,並且關掉與重新啟用 code-server container ,在你的 codeserver 主網址區,多增加 :32345
文字,就能看到 npm start
或 yarn start
編譯修改後程式碼的內容,並在本機運作的畫面。