前言

這篇是小知識篇，
近期有一個需求是我需要連接至遠端的 docker 中，
並同時執行遠端 docker 的 html file，

這時候會碰到一個問題，如果是本地的 html file，我們可以直接用自己的瀏覽器打開，但「遠端+ docker 內的 html」我們可以怎麼辦呢?

這邊我紀錄一些實用的 extension

Live Preview

• Live Preview

可以直接在 VScode 新的分頁顯示出格式化後的 html 內容，
基本上就是我要的功能，可以直接把 docker 內的 html 文件顯示出來。

Live Server

• Live Server

可以透過本地的網頁，把 docker 內的 heml 顯示出來，
但目前使用上好像有時候會有 bug，自己更喜歡用上面那一個。

Reference

• Live Preview
• Visual Studio Code設定與插件
• Live Server

⭐Linux 指令 相關文章整理 (此表最後手動整理時間：2022/10/5) ⭐：
⭐Linux 終端機 (terminal) 操作、shell 篇⭐：
1.	(terminal指令 常用總整理)【Linux】linux/ubuntu/mac 基礎終端機 (terminal) 指令 & 基礎知識總整理，初學者/新手 必須知道的基礎指令 & 基礎知識大全（持續更新）
2.	(terminal快速鍵 常用總整理)【Linux】linux/ubuntu/mac 基礎終端機 (terminal) 快速鍵/小技巧，初學者/新手 必須知道的一些實用功能！（持續更新）
3.	【Linux】好用的終端機管理工具 – tmux (類似 screen 的進階版)
4.	【Linux】終端機小技巧 – default start screen treminal，無縫接軌任何電腦，繼續使用同一個 terminal 殘留下來的訊息
5.	【Linux】z，zim 套件中最快搜尋指定資料夾的套件，以後不用 cd 之後再慢慢 tab 尋找路徑了！
6.	【Linux】zim (+zsh) – 也許是目前最快也最實用的 linux terminal 與套件，直接把終端機開發效率飆升到最高
7.	【Linux】終端機小技巧 – sudo 補上快速完成 (終端機指令小祕技)
8.	【Windows】也許是 windows 上最貼近 linux 的 terminal，安裝 fluent terminal，在 windows 上使用 zsh (oh-my-zsh)
9.	【Linux】透過 screen 讓 terminal 內的工作內容可以無縫接軌到任何電腦 (儲存當下 terminal 內容)，並可以繼續操作
⭐Linux 基礎指令篇⭐：
1.	【嗡嗡精選】ubuntu 個人自用小抄 (last update: 2022/6/24)
2.	【Linux】(作業系統基礎知識) 簡單理解「相對路徑」與「絕對路徑」，程式設計 初學者/新手 必須知道的路徑知識總整理
3.	【Linux】linux ubuntu 中利用 mkdir 建立資料夾 相關參數總整理 (必定建立資料夾、修改資料夾權限 777)
4.	【Linux】linux ubuntu 使用 terminal (終端機) 關機 shutdown、重新開機 reboot 的方法
5.	【Linux】小知識 source 與 bash 執行 script 的差別
6.	【Linux】在 ubuntu terminal 中 執行關機、重新開機指令 (shutdown, reboot)
7.	【Linux】在 terminal 中 設定 ssh alias (bashrc, zshrc 中使用 alias)
8.	【Linux】Ubuntu 上安裝軟體的方式筆記 apt, apt-get, dpkg 總整理
9.	【Linux】在 Linux 中查看 cpu, gpu 資訊
⭐Linux 搜尋相關⭐：
1.	【Linux 搜尋相關 #1】在 terminal 的各種搜尋大全, ack, grep, find 個人經常使用情境整理
2.	【Linux 搜尋相關 #2】linux ubuntu 使用 grep, awk, xargs 尋找需要的資料，快速濾出/篩選 結果欄位 所需要的資訊 (內附圖文說明) filter column
3.	【Linux 搜尋相關 #3】linux, ubuntu 使用 ps, grep, pgrep 找到 執行中程式的相關資訊 與 pid (ps aux, ps -ef)
4.	【Linux 搜尋相關 #4】linux ubuntu 中利用 grep 蒐集 log 或任何文件內的訊息 (grep -A -B -C 的範圍搜尋)
⭐Linux 網路相關篇⭐：
1.	【Linux】利用 ifconfig 查詢 ip 並用 scp 傳送資料 – linux, ubuntu 基礎終端機指令學習 sample code (內含範例程式碼)
2.	【Linux】使用 sshfs 連線 將遠方磁碟當作像是在自己電腦的硬碟 mount disk on other computer
3.	【Linux】使用 curl 將網路上的檔案 透過終端機 terminal 的方式下載 download
4.	【ssh】透過建立 ssh authorized_keys 讓 VScode 繞過輸入 ssh 密碼 or 達成 ssh 免密碼登入 (last update: 2022/9/12)
5.	【Linux】透過 ssh config 設定 port forwarding，透過 local 網頁指定 Port 看到遠方主機對應的 Port 資訊 (內含 ssh config 設定整理)
6.	【Linux】修改 ssh config 取主機暱稱 | 透過 ssh authorized_keys 公私鑰，達成 ssh 免密碼登入
7.	【Linux】在 terminal 中尋找 username, hostname 作為 ssh 連線的方式 (以連線到 raspberrypi 為例)
8.	【Linux】透過 ssh 使本地 port 連接遠端 port 的內容 (ssh use local port to connect remote port)
9.	【Windows】在 windows VScode 透過 ssh 連線至遠端 Linux Docker container (2022/3/13 新增方法)
10.	【Windows】將 anydesk 作為 VPN 跳板 (建立 tcp tunnel)，使用 ssh 進行遠端連線開發 (Windows anydesk ssh command line)
11.	【Mac】在 Mac 開啟 ssh 的方法，從外部主機 ssh 連線至 Mac，ssh Mac localhost
12.	【Mac】將 anydesk 作為 VPN 跳板 (建立 tcp tunnel)，使用 ssh 進行遠端連線開發 (Mac anydesk ssh command line)
13.	【Linux】將 anydesk 作為 VPN 跳板 (建立 tcp tunnel)，使用 ssh 進行遠端連線開發 (anydesk ssh command line)
14.	【MobaXterm】在 Windows 中使用 MobaXterm VPN 連線至遠端系統 (linux, ubuntu) 遠端 ssh 顯示畫面
15.	【Linux】ubuntu/mac 安裝 sshpass，讓 ssh 可以免密碼直接登入，使用的效率更高
16.	【Linux】在 Linux 中 設定 X11 forward ssh 使遠端畫面能顯示在本地端
17.	【OpenVPN】mac 使用 OpenVPN 建立 VPN 遠端連線的方法 (全圖文說明)
⭐Linux 檔案處理相關⭐：
1.	【Linux】linux, ubuntu 壓縮檔案常用指令 tar gzip zip 7z 壓縮檔案切割、壓縮檔案加密 與 解壓縮套件安裝方法 (內附圖文說明)
2.	【Linux】Linux 查詢資料夾內的檔案數目 ls -1 | wc -l
3.	【Linux】linux ubuntu 中利用 tail -f 可以查看 log 並不斷更新
4.	【Linux】在終端機 terminal 使用 ln -s 建立如 windows, mac, ubuntu 檔案系統上的捷徑 – 軟連結 (Symbolic Link)
5.	【Linux】linux, ubuntu 使用 split 指令檔案切割、檔案合併
6.	【Linux】Linux 運用 sed 進行檔案內容的取代 instead 用法
7.	【Linux】mac/ubuntu 如何利用 terminal 打開 GUI 資料夾總整理
8.	【Linux】透過 Rclone 掛載 google drive，達成本地檔案總管 / terminal 訪問 的效果 (rclone mount google drive)
9.	【Linux】使用 Rclone 完成 google drive mount，使用終端機操作 google drive，將 google drive 作為本地硬碟使用 (ubuntu, mac, windows)
⭐Linux 特殊應用篇⭐：
1.	【Linux】Linux 增加 swap 的虛擬記憶體空間
2.	【Linux】在 Ubuntu (Linux 系統) 上透過 / etc/fstab 安裝新的硬碟、新增硬碟容量 (SSD, HDD) (內附圖文說明)
3.	【Linux】linux / ubuntu 複製硬碟的方法 copy all disk
4.	【Linux】(內附圖文說明) ubuntu 停止自動更新的方法 disable auto update
5.	【Linux】linux/ubuntu 下執行 anaconda-navigator 的方法
6.	【Linux】linux ubuntu 使用 flock 建立程式執行時的順序控制, 固定系統執行的 process 數量 (確保程式執行順序)
⭐Bash 自動化程式撰寫⭐：
1.	【Bash】echo，bash 的 hello world 基本教學，開始自動化程式的第一堂課 / 撰寫腳本，利用 echo 顯示變數
1.	【Bash】(內含範例程式碼) Linux terminal 取得 (資料夾內) 所有的檔案名稱 (bash get all file, bash glob, parse file)
1.	【Bash】什麼是 #!/bin/bash, #!/bin/sh，為什麼要加在 script 前面 (問題解決：sh, bash 的不同)
⭐Linux 文字編輯器相關⭐：
1.	(vim指令 常用總整理)【Linux】linux/ubuntu/mac vim 的 新手/初學者 的基礎使用指令 與 個人常用功能總整理 (持續更新)
2.	【Linux】linux/ubuntu/mac nano 的 新手/初學者 的基礎使用指令 與 個人常用功能總整理 (持續更新)
⭐Docker 相關⭐：
1.	【Git】- 03 | 第一次將 git 的內容推上 (push 上) 雲端 (此處雲端以 github 示範)
2.	【Docker】建立一個有桌面 GUI 的 container, 透過 xrdp 建立桌面
3.	【Docker】利用 VScode 透過 ssh tunnel 直接連線到遠端 Docker 的 container 中進行開發
4.	【Docker】在 windows 上使用安裝並使用 Docker (全圖文說明) windows 安裝 WSL (Windows Subsystem for Linux)
⭐Git 相關⭐：
1.	【Git】- 03 | 第一次將 git 的內容推上 (push 上) 雲端 (此處雲端以 github 示範)
2.	【Git】git 小技巧 – git checkout 快速切換為上一次使用的 branch / git branch 自動完成 (git checkout branch without typing full name)
3.	【Git】2 – (git local) 透過 git 修改過去的錯誤 commit (時空倒流)，git 錯誤處理 (建議先學的 git 基本實用功能)
⭐ffmpeg 相關⭐：
1.	【ffmpeg】利用 ffmpeg 來直接修改影片的對比度、亮度、飽和度 (contrast, brightness, saturation)
⭐一些我自己用的腳本⭐：
1.	【Linux】自動化腳本 / linux ubuntu 上純使用 terminal 安裝 anaconda (install anaconda without GUI)
2.	【嗡嗡精選】自動化腳本 / 個人自用 alias, 加快我們使用 terminal 開發的效率
3.	【Linux】在 fish terminal 初始化 anaconda
4.	【Docker】自動化腳本 / 自動初始化 container , auto run container setting script
5.	【Linux】自動化腳本 / 安裝 fish, oh-my-fish （問題解決：omf theme not working）
6.	【嗡嗡精選】自動化腳本 / 安裝 zsh, oh-my-zsh, powerlevel10k
7.	【Linux】自動化腳本 / 自動建立資料夾路徑 auto make folder script
8.	【Docker】自動化腳本 / 自動 commit container 為 tar 腳本, auto commit container to tar script
⭐【喜歡我的文章嗎? 歡迎幫我按讚~ 讓基金會請創作者喝一杯咖啡! 】 如果喜歡我的文章，請幫我在下方【按五下Like】 (Google, Facebook 免註冊)，會由 「LikeCoin」 贊助作者鼓勵繼續創作，讀者們「只需幫忙按讚，完全不用出錢」哦!