為什么80%的碼農都做不了架構師？>>> ??

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

函數計算（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 中

作者：木香丘

原文鏈接

本文為云棲社區原創內容，未經允許不得轉載。

轉載于:https://my.oschina.net/yunqi/blog/3053584

總結

以上是生活随笔為你收集整理的开发函数计算的正确姿势 —— 移植 next.js 服务端渲染框架的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。