![m1.jpg](https://ucc.alicdn.com/pic/developer-ecology/72ffbc8e85c14c89a006823b6777e258.jpg)

首先介紹下在本文出現的幾個比較重要的概念：
>函式計算（Function Compute）: 函式計算是一個事件驅動的服務，透過函式計算，使用者無需管理伺服器等執行情況，只需編寫程式碼並上傳。函式計算準備計算資源，並以彈性伸縮的方式執行使用者程式碼，而使用者只需根據實際程式碼執行所消耗的資源進行付費。函式計算更多資訊 [參考](https://statistics.functioncompute.com/?title=%E5%BF%AB%E9%80%9F%E8%BF%81%E7%A7%BB%20Next.js%20%E5%BA%94%E7%94%A8%E5%88%B0%E5%87%BD%E6%95%B0%E8%AE%A1%E7%AE%97&author=%E7%94%B0%E5%B0%8F%E5%8D%95&src=&url=https%3A%2F%2Fhelp.aliyun.com%2Fdocument_detail%2F52895.html)。
Fun: Fun 是一個用於支援 Serverless 應用部署的工具，能幫助您便捷地管理函式計算、API 閘道器、日誌服務等資源。它透過一個資源配置檔案（template.yml），協助您進行開發、構建、部署操作。Fun 的更多文件 [參考](https://statistics.functioncompute.com/?title=%E5%BF%AB%E9%80%9F%E8%BF%81%E7%A7%BB%20Next.js%20%E5%BA%94%E7%94%A8%E5%88%B0%E5%87%BD%E6%95%B0%E8%AE%A1%E7%AE%97&author=%E7%94%B0%E5%B0%8F%E5%8D%95&src=&url=https%3A%2F%2Fgithub.com%2Falibaba%2Ffuncraft)。

備註: 本文介紹的技巧需要 Fun 版本大於等於 3.7.0。

![2](https://data-analysis.cn-shanghai.log.aliyuncs.com/logstores/article-logs/track_ua.gif?APIVersion=0.6.0&title=%E5%BF%AB%E9%80%9F%E8%BF%81%E7%A7%BB%20Next.js%20%E5%BA%94%E7%94%A8%E5%88%B0%E5%87%BD%E6%95%B0%E8%AE%A1%E7%AE%97&author=%E7%94%B0%E5%B0%8F%E5%8D%95&src=)

# 背景
[Next.js](https://statistics.functioncompute.com/?title=%E5%BF%AB%E9%80%9F%E8%BF%81%E7%A7%BB%20Next.js%20%E5%BA%94%E7%94%A8%E5%88%B0%E5%87%BD%E6%95%B0%E8%AE%A1%E7%AE%97&author=%E7%94%B0%E5%B0%8F%E5%8D%95&src=&url=https%3A%2F%2Fnextjs.org%2F) 是一種 React 的服務端渲染框架，且 Next.js 整合度極高，框架自身整合了 webpack、babel、express 等，使得開發者可以僅依賴 Next、react、react-dom 就可以非常方便的構建自己的 SSR React 應用，開發者甚至都不用像以前那樣關心路由。
Next.js 的高度整合性，使得我們很容易就能實現程式碼分割、路由跳轉、熱更新以及服務端渲染和前端渲染。

# 環境準備
首先按照 Fun 的 [安裝文件](https://statistics.functioncompute.com/?title=%E5%BF%AB%E9%80%9F%E8%BF%81%E7%A7%BB%20Next.js%20%E5%BA%94%E7%94%A8%E5%88%B0%E5%87%BD%E6%95%B0%E8%AE%A1%E7%AE%97&author=%E7%94%B0%E5%B0%8F%E5%8D%95&src=&url=https%3A%2F%2Fgithub.com%2Falibaba%2Ffuncraft%2Fblob%2Fmaster%2Fdocs%2Fusage%2Finstallation-zh.md%3Fspm) 裡介紹的方法將 Fun 安裝到本機。
**PS: 本文介紹的方法，不需要安裝 Docker，僅僅安裝 Fun 即可，最簡單的方式就是直接下載可執行的二進位制檔案。**
安裝完成後，可以執行 fun --version 檢查 Fun 是否安裝成功。

# 快速開始
1. 建立一個 Next 專案，這裡以 nextjs 為例：

```
npm init next-app
```
2. 進入到剛剛建立的示例專案中：
```
cd nextjs
```
3. 本地執行測試該示例：
```
npm run dev 或者 yarn dev
```
效果如下：
![20200313103411.jpg](https://intranetproxy.alipay.com/skylark/lark/0/2020/jpeg/200393/1584067006694-066061ae-9dcd-43ff-b6e0-bb82f92b32f3.jpeg)

4. 編譯 nextjs 專案：
```
npm run build
```
5. 部署專案到函式計算：
僅需要一個命令**fun deploy**，Fun 會自動進入部署流程，在該流程中，使用者僅僅需要按下一系列的回車即可。流程細節如下：

1. Fun 檢測到這不是一個 Fun 專案，會提示協助建立（直接回車或者輸入 y 即可）:
		![20200313105720.jpg](https://intranetproxy.alipay.com/skylark/lark/0/2020/jpeg/200393/1584068254790-8f53c8aa-bcb5-4f91-9160-a028bbb9b13a.jpeg) 
	2. 	Fun 專案自動建立成功，提示是否進行部署？可以直接回車，或者輸入 y 進行確認：
	  ![20200313111040.jpg](https://intranetproxy.alipay.com/skylark/lark/0/2020/jpeg/200393/1584069057784-57021e01-287a-4169-9237-22a65984ced2.jpeg) 
	3.  然後 Fun 會直接將應用部署到線上了。
		![20200313111259.jpg](https://intranetproxy.alipay.com/skylark/lark/0/2020/jpeg/200393/1584069191767-2e544c50-a331-4dc3-9b45-f260f6447801.jpeg) 
	部署完成後，我們可以根據部署成功的日誌看到，函式計算為我們生成了臨時域名 14069166-1986114430573743.test.functioncompute.com，我們可以透過這個臨時域名直接訪問我們剛剛部署的應用。
	**注意：臨時域名僅僅用作演示以及開發，是有時效的，如果用作生產，請繫結已經備案的域名，繫結自定義域名可以參考 [詳情](https://statistics.functioncompute.com/?title=%E5%BF%AB%E9%80%9F%E8%BF%81%E7%A7%BB%20Next.js%20%E5%BA%94%E7%94%A8%E5%88%B0%E5%87%BD%E6%95%B0%E8%AE%A1%E7%AE%97&author=%E7%94%B0%E5%B0%8F%E5%8D%95&src=&url=https%3A%2F%2Fhelp.aliyun.com%2Fdocument_detail%2F90722.html)**

# 總結
本文主要介紹瞭如何將 Next.js 應用部署到函式計算。相比較與傳統的部署方法，不僅沒有更復雜，還省略了購買機器等步驟。實現，將傳統的 Next.js 應用在本地開發完成後，一鍵部署到遠端直接用於生產，並擁有了彈性伸縮、按量付費、免運維等特性。

>“[阿里巴巴雲原生](https://developer.aliyun.com/group/alisoftwaretech/)關注微服務、Serverless、容器、Service Mesh 等技術領域、聚焦雲原生流行技術趨勢、雲原生大規模的落地實踐，做最懂雲原生開發者的技術圈。”

快速遷移 Next.js 應用到函式計算

相關文章