# 進入開發環境

{%hackmd 1lpg7PuqRoaui6XyJcrylw %}

## 步驟
:::warning
:exclamation: [記得先安裝: WSL2, Docker, VSCode](/@auto-test-practice/rJoJvvXFO/%2FU9g9_GQ2QkOvG8ribu9i-Q/#開發環境安裝)
:::

主要分為三大步驟
1. [創建資料夾](#創資料夾)
2. [啟動Container](#啟動Container)
3. [將VSCode掛到Container](#將VSCode掛到Container)

完成三大步驟後檢查環境，並開始Hands-on

4. [檢查開發環境(建議第一次使用時執行)](#檢查開發環境)
5. [開始Hands-on](#開始Hands-on)

### 創資料夾
1. 用powershell或CMD確認`<使用者資料夾>`名稱。

#在powershell中
$env:USERPROFILE


或

#在CMD中
echo %USERPROFILE%


2. 開啟WSL2。

3. 在WSL2中輸入下列指令，移動到`<使用者資料夾>`。

cd  /mnt/c/Users/<使用者資料夾>/


:::info
:bulb:如果想確認`<使用者資料夾>`名稱可以先輸入一半的路徑，然後按`tab`查詢。
譬如：輸入`cd /mnt/c/Users/`後按`tab`查詢。
:::

4. 在`<使用者資料夾>`下創建新資料夾，參考名字`my_docker_volume`。

mkdir my_docker_volume

5. 檢查資料夾是否創建成功。若能找到剛創建的資料夾表示成功。

ls


檢查Windows下的`<使用者資料夾>`會出現剛剛建的資料夾，他們是同一個資料夾唷！

:::info
:bulb: 可以從WSL2`/mnt`下存取本機電腦的檔案系統。 例如從可以WSL2 `/mnt/c`存取`C:`下的檔案。
:::
:::info
:link: [ink了解更多WSL的檔案權限](https://docs.microsoft.com/zh-tw/windows/wsl/file-permissions)
:notebook: [Linux常用指令](/nk5qcm_aQ1qhx0N1t0hVSA)
:::

### 啟動Container
6. 啟動container，複製下列指令到WSL2中，將`<使用者資料夾>`置換成自己的資料夾名稱即可。

docker run -dit --restart always -v /mnt/c/Users/<使用者資料夾>/my_docker_volume:/usr/src/app simonwxzhao/auto-test

- `docker run ... <image>` [runs a containers](https://docs.docker.com/engine/reference/run/)
- `simonwxzhao/auto-test`為container的image。
- `-d` (在背景執行) [--detached](https://docs.docker.com/engine/reference/run/#detached--d)
- `-i` --interactive (互動模式)
- `-t` --tty (配置一個終端機)
- `--restart always` [always restart the container if it stops.](https://docs.docker.com/config/containers/start-containers-automatically/)
- `-v /mnt/c/Users/<使用者資料夾>/my_docker_volume:/usr/src/app` [volume, shared filesystem.](https://docs.docker.com/engine/reference/run/#volume-shared-filesystems)
- `/mnt/c/Users/<使用者資料夾>/my_docker_volume`是host的directory(folder)。
- `/usr/src/app`是container內的directory(folder)。
- 透過這一步可以將host的資料夾和container內的資料夾連在一起。


7. 檢查container是否運作正常。若`STATUS`顯示`Up <一段時間>`表示成功。

docker ps


:::info
:link: [了解更多docker指令](https://docs.docker.com/engine/reference/commandline/docker/)
:::

### 將VSCode掛到Container
8. 開啟VSCode。

9. 安裝「Remote - Container」。

10. Attach VSCode to the container

11. 需要一點時間啟動，可以點開看log，監控有沒有異樣。

12. VSCode左下角出現這樣的字樣就對了！

13. 點選「Open Folder」

14. 輸入`/usr/src/app` 點選「OK」。

15. 檢查測邊Explorer和Terminal顯示所處的位置，如果是`/usr/src/app`代表正確。

### 檢查開發環境
:::info
:bulb: 建議第一次使用時先執檢查，之後可以略過。
:::
#### 檢查工具版本
16. 打開Terminal。

17. 在Terminal內檢查各開發工具版本，版本跟下圖一致(或以上)就可以囉。

git --version
python --version
behave --version
robot --version


#### 檢查Volume設置
18. 在Terminal中輸入`echo "Hello World!" > hello_world.txt`創建一個文字檔。

19. 左側Explorer中出現`hello_world.txt`，打開後內文為`Hello World!`就成功了。

20. 在Windows中開啟`C:\Users\<使用者資料夾>\my_docker_volume`，資料夾內也有`hello_world.txt`，打開後內文為`Hello World!`就成功了。

21. 在Windows`C:\Users\<使用者資料夾>\my_docker_volume`中，刪除`hello_world.txt`，回到VSCode中`hello_world.txt`也被刪除代表成功了。

:::info
:link: [了解如何在Container內開發](https://code.visualstudio.com/docs/remote/containers)
:::

### 開始Hands-on
:::warning
:exclamation: 接續步驟**15**
:::