---
title: 免安裝的環境建置
tags: 泰職_前端網頁開發, CH00, 1H
date: 2019-10-04
---
# 免安裝Web環境+自動同步Dropbox
[TOC]
> [name=Loki Jiang] [time=Wed, Jun 5, 2019 12:12 AM]
---

## 下載 web600_portable
此提供泰山職訓學生使用，提供您在兩台以上電腦進行移動的進行快速還原。方便學員回家練習使用相同環境。

請開啟教室電腦，連結網路磁碟機 Z:\\192.168.211.211\教師資料夾\web600_portable.zip進行下載，並解壓縮至您自己的**USB之根目錄**或**E槽之根目錄**下。

:::danger
**注意事項**

本工具包因礙於XAMPP官方說明之限制，需安裝在磁碟區或USB之主層級目錄 `如 D:/xampp/` 或 `F:/xampp/`等...最上層目錄下才能正常執行XAMPP。
:::

:::info
**來源說明**
##### 本工具包之版本與載點來源 (不用下載)
- [**VSCode-win32-x64-1.34.0**](https://code.visualstudio.com/docs/?dv=winzip)
- [**xampp-windows-x64-7.3.5-1-VC15.zip**](https://sourceforge.net/projects/xampp/files/XAMPP%20Windows/7.3.5/xampp-windows-x64-7.3.5-1-VC15.zip/download)

##### 免安裝的製作方式請參考官方文件
- :link: [**VSCode: Portable Mode**](https://code.visualstudio.com/docs/editor/portable)
- :link: [**XAMPP: How can I start XAMPP without setup?**](https://www.apachefriends.org/faq_windows.html)

:::

---
## 啟用xampp與相關設定

### 參數調整設定
解壓縮後原則上不需要再修改設定，XAMPP路徑觀念為主目錄最高層級向下探索。
若您需要調整Web資料夾目錄，請參考下列圖片說明

> 如果web資料夾位置希望為`E:\www`

> 那你的Apache參數設定(http.conf)調整必須為相同對應位置
> 

### Web Server(網頁伺服器)啟用方式
1. 選擇路徑\xampp\xampp-control.exe
2. 啟用Apache，點選Start
3. 確認綠色狀態，且Port數據443
4. 開啟遊覽器輸入網址`http://127.0.0.1` 或 `http://localhost/` 確認服務正常運作


---
## 啟用VSCode與相關設定

### 參數調整設定
解壓縮後原則上不需要再修改設定，目前已包含教師所推薦之環境設定與常用擴充套件。若需要調整可開啟軟體後自行再修改或解除安裝套件。注意事項有以下幾點

1. 環境設定的資料位於\VSCode\data\user-data
2. 擴充套件的資料位於\VSCode\data\extensions
3. 免安裝版不會自動更新版本，但會提示您另行下載新版本。
4. VSCode可以隨意搬移或更改下載新版本並不影響崩壞，只需記得上列1-2點之`data`資料夾進行複製搬移即可


### VSCode啟用方式
開啟路徑檔案\VSCode\Code.exe即可開啟軟體使用。

:::danger
**問題發生**
第一次開啟免安裝時有很大機率會中文化失敗(官方問題)。關閉重新啟動即可解決。
:::

## 密技！如何將USB與Dropbox同步傳回家裡去
如果你使用本篇免安裝工具包，卻有以下問題限制，可以參考此密技。
- 練習與作業都放在USB隨身碟，擔心不小心搞丟
- 怕上下課忘記帶了隨身碟，想在雲端快速取回，或家裡與學校的資料需要雙向同步。
- XAMPP只能根目錄下，但Dropbox不允許設定再根目錄或USB內。

### 步驟說明
1. 下載安裝Dropbox桌面軟體，並登入帳號
2. 先指定Dropbox同步指定到 ==D:\學號_姓名\\==，Dropbox會自動規劃成==D:\學號_姓名\\Dropbox==
3. 接著步驟為將USB隨身碟增加一個路徑到該同步目錄內。
4. 進入磁碟管理->對免安裝工具包所在位置->按下右鍵->變更磁碟機代號->選擇新增->找到該同步位置(==D:\學號_姓名\\Dropbox==)，並指定資料夾名(ex:Web_Portable)->按下確定。

5. 透過以上方式，你可以在雲端上備份資料並集中在==Web_Portable==內，也能在家裡使用相同資料。