# 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.安裝完成後啟動Docker desktop
## 二、於Docker中建立nginx容器，扮演網頁伺服器功能提供網頁內容服務
### 1.指定本機電腦的8080 Port與nginx容器的80 Port作為通訊窗口/管道
開啟CMD命令提示字元，輸入 docker run -d --name my-web-server -p 8080:80 nginx ，如果成功會看到類似下面畫面。

### 2.測試nginx網頁狀態
開啟瀏覽器輸入網址 http://localhost:8080/ ，如果成功會看到類似下面畫面。

### 3.開啟並透過Docker Desktop GUI介面查看nginx容器運作狀態

## 三、下載安裝ngrok，並取得ngrok授權，建立本機電腦與外部連線通道
### 1.下載安裝ngrok
開啟瀏覽器並輸入網址https://ngrok.com/ ，註冊並登入ngrok，下載安裝ngrok。

### 2.測試ngrok安裝狀態
開啟CMD命令提示字元，輸入ngrok，如果成功會看到類似下面畫面。
### 3.以剛剛註冊的帳號登入ngrok，並取得ngrok authtoken

### 4.將ngrok authtoken輸入到本機電腦端的ngrok設定檔內完成授權
開啟CMD命令提示字元，輸入ngrok config add-authtoken 383gRAJTPJ05m8BJvMX7dgD1ajo_5RLR4h3VGAwKjju2kwxLf，如果成功會看到類似下面畫面。

### 5.啟動ngrok通道，指定本機電腦端的8080 Port作為與ngrok Server連線的Port通道
開啟CMD命令提示字元，輸入ngrok http 8080，如果成功會看到類似下面畫面。
請將畫面中forwarding這行後面的https://xxxxx (畫面中反白處)*網址複製下來提供給外部人員連線使用(或測試使用)。

## 四、外部裝置連線結果測試及nginx服務停用連線結果測試
### 1. 外部裝置連線結果測試
於Docker中建立nginx容器，扮演網頁伺服器功能，提供網頁內容資訊。
測試本次實作最終結果是否成功。
將上一步驟取得的網址 https://xxxxx 提供給外部人員，使用電腦或行動裝置開啟，若有出現前面過程中nginx網頁畫面表示成功完成實作(參下圖)。

### 2. nginx服務停用連線結果測試
測試透過docker desktop將nginx容器停用，Actions狀態變成三角形狀態，讓nginx網頁服務停止。

將上一步驟取得的網址 https://xxxxx 提供給外部人員，使用電腦或行動裝置開啟，如果成功會看到類似下面畫面。