preloader
心得

Codeserver ports for React app development | 為開發 React app 所開啟的 codeserver port

先前已經架設好 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 startyarn start 編譯修改後程式碼的內容,並在本機運作的畫面。