Azure&Web3项目问题总结(Next.js)

Azure, Web3

 2022/11/09 

Azure&Web3项目问题总结(Next.js)

(这是我在微软的第一个Web3项目，也是最后一个Web3项目，但总算也有一些收获)辛苦了几个月，第一个Web3项目终于要落地了。同时也陆陆续续收到了项目上的各种反馈，跟着开发团队的大佬搞了两个通宵，又是一把心酸血泪史。

先说项目技术栈：

1、前端使用React框架Nextjs + TypeScript，混合模式SSR渲染

2、区块链使用长安链，但并非公链，是以长安链技术为基础的区块链服务

3、云服务使用Azure，前端应用和区块链节点都部署在Azure云服务中

目前问题主要集中在前端应用部署到Azure服务时遇到的：

1、Azure Static Web Apps 部署遇到100M的问题

Untitled

问题原因：

目前Azure Static Web Apps是预览版，如果部署Hybrid Nextjs Application，会有100M大小的限制，具体内如可以查看这里

Next.js support on Azure Static Web Apps

补充说明：

在解决这个问题的时候，我们在GitHub上发现也有人提了同样的问题，并给出了解决方案

Max app size seems different than reported by Oryx · Issue #769 · Azure/static-web-apps

在 package.json文件中修改 build 为：

1	"build": "next build && rm -rf ./.next/cache"

但这种解决方案仅限于缓存目录超过100M，如果前端项目目录本身就超过了100M，那这种办法也无法解决问题。

解决办法：

这个限制无论使用GitHub Action，还是用Azure DevOps Pipeline都无法绕过去，必须保证项目大小小于100M，如果实在无法缩减项目大小，而且又必须以Hybrid方式部署Nextjs，可以改用Azure Web Apps

2、Azure Web Apps 部署缓慢的问题

Untitled

问题原因：

在通过GitHub Action部署项目时，我们发现在 build 阶段完成编译后上传artifact的速度极其缓慢，导致整个项目的部署时间超过了2个小时，截图是我创建的一个空白项目，编译后生成了14481个文件，上传artifact所需的时间已经超过了10分钟

Untitled

解决办法：

修改GitHub Action yml文件，将build阶段的 name: npm install, build, and test 挪到 deploy阶段，如下：

name: Build and deploy Node.js app to Azure Web App - nextjs

on:
  push:
    branches:
      - main
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2

      - name: Set up Node.js version
        uses: actions/setup-node@v1
        with:
          node-version: '16.x'

      # - name: npm install, build, and test
      #   run: |
      #     npm install
      #     npm run build --if-present
      #     npm run test --if-present

      - name: Upload artifact for deployment job
        uses: actions/upload-artifact@v2
        with:
          name: node-app
          path: .

  deploy:
    runs-on: ubuntu-latest
    needs: build
    environment:
      name: 'Production'
      url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}

    steps:
      - name: Download artifact from build job
        uses: actions/download-artifact@v2
        with:
          name: node-app

      - name: npm install, build, and test
        run: |
          npm install
          npm run build --if-present
          npm run test --if-present

      - name: 'Deploy to Azure Web App'
        id: deploy-to-webapp
        uses: azure/webapps-deploy@v2
        with:
          app-name: 'nextjs'
          slot-name: 'Production'
          publish-profile: ${{ secrets.AZUREAPPSERVICE_PUBLISHPROFILE_4D02291CCC754F088122BD94D420B75C }}
          package: .

这样修改完成之后，部署时间缩短到了3分钟左右

Untitled

3、Nextjs部署完成之后，页面浏览错误

Untitled

问题原因：

这个错误很神奇，我找了很久没有发现问题，最后还是请教了项目上的开发大佬，猜测是Azure Web Apps 对Nextjs的优化问题。在 package.json 中会定义Nextjs四个阶段的脚本 :dev build start lint，但在执行并没有执行成功，导致Application Error

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "next lint"
}

解决办法：

next 命令加上全局路径

"scripts": {
    "dev": "node_modules/next/dist/bin/next dev",
    "build": "node_modules/next/dist/bin/next build",
    "start": "node_modules/next/dist/bin/next start",
    "lint": "node_modules/next/dist/bin/next lint"
  },

Author：Zheng Yiqun

Link：http://zhengyiqun.net/2022/11/09/AzureWeb3ProblemSummary/

Publish date：November 9th 2022, 5:57:15 pm

Update date：April 13th 2024, 6:34:28 pm

License：本文采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可

Next Post

创建Azure Llama2 虚拟机
Previous Post

使用 Azure Devops pipeline的 Web3 Devops（2）

CATALOG

1. Azure&Web3项目问题总结(Next.js)
1. 1.1. 先说项目技术栈：
2. 1.2. 目前问题主要集中在前端应用部署到Azure服务时遇到的：