三週學會小程序第三講：服務端搭建和部署

經過第二講咱們已經知道了怎麼快速搭建一個小程序客戶端，固然服務端也是必不可少的。登陸驗證，內容存儲等等都離不開服務端。
本章節主要講解怎麼快速搭建一個服務端框架和免費部署。由於好多同窗僅僅爲了學習小程序，爲此購買一個服務器成本仍是蠻高的，因此小編特此找了一種免費的服務資源提供給你們，等到你真正要部署小程序的時候再購買也不遲。(第一講《小程序註冊和注意事項》裏面已經說了，部署小程序必須須要購買服務器和域名，而且須要備案)。

代碼準備

和上一講《客戶端代碼準備和基礎功能講解》同樣，咱們先克隆小編爲你們準備的源碼庫，而後對源碼進行講解。源碼庫地址：
https://github.com/codedrinke...
本講的 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 文件，因此若是你的沒有部署成功，仔細檢查一下本身的配置是否正確。這樣今天的講解就進入了尾聲，是否是小程序的服務器不用愁了？若是以爲有用記得給小編點小骨頭哦。[:)陰險臉]

做業

好，下面是做業時間，看懂了，立刻就本身動起手來。
1，不知道你是否注意觀察，經過瀏覽器打開的時候 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。
5，使用 Heroku 建立本身的帳號，並部署成功。
若是你作好了，能夠發到羣裏向小夥伴兒炫耀一下哦。[:)鬼臉]

6，使用 Heroku 命令查看一下最新的日誌。小編提示：heroku help 命令是一個百科全書哦。

問答

若是您對本系列文章有興趣，歡迎置頂本訂閱號，第一時間獲取更新。
若是有任何問題，歡迎加入下方交流羣。請添加小編微信，切記備註「小程序」，小編拉你進去。【只討論技術，非誠勿擾】

關注

小編運營的訂閱號 「碼匠筆記」，就前後就任於 ThoughtWorks、阿里巴巴等互聯網公司的經驗分享，包含但不限於 JAVA、併發編程、性能優化、架構設計、小程序、開源軟件等。有興趣能夠關注一波，一塊兒學習、討論。