---
# System prepended metadata

title: Docker、Nginx及ngrok安裝設定與實作測試
tags: [nginx, ngrok, docker]

---

# Docker、Nginx及ngrok安裝設定與實作測試
#### 版本紀錄
1150111 V1 創稿
## 資料流說明
當一個外部使用者(例如你的朋友)使用電腦或行動裝置輸入你提供的ngrok網址(https://xxxxx)時，可以瀏覽你準備好對外提供的網頁內容，資料封包走法說明如下：
1.	外部使用者 --> 發起請求到你提供的ngrok網址(https://xxxxx)。
2.	ngrok 伺服器 --> 接收請求並轉發到你電腦上運行的 ngrok Client。
3.	ngrok Client --> 將請求送到你電腦的 localhost:8080。
4.	Docker Desktop --> 接收到 8080 Port的請求，轉發給內部的 Nginx 容器 80Port。
5.	Nginx --> 處理請求，回傳網頁內容至外部使用者(你的朋友)的電腦或行動裝置(沿前述1-4路徑原路返回)。
 
## 一、下載安裝、安裝與啟動Docker desktop
### 1.開啟瀏覽器並輸入網址https://www.docker.com/products/docker-desktop/
### 2.依作業系統選取對應版本後下載並完成安裝
![圖片3](https://hackmd.io/_uploads/HyYy37-HWl.png)
### 3.安裝完成後啟動Docker desktop
![圖片4](https://hackmd.io/_uploads/ByWl3mbrbe.png)
## 二、於Docker中建立nginx容器，扮演網頁伺服器功能提供網頁內容服務
### 1.指定本機電腦的8080 Port與nginx容器的80 Port作為通訊窗口/管道 
開啟CMD命令提示字元，輸入 docker run -d --name my-web-server -p 8080:80 nginx ，如果成功會看到類似下面畫面。
![圖片5](https://hackmd.io/_uploads/rJIUnQ-BWx.png)

### 2.測試nginx網頁狀態
開啟瀏覽器輸入網址 http://localhost:8080/ ，如果成功會看到類似下面畫面。
![圖片6](https://hackmd.io/_uploads/BJhL2QWBbx.png)

### 3.開啟並透過Docker Desktop GUI介面查看nginx容器運作狀態
![圖片7](https://hackmd.io/_uploads/BkeF2mZrbg.png)

## 三、下載安裝ngrok，並取得ngrok授權，建立本機電腦與外部連線通道
### 1.下載安裝ngrok
開啟瀏覽器並輸入網址https://ngrok.com/ ，註冊並登入ngrok，下載安裝ngrok。
![螢幕擷取畫面 2026-01-11 215004](https://hackmd.io/_uploads/rykhc7ZB-e.png)

### 2.測試ngrok安裝狀態
開啟CMD命令提示字元，輸入ngrok，如果成功會看到類似下面畫面。
![圖片1](https://hackmd.io/_uploads/HJHRqm-SZl.png)
### 3.以剛剛註冊的帳號登入ngrok，並取得ngrok authtoken
![螢幕擷取畫面 2026-01-11 215238](https://hackmd.io/_uploads/HyjLjXbSWg.png)

### 4.將ngrok authtoken輸入到本機電腦端的ngrok設定檔內完成授權
開啟CMD命令提示字元，輸入ngrok config add-authtoken 383gRAJTPJ05m8BJvMX7dgD1ajo_5RLR4h3VGAwKjju2kwxLf，如果成功會看到類似下面畫面。
![圖片2](https://hackmd.io/_uploads/BJUKo7bBWx.png)

### 5.啟動ngrok通道，指定本機電腦端的8080 Port作為與ngrok Server連線的Port通道
開啟CMD命令提示字元，輸入ngrok http 8080，如果成功會看到類似下面畫面。
請將畫面中forwarding這行後面的https://xxxxx (畫面中反白處)*網址複製下來提供給外部人員連線使用(或測試使用)。
![螢幕擷取畫面 2026-01-11 214825](https://hackmd.io/_uploads/ry3B9m-Sbe.png)
 
## 四、外部裝置連線結果測試及nginx服務停用連線結果測試
### 1. 外部裝置連線結果測試
於Docker中建立nginx容器，扮演網頁伺服器功能，提供網頁內容資訊。
測試本次實作最終結果是否成功。
將上一步驟取得的網址 https://xxxxx 提供給外部人員，使用電腦或行動裝置開啟，若有出現前面過程中nginx網頁畫面表示成功完成實作(參下圖)。
![螢幕擷取畫面 2026-01-11 213806](https://hackmd.io/_uploads/HyMDY7WB-e.png)

### 2. nginx服務停用連線結果測試
測試透過docker desktop將nginx容器停用，Actions狀態變成三角形狀態，讓nginx網頁服務停止。
![螢幕擷取畫面 2026-01-11 214549](https://hackmd.io/_uploads/rJ_iYXZSbl.png)

將上一步驟取得的網址 https://xxxxx 提供給外部人員，使用電腦或行動裝置開啟，如果成功會看到類似下面畫面。
![螢幕擷取畫面 2026-01-11 214557](https://hackmd.io/_uploads/B1NnFm-H-e.png)

 
 
