---
# System prepended metadata

title: 進入開發環境

---

# 進入開發環境

{%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確認`<使用者資料夾>`名稱。
```bash=
#在powershell中
$env:USERPROFILE
```
![](https://i.imgur.com/8t5GmZv.png)

或
```bash=
#在CMD中
echo %USERPROFILE%
```
![](https://i.imgur.com/RqkT4mx.png)

2. 開啟WSL2。

3. 在WSL2中輸入下列指令，移動到`<使用者資料夾>`。
```bash=+
cd  /mnt/c/Users/<使用者資料夾>/
```
![](https://i.imgur.com/uYmoVS4.png)

:::info
:bulb:如果想確認`<使用者資料夾>`名稱可以先輸入一半的路徑，然後按`tab`查詢。
譬如：輸入`cd  /mnt/c/Users/`後按`tab`查詢。
![](https://i.imgur.com/9NxTKBe.png)
:::

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

```bash=+
mkdir my_docker_volume
```

5. 檢查資料夾是否創建成功。若能找到剛創建的資料夾表示成功。
```bash=+
ls
```
![](https://i.imgur.com/rpsOS3T.jpg)

檢查Windows下的`<使用者資料夾>`會出現剛剛建的資料夾，他們是同一個資料夾唷！
![](https://i.imgur.com/DJKGnFW.png)

:::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中，將`<使用者資料夾>`置換成自己的資料夾名稱即可。
``` bash=+
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內的資料夾連在一起。

![](https://i.imgur.com/aSpG0VN.png)

7. 檢查container是否運作正常。若`STATUS`顯示`Up <一段時間>`表示成功。
```bash=+
docker ps
```
![](https://i.imgur.com/PCR80TJ.png)

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


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

9. 安裝「Remote - Container」。
![](https://i.imgur.com/dI8uvyy.png)

10. Attach VSCode to the container
![](https://i.imgur.com/MjcnUfC.png)

11. 需要一點時間啟動，可以點開看log，監控有沒有異樣。
![](https://i.imgur.com/87IV7RX.png)

12. VSCode左下角出現這樣的字樣就對了！
![](https://i.imgur.com/ScAbZ8J.png)

13. 點選「Open Folder」
![](https://i.imgur.com/PeNw22e.png)

14. 輸入`/usr/src/app` 點選「OK」。
![](https://i.imgur.com/JcQDXNd.png)

15. 檢查測邊Explorer和Terminal顯示所處的位置，如果是`/usr/src/app`代表正確。
![](https://i.imgur.com/oIgbFBu.png)

### 檢查開發環境
:::info
:bulb: 建議第一次使用時先執檢查，之後可以略過。
:::
#### 檢查工具版本
16. 打開Terminal。
![](https://i.imgur.com/YxdIcWO.png)

17. 在Terminal內檢查各開發工具版本，版本跟下圖一致(或以上)就可以囉。
```bash=+
git --version
python --version
behave --version
robot --version
```
![](https://i.imgur.com/n9TwKdV.png)


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

19. 左側Explorer中出現`hello_world.txt`，打開後內文為`Hello World!`就成功了。
![](https://i.imgur.com/DAKcEuR.png)

20. 在Windows中開啟`C:\Users\<使用者資料夾>\my_docker_volume`，資料夾內也有`hello_world.txt`，打開後內文為`Hello World!`就成功了。
![](https://i.imgur.com/JCA2Fdu.png)

21. 在Windows`C:\Users\<使用者資料夾>\my_docker_volume`中，刪除`hello_world.txt`，回到VSCode中`hello_world.txt`也被刪除代表成功了。
![](https://i.imgur.com/lHxN8Oy.png)

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

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