第十七天：怎麼讓別人連到我作好的網站？（ 2018 iT邦幫忙鐵人賽－只要有心，人人都可以作卡米狗 ）

markdown 你知道為什麼在瀏覽器輸入網址 [http://localhost:3000/](http://localhost:3000/) 就能連到自己的網頁伺服器嗎？ # 認識 IP 位址(Internet Protocol Address) IP 位址就像經緯度，是由數字所構成。每一台電腦只要連上網，都會有一個 IP 位址。如果你想知道你的 IP 位址，可以開啟這個網頁：[http://www.whatismyip.com.tw/](http://www.whatismyip.com.tw/)。 舉個例：`127.0.0.1` 就是一個 IP 位址。 `127.0.0.1` 是一個特殊的 IP 位址，他代表的意義是`我家`。也就是說，任何人在瀏覽器上輸入 `127.0.0.1` 只會連到他自己的電腦。 所以輸入 [http://127.0.0.1:3000/](http://127.0.0.1:3000/)，也能連到自己的網頁伺服器。 # 認識網址 一個網址包含很多資訊，讓我舉個例，以 [https://ithelp.ithome.com.tw/users/20107309/ironman/1253](https://ithelp.ithome.com.tw/users/20107309/ironman/1253) 來說： - `https://`：這是通訊協定，代表寄出的是明信片還是包裹 - `ithelp.ithome.com.tw`：這是網域，代表收件者住址 - `/users/20107309/ironman/1253`：這是路徑，代表收件者姓名 # 通訊協定 我們只討論 HTTP 和 HTTPS 通訊協定，之前也提到過很多次，這裡就不多講了。 # 網域(Domain Name) 因為 IP 位址不好記憶，就跟經緯度不好記憶一樣。一個有腦子的人類會幫每個地方取名，你也會想幫你的網站取名，那就是網域名稱，當然你取的名字必須是人家沒取過的。 每個網域會對應到一個 IP 位址，而 IP 位址對應到一台電腦，所以每個網域都會對應到一台電腦。如果你想要幫自己的電腦取名，你得找一個網域商購買你想要的網域名稱，還要指定這個網域所對應的 IP 位址。如果你很有錢的話，你也可以幫同一台電腦取多個名字。 因為 `localhost` 網域所對應的 IP位址就是 `127.0.0.1`，所以在瀏覽器輸入網址 [http://localhost:3000/](http://localhost:3000/) 就能連到自己的網頁伺服器。 # 路徑(Path) 在古代，每個路徑都會對應到一個檔案，古代的網址結尾還可以看見副檔名呢！現代的網頁伺服器都有路由功能，可以讀取路徑後決定要用哪一段程式來回應，也就是我們之前寫過的 Route 和 Controller Action。 # Port 一台電腦可以同時運作許多的網路服務，你可以想像成一家百貨公司有很多專櫃，要買不同的商品就要到不同的櫃位。如果你想買東西，你得知道你要去哪個櫃位買。而櫃位就是 Port。 啟動一個網頁伺服器，就像是雇一個櫃姐去站櫃台一樣，他必須一直站在那等客人來。就算都沒客人來，他也不能偷偷滑手機。 一台電腦可以同時啟動許多網頁伺服器，只要他們的網域或者 Port 不相同就可以。 如果網址沒有特別標示 Port，那就會採用預設值。預設的 HTTP Port 是 80，而 HTTPS Port 是 443。 舉個例：我們的網頁伺服器會去站在 Port 3000 的櫃位，所以我們連線到網頁伺服器要輸入[http://localhost:3000/](http://localhost:3000/) 或輸入 [http://127.0.0.1:3000/](http://127.0.0.1:3000/)。 # 怎麼讓別人連到我的網站？ 剛才說 `localhost` 代表自己的電腦，所以你如果把這個網址傳給別人，別人點了之後不會連到你的電腦，而是連到他自己的電腦。所以如果我想要讓別人連到我的網站，我要給他怎樣的網址呢？ 你需要給的網址在這裡：[http://www.whatismyip.com.tw/](http://www.whatismyip.com.tw/)，這個網頁所告訴你的IP位址，是代表你電腦的IP位址，任何人輸入這個IP位址都是連到你這。 假設我的IP位址是 `100.100.100.100`，那麼在網址列輸入 [http://100.100.100.100:3000/](http://100.100.100.100:3000/) 就會連到我的網站。 # 可是我剛剛試了但沒有成功 事情並沒有這麼單純。如果你試了但沒有成功，表示你的電腦是透過防火牆連上網路，剛剛那個網頁所取得的 IP 位址是防火牆的 IP 位址，不是你的電腦的 IP 位址，所以人家連不進你的電腦。 你必須在防火牆設定當有人要從 Port 3000 連到防火牆時，就把連線轉到你的電腦上，這樣人家才連得到你的電腦。我不打算教你怎麼設定防火牆，因為每個人的網路環境不同，而且你的電腦應該也不會想一直開著。我試過了，開著一個月都沒關的電費大概是 600 元。 # 所以要怎麼讓別人連到我的網站？ 我們在開發網站的時候，通常只有在測試網頁功能時會開啟網頁伺服器。像這種不給外人連線的環境，稱為開發環境。而我們會建立另一個專門給外人連線的環境，稱為發布環境。 當一個網站寫好之後，我們會把程式碼放到一台不關機的主機上，這台主機需要設定網域、網路環境，需要安裝網頁伺服器相關程式，然後啟動網頁伺服器就放著。建立一個發布環境也需要很多知識，根據設備不同，要作的事情也會不同。 # 那有比較簡單的方法嗎？ 有的，如果我們使用別人家的發布環境，那我們只需要把我們的程式碼放到別人的伺服器上就搞定了。 以卡米狗為例，我是使用 Heroku 來發布卡米狗，Heroku 有一定的免費額度，如果用量小的話是不用花錢的。我一開始也是這樣想，所以就把卡米狗放上去了，但他已經變成一個吃貨。 如果你想要使用 Heroku，你需要在 Heroku 註冊一個帳號，然後再把自己的程式碼傳上去，上傳程式碼需要使用 git 這個軟體。 git 是一個版本控管軟體，你可以直接理解為他是用來上傳和下載程式碼的軟體就好，不用太在意什麼版本控管，接下來我只會講怎麼使用 git 上傳程式碼，不會提到其他部分。有興趣深入學習 git 的人可以參考這個電子書：[https://gitbook.tw/](https://gitbook.tw/)，如果覺得習慣看影片學的人可以走這邊：[https://campus.5xruby.tw/p/git](https://campus.5xruby.tw/p/git)。 明天會講怎麼把我們作好的廢物網站弄上 Heroku。