作為一個程序員，在開發過程中，經常會遇到項目部署的問題，在現在本就不穩定的大環境下，前端開發也需要掌握部署技能，來提高自己的生存力，今天就詳細說一下如何把一個前端資源放到遠程服務器上面通過docker部署，并且可以在瀏覽器中訪問前端頁面；
前提：你有一個遠程服務器，并且可以通過 SSH 工具訪問
步驟一：安裝 Docker————進入遠程服務器上面操作
1. 使用 SSH 連接到你的遠程服務器。使用以下命令：
命令格式為：?ssh 客戶端用戶名@服務器ip地址?
ssh your_username@your_server_ipeg:?
2. 更新現有的軟件包索引
sudo apt-get update3.?安裝必要的包，這些包允允許 apt （Linux系統的命令行工具，類似cmd）使用 HTTPS訪問軟件包
sudo apt-get install apt-transport-https ca-certificates curl gnupg lsb-release
4.?添加 Docker 官方的 GPG 密鑰，這確保你從可信來源安裝 Docker：
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg
5. 設置穩定的 Docker 存儲庫，通過添加 Docker 的 APT 軟件源，可以從 Docker 官方倉庫安裝 Docker；
echo \"deb [arch=amd64 signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/ubuntu \$(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
6.?安裝 Docker Engine?，更新軟件包索引并安裝最新版本的 Docker Engine 和容器運行時：
sudo apt-get update
sudo apt-get install docker-ce docker-ce-cli containerd.io
7.?驗證 Docker 安裝是否成功，運行一個測試容器來驗證 Docker 是否正確安裝：
sudo docker run hello-world
步驟二：準備前端靜態網頁————本地電腦上面操作
1. 創建項目文件夾；
????????在自己電腦上創建一個新的項目文件夾，例如 my-static-website
2. 將你的前端靜態網頁文件放入項目文件夾中；
????????將你的靜態網頁文件（例如 index.html, style.css, script.js 等）放入 my-static-website 文件夾
3. 創建 Dockerfile 文件；
????????在項目文件夾中創建一個 Dockerfile 文件，用于定義 Docker 鏡像的構建過程。以下是一個使用 Nginx 作為基礎鏡像的 Dockerfile 示例
# 使用官方 Nginx 鏡像作為基礎鏡像
FROM nginx:alpine# 將當前目錄下的所有文件復制到 Nginx 容器中的默認 html 目錄
COPY . /usr/share/nginx/html# 暴露容器的 80 端口
EXPOSE 80# 運行 Nginx
CMD ["nginx", "-g", "daemon off;"]
步驟三：構建 Docker 鏡像————本地電腦上面操作
1.?導航到項目文件夾；使用cmd終端或命令行工具進入你的項目文件夾中
cd path_to_your_project_folder/my-static-website
2.?構建 Docker 鏡像
運行以下命令來構建 Docker 鏡像：
docker build -t my-static-website .
解釋：
docker build: 構建一個新的 Docker 鏡像。-t my-static-website: 為鏡像指定一個標簽（my-static-website）。.: 表示 Dockerfile 位于當前目錄
3.?確認 Docker 鏡像已構建成功?；運行以下命令查看本地 Docker 鏡像列表：
docker images
步驟四：鏡像上傳
這里提供兩種上傳方式，一種是上傳到指定鏡像庫，然后從服務器上通過pull命令拉取；
另外針對離線環境，與外網隔絕的情況下，可以通過把鏡像打成tar包進行手動上傳到服務器；
方式一：推送 Docker 鏡像到 Docker Hub（或其他鏡像倉庫）————本地電腦上面操作
1. 登錄 Docker Hub 運行以下命令登錄到 Docker Hub：
docker login
2.?標記鏡像；將構建的本地鏡像標記為 Docker Hub 上的鏡像：
docker tag my-static-website your_dockerhub_username/my-static-website
解釋：
docker tag: 為本地鏡像創建一個新的標簽。my-static-website: 本地鏡像名稱。your_dockerhub_username/my-static-website: Docker Hub 上的鏡像名稱。
3.?推送鏡像 將標記的鏡像推送到 Docker Hub：
docker push your_dockerhub_username/my-static-website
解釋：
docker push: 推送鏡像到鏡像倉庫。your_dockerhub_username/my-static-website: 目標鏡像名稱。
方式二：將鏡像打包成tar包，通過ssh工具上傳到遠程服務器
1.?導出 Docker 鏡像為 tar 文件?
使用 docker save 命令將 Docker 鏡像保存為 tar 文件，tar文件默認保存在當前路徑；
docker save -o my-static-website.tar my-static-website:latest
2. 通過遠程工具（如xftp）工具將鏡像壓縮文件上傳到服務
-------這里根據實際的ftp文件而定；
步驟五：在遠程服務器上獲取并運行 Docker 鏡像——————進入遠程服務器上面操作
方式一：docker鏡像倉庫拉取
1.?在遠程服務器上登錄 Docker Hub 使用以下命令登錄 Docker Hub
sudo docker login
2.?拉取鏡像 運行以下命令從 Docker Hub 拉取鏡像
sudo docker pull your_dockerhub_username/my-static-website
解釋：
sudo docker pull: 從鏡像倉庫拉取鏡像。your_dockerhub_username/my-static-website: 要拉取的鏡像名稱。
方式二：手動上傳的鏡像
???????1.?導航到 tar 文件所在目錄，使用 cd 命令進入上傳的 tar 文件所在目錄：
cd /path/to/upload
2.?導入 Docker 鏡像，使用 docker load 命令將 tar 文件導入為 Docker 鏡像：
sudo docker load -i my-static-website.tar
解釋：
docker load: 從文件中加載鏡像。-i my-static-website.tar: 指定輸入文件
后續步驟兩種方式都是一樣的操作：
3.?運行容器 運行以下命令啟動容器：
sudo docker run -d -p 80:80 your_dockerhub_username/my-static-website
解釋：
sudo docker run: 運行一個新的容器。-d: 后臺運行容器。-p 80:80: 將容器的 80 端口映射到主機的 80 端口。your_dockerhub_username/my-static-website: 要運行的鏡像名稱。
步驟六：通過網址訪問靜態頁面————本地電腦上面操作
1.?確認服務器上的防火墻允許 HTTP 流量 使用以下命令確保服務器允許 HTTP 流量：
sudo ufw allow 80/tcp
2.?訪問你的域名或服務器 IP 地址；在瀏覽器中輸入你的服務器 IP 地址或域名來訪問你的靜態網站。例如：
http://your_server_ip
結語
通過以上步驟，你已經成功地將前端靜態網頁通過 Docker 部署到遠程服務器上，并且可以通過網址訪問該靜態頁面。如果有任何問題，請隨時聯系。
