# 快速架設伺服器ngrok
{%hackmd BJrTq20hE %}

## 步驟：
1. 從官網下載 ngrok。[網址](https://ngrok.com/download)
2. 解壓縮，並將檔案放在你的專案下。
3. 取得 token：
從官網註冊你的信箱，取得 token
4. 開啟你的 terminal，進入專案底下執行：
`./ngrok config add-authtoken <YOUR_AUTH_TOKEN>`

// ?\ngrok.yml
version: "3"
agent:
    authtoken: 你得token
tunnels:
  ngrok1:
    proto: http
    addr: 8000
  ngrok2:
    proto: http
    addr: 8080
  ngrok3:
    proto: http
    addr: 9457

5. 架起渠道：
`./ngrok http <port>`
只有Port是你需要更改的，也就是說比如我的web專案啟動之後是在Local端是吃8080 Port的，就把以上指令的Port改成8080即可。
- 啟動畫面：
- 設定header語法:
`ngrok http http://localhost:8080`新版
~~`ngrok http --host-header="localhost:5500"`~~
## ngrok for nuxt [[npm]](https://www.npmjs.com/package/@nuxtjs/ngrok)
1. `npm i @nuxtjs/ngrok -D`
2.

    //nuxt.config.js
    {
      buildModules: [
        '@nuxtjs/ngrok',
      ],
    }

3. ngrok設定

    ngrok: {
        // module options
        authtoken: 'my-ngrok-authtoken'
        region: 'tw',
        addr: 8080,
        proto: 'http',
      }

See **[module options](https://ngrok.nuxtjs.org/options)**.
4. 最後`npm run dev`，如果有用`nuxt-vite`要記得先拿掉
## Cloudflare Tunnel：免費雲端代理伺服器
[使用教學](https://www.sakamoto.blog/cloudflare-tunnel/?fbclid=IwAR2aGhRBNJASXYpa6stPJ8GnGzzdbIQ5SLkKKlIOXX8xhACBtJqdEnGBs8E)
[官網](https://dash.cloudflare.com/)
## windows hosts設定
[設定教學](https://www.albert-yu.com/blog/windows-10-%e4%bf%ae%e6%94%b9%e7%b3%bb%e7%bb%9f-hosts-%e8%a8%ad%e5%ae%9a%e5%9c%96%e6%96%87%e6%95%99%e5%ad%b8/?fbclid=IwAR3NXalTS8wsru4sTnuG_dU8l0eGFKiNhy-jd_T4i8QsmriTYgZFvVnysDA)