三週學會小程式（三）：服務端搭建和免費部署
通過第二講我們已經知道了怎麼快速搭建一個小程式客戶端，當然服務端也是必不可少的。登入驗證，內容儲存等等都離不開服務端。
本章節主要講解怎麼快速搭建一個服務端框架和免費部署。因為好多同學僅僅為了學習小程式，為此購買一個伺服器成本還是蠻高的，所以小編特此找了一種免費的服務資源提供給大家，等到你真正要部署小程式的時候再購買也不遲。《 ofollow,noindex">三週學會小程式第一講：小程式申請和注意事項 》裡面已經說了，部署小程式必須需要購買伺服器和域名，並且需要備案。
程式碼準備
和上一講《 三週學會小程式第二講：客戶端程式碼準備和基礎功能講解 》一樣，我們先克隆小編為大家準備的原始碼庫，然後對原始碼進行講解。原始碼庫地址：
https://github.com/codedrinker/jiuask-server.git
本講的 Tag 為 V3。
工具準備
JDK 1.8 或更高版本
IDEA，如果有條件儘量用付費版本，一些擴充套件的工具後面可能用到，比如Database。
Maven，這個是比較基礎的工具了。
執行專案
下載專案成功以後，開啟 IDEA， 使用 Maven方式匯入專案，一直下一步即可。匯入完成以後等待 Maven 下載依賴，下載依賴完成以後直接找到 Application.java 類右鍵運營即可啟動服務。位址列訪問
http://localhost:8888 即可看到我們的歡迎頁面。是不是使用 Spring Boot 運營專案非常簡單？再也不用磨磨唧唧配置 Tomcat了。
專案結構
如圖，
一個非常標準的 Spring Boot專案目錄，不瞭解 Spring Boot 可以直接去官網看一下初步理解就可以，你可以把 Spring Boot 簡單的看做讓你方便的通過一個類就能執行專案的方式，具體細節等你熟練使用以後自然會明白。
http://spring.io/projects/spring-boot
Application.java，專案的啟動類，直接右鍵執行即可，當然可以使用java命令啟動，如
java -jar -Dspring.profiles.active=production target/jiuask-server-1.0.0.jar
resources/public，是web專案的靜態資源，比如 js，css，img等都存放到這裡，Spring 預設會把 public 配置為根目錄，所有使用的時候直接 logo.jpg 即可。
templates，是存放Spring的web模板，類比的話就是我們熟知的 jsp 頁面，這裡用的thymeleaf模板語言，更強大，現在你理解它就是 HTML裡面有很多佔位符，可以賦值即可。
application-*.yml，這個是替代了我們之前使用的application.properties，因為 yml 的語法更強大，同時application.yml 是預設配置，所以你直接執行 Application.java 檔案會啟動 8888 埠就是因為裡面配置的是 port: ${port:8888}。
applicationContext.xml，便使我們熟知的 Spring 的配置檔案，後面有什麼需要來這裡配置就好了。咦？沒有 web.xml 檔案 Spring 是怎麼知道這個檔案的呢？那因為我在 Application.java 檔案中添加了一個註解:@ImportResource({"classpath*:applicationContext.xml"})
pom.xml，就不用細說了，如果你不瞭解 Maven 那麼你需要百度幾個文章瞭解下。
還剩下幾個檔案，不要著急，我們後面會講到。
程式碼講解
為了讓初步接觸 Spring Boot 的同學更好的理解專案，小編這裡簡單的對專案的程式碼進行講解。
Application.java
開始:
@SpringBootApplication
表示這個類是
Spring
專案的啟動類。
@Controller
表示把當前類定義為一個
Controller
。
@ComponentScan
表示
Spring
載入
Bean
的方式是掃描目錄，不需要每次都通過
xml
配置。
@RequestMapping("/")
則是定義訪問路徑和方法的對映。
return "index";
表示返回 templates/index.html 這個模板。
好，既然說到了模板，我們就簡單說一下模板裡面的邏輯。如圖:
我做了一個簡單的封裝，為了避免寫重複的程式碼，我把頭部和底部封裝到了 layout.html 在 index.html 和 error.html 直接引用這個佈局，替換它的 body 。所以你這個時候在 8888/ 後面隨便輸入內容訪問的便是 error 頁面，頭部和底部都是源自於 layout.html 。
這樣一來你就掌握了專案和本地部署的技能，那麼微信小程式需要訪問遠端的地址才能工作，怎麼部署到遠端呢？
免費部署
小編講解的免費部署的方式是使用 Heroku ，免費必定有限制，比如15分鐘不訪問會自動宕機，下次訪問會自動啟動，每個賬號有550個小時的免費使用時長，不過雖然有這些限制，對於我們做測試使用已經足夠了，而且它還會提供一個 **.herokuapp.com 的域名，正好給我們使用。
Heroku
官網註冊一個賬號，國外的網站訪問有點慢，自行解決。
https://id.heroku.com/login
不過有一個非常不好的訊息，
Heroku
不支援
126
郵箱，不過你不需要註冊多個，所以小編使用的自己的
QQ
郵箱。全部填寫完資訊以後，點選
Create Free Account
。然後去郵箱驗證，設定密碼即可。
下面我們需要建立一個 app ，可以簡單理解為建立一個 伺服器 ，可以用於部署我們的程式碼。
按照如圖步驟填寫名稱，找到一個不被佔用的英文，然後點選 create 。我填寫的是 jiuask ， 這樣我就會得到一個免費的域名 jiuask.herokuapp.com 。這樣我們就擁有一個免費的伺服器了，是不是很簡單?那接下來我們部署服務吧?
其實自動跳轉的頁面有提示，如果你英文好，直接按照提示來也可以，大致的步驟如下:
1，開啟你的終端，進入剛才準備好的專案目錄。
2，執行
heroku login
命令，會提示你輸入使用者名稱和密碼，剛才你註冊的郵箱和密碼。
3，輸入如下命令，當然後面的
jiuask
應該是你的名稱:
heroku git:remote -a jiuask
這個步驟就是在新增一個
Heroku
的 Git 倉庫，當你提交程式碼到
Heroku
的 Git 殘酷的時候會自動部署。
4，執行如下命名部署：
git push heroku master
5，等待命令列命令結束，瀏覽器輸入如下網址看下效果，記住把
jiuask
換成你自己的名字：
jiuask.herokuapp.com
是不是出現了神奇的一幕？這樣你就擁有一個自己免費的伺服器了，以後怎麼部署呢？每次
commit
程式碼以後，執行
4
步驟的部署就可以更新成功了。
彆著急激動，我們還是簡單說一下為什麼能部署成功：
1，小編的
pom.xml
裡面配置專案名稱是
jiuask-server
所以編譯打包以後會有一個
jiuask-server-1.0.0.jar
的
jar
包。
2，
Heroku
會預設識別
Procfile
檔案裡面的命令作為部署命令：
web: java -jar
-Dspring.profiles.active=production
target/jiuask-server-1.0.0.jar
所以每當我執行部署的時候， Heroku 幫我們執行了一下 Procfile 檔案，所以如果你的沒有部署成功，仔細檢查一下自己的配置是否正確。這樣今天的講解就進入了尾聲，是不是小程式的伺服器不用愁了？如果覺得有用記得給小編點小骨頭哦。[:)陰險臉]
作業
好，下面是作業時間，看懂了，馬上就自己動起手來。
Tab
上面有一個 “久問” 的
logo
，你現在需要把他換成你的
logo
。
2，修改
Controller
裡面的
index
方式，使得訪問
http://localhost:8888/?user=jiuask
index
頁面。user等於其他情況均跳轉
error
頁面並顯示登
**
使用者登入失敗。
3，新新增一個地址
http://localhost:8888/api/login
訪問是，返回 JSON 內容
{'success':true} 。
4，修改專案名稱，包括
pom.xml ， package ， Procfile 和 Readme 。
Heroku
建立自己的賬號，並部署成功。
如果你做好了，可以發到群裡向小夥伴兒炫耀一下哦。[:)鬼臉]
6，使用 Heroku 命令檢視一下最新的日誌。小編提示： heroku help 命令是一個百科全書哦。
我是浪漫的分割線
問答
如果您對本系列文章有興趣，歡迎置頂本訂閱號，第一時間獲取更新。
如果有任何問題，歡迎留言，小編很熱衷和大家一起討論技術問題。
另外小編建立了一個技術交流群，請新增小編微信，切記備註“小程式”，小編拉你進去。【只討論技術，非誠勿擾】
最好的讚賞是關注和分享
