開發函數計算的正確姿式 —— 移植 next.js 服務端渲染框架

首先介紹下在本文出現的幾個比較重要的概念：

函數計算（Function Compute）: 函數計算是一個事件驅動的服務，經過函數計算，用戶無需管理服務器等運行狀況，只需編寫代碼並上傳。函數計算準備計算資源，並以彈性伸縮的方式運行用戶代碼，而用戶只需根據實際代碼運行所消耗的資源進行付費。函數計算更多信息  參考。
Fun: Fun 是一個用於支持 Serverless 應用部署的工具，能幫助您便捷地管理函數計算、API 網關、日誌服務等資源。它經過一個資源配置文件（template.yml），協助您進行開發、構建、部署操做。Fun 的更多文檔  參考。
2.0 版本的 Fun，在部署這一塊作了不少努力，並提供了比較完善的功能，可以作到將雲資源方便、平滑地部署到雲端。但該版本，在本地開發上的體驗，還有較多的工做要作。因而，咱們決定推出 Fun Init 彌補這一處短板。
Fun Init: Fun Init 做爲 Fun 的一個子命令存在，只要 Fun 的版本大於等於 2.7.0，便可以直接經過  fun init 命令使用。Fun Init 工具能夠根據指定的模板快速的建立函數計算應用，快速體驗和開發函數計算相關業務。官方會提供經常使用的模板，用戶也能夠自定本身的模板。

背景

next.js 是一種 React 的服務端渲染框架，且 next.js 集成度極高，框架自身集成了 webpack、babel、express 等，使得開發者能夠僅依賴 next、react、react-dom 就能夠很是方便的構建本身的 SSR React 應用，開發者甚至都不用像之前那樣關心路由。

next.js 的高度集成性，使得咱們很容易就能實現代碼分割、路由跳轉、熱更新以及服務端渲染和前端渲染。

next.js 能夠與 express、koa 等服務端結合使用。爲了能讓 next.js 在函數計算運行，首先須要讓 next.js 
在 express 中運行起來，而後再移植 express 到函數計算中運行。express 應用移植相關文章：

• 開發函數計算的正確姿式——移植 Express
• 移植 express.js 應用到函數計算
• next.js 運行在 express 中

如今，咱們提供了一個 fun 模塊，經過該模板，三分鐘就可讓 next.js 應用在函數計算中運行起來。效果以下：

快速開始

1. 安裝 node

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.5/install.sh | bash
nvm install 8

2. 安裝 fun 工具

npm install @alicloud/fun -g

fun 工具的某些子命令可能會用到 docker，因此你須要安裝好 docker，具體參考文檔：Fun 安裝教程。

3. 經過 fun 模板生成項目

fun init -n demo https://github.com/muxiangqiu/fc-next-nodejs8.git

項目生成好後，在根目錄下有個 README.md 文件，閱讀該文件能夠幫你快速瞭解項目骨架爲你作了什麼，以及相關的命令。具體詳情：README.md。

4. 安裝依賴

cd demo # 切換到項目根下面，後面的全部命令，都是在項目根下面執行
npm install

5. 本地運行 next.js

npm run dev

6. 編譯 next.js

npm run build

7. next.js 在本地函數中運行

npm run start

8. 部署函數到雲端

部署函數的時候須要用到 AK 等下信息，能夠經過 fun config 來配置，若是配置過請忽略，部署函數命令以下：

npm run deploy

小結

該模板默認提供的是 http 觸發器方式觸發函數，同時也提供了 API 網關方式觸發函數，只是與 API 網關的代碼被註釋掉了而已，其中，template.yml 文件與 API 網關相關的配置也被註釋掉了。在模板項目中，提供了兩個比較重要的文件：server.js 和 fc.js。server.js 負責 next.js 與 express 對接；fc.js 負責 express 與 express 對接。這兩個文件通常狀況下不須要修改。接下來，你就能夠按照 next.js 標準方式開發 next.js 應用了。

相關連接

• Fun Init 自定義模板
• 移植 express.js 應用到函數計算
• 開發函數計算的正確姿式——移植 Express
• 開發函數計算的正確姿式 —— 使用 Fun Init 初始化項目
• next.js 運行在 express 中

---

本文做者：木香丘

閱讀原文

本文爲雲棲社區原創內容，未經容許不得轉載。